Note: This extension replaces the legacy custom element extension.
Note: For a more streamlined approach to developing your site widget, try out the Wix CLI or Wix Blocks instead of self-hosting.
You can create a site widget extension using custom element technology, with your code deployed on your own server. The custom element is essentially a new HTML tag that you define, which is made available in the Wix editors as a widget.
To create this extension, you need to do the following:
Code your custom element and its functionality in a JavaScript file. Use a class to define the element.
Note: For further guidance and examples on using web components, which are the foundation of custom elements, see the MDN documentation.
In your code, create a class for the custom element and register the custom element.
Here is a sample code snippet:
class MyCustomElement extends HTMLElement {
constructor() {
super();
console.log(...);
}
connectedCallback() {
...
...
...
}
}
customElements.define('my-custom-element', MyCustomElement);
customElements.define()
. You will need it when defining the tag name while configuring the widget extension in your app's dashboard. In our example, the name is my-custom-element
.Custom elements react to DOM-related events. When you create your custom element, use MDN lifecycle callback functions such as connectedCallback()
and attributeChangedCallback()
.
When your code is ready, deploy your custom element’s JavaScript file on a remote or local server.
Your widget must have a settings panel in the editor, which is displayed when a user clicks the Settings button in the widget’s action bar. The panel is rendered as an iframe, which you can build using any tools you choose.
Learn more about building a settings panel for a self-hosted site widget.
When your code is ready, deploy your settings panel’s HTML file on a remote or local server.
Configure your widget in your app dashboard so that it can be added to sites.
customElements.define()
function in your JavaScript file.You can now install your widget on a site.
To test your widget in the editors:
Once your widget is added to the site, you can preview or publish the site to test the widget’s functionality.