See this matrix comparing the different ways you can add custom code elements to your site and the benefits of each.
Yes! You don't have to create your own.
Just make sure to update the Tag Name in Properties when adding the custom element to your page.
No. Do not use any Velo APIs in your custom element. Only code using the standard ECMAScript 2015 class syntax can be used to define a custom element. See the MDN documentation.
If you define SEO Markup, all web crawlers can index the custom element based on the markup text you enter.
To make sure that web crawlers do not misinterpret your SEO Markup as an attempt to distort search engine rankings, make sure that the code of your element matches the SEO Markup exactly.
You can use Velo to host your custom elements (recommended).
Alternatively, you can use your own external or local server for hosting your custom elements.
- Editing, testing and debugging.
- Sharing it with another Wix site or on another project.
You can set up, or get access to, a server for your custom elements. If you want to host your custom elements with Wix, skip this step.
If you are hosting on
localhost, you can use HTTP (you might need to change browser settings). If you are hosting on an external server, this requires secure HTTPS.
Setting up a Server Locally with npm
Providing complete instructions for creating a server is outside of the scope of this article. But we can help get you started by giving you some instructions for creating a server on your local machine:
In a command prompt window, do the following:
- Create a folder for your custom elements on your local machine.
- Enter npm i -g serve to install the serve software.
- Run serve <custom-element-folder> to start the server.
- Copy the server's address, such as http://localhost:5000, to use when adding the custom element in the Wix Editor.
If you want your custom element to contain your own images, upload them to your Wix Media Manager or to any other image hosting site.
Copy the URL of the image. You will use this URL when implementing the new custom element.
Getting the URL from the Wix Media Manager
- Click Media on the left side of the Editor.
- If the image has been uploaded already, you will see it under Site Files. Click Show More.
- Right-click the image, and choose Copy URL.
Custom elements react to:
- DOM-related events. When you create your custom element, use MDN lifecycle callback functions such as
attributeChangedCallback(). These functions look out for DOM-related events.
- Wix-related events.
$w.onReady()notifies the custom element when the page is ready.
For security reasons, the custom element is rendered inside an iFrame inside the Editor and in preview mode. This might affect the layout of the custom element. Go to your published site to see how it actually looks on your live site. You can also use test sites as a preview.
There are a few requirements for working with custom elements. Make sure your site meets these requirements.
- When hosting externally, make sure that:
- Your link to the custom element URL contains HTTPS, not HTTP.
Only premium Wix users on sites with their own domain and with Wix ads removed can work with custom elements. Make sure your premium package is set up this way.
Make sure that your browser's security settings enable communication between the local machine on which you are working with Velo and the server that is hosting the custom element implementation. For instructions, see your browser documentation.
If you are working in Chrome, and you get messages similar to "This page is not secure," you can try adjusting Chrome's experiment settings:
- In the URL, enter chrome://flags.
- Disable Mark non-secure origins as non-secure.
- Enable Allow invalid certificates for resources loaded from localhost.
- Relaunch Chrome.