> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Add Self-hosted Site Plugin Extensions with Custom Elements
## Article: Add Self-hosted Site Plugin Extensions with Custom Elements
## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/site-extensions/site-widgets-and-plugins/add-self-hosted-site-plugin-extensions-with-custom-elements.md
## Article Content:
# Add Self-hosted Site Plugin Extensions with Custom Elements
**Tip:** Self-hosting requires you to manage deployment, authentication, and ongoing maintenance. To reduce complexity, [build your plugin with the Wix CLI for Apps](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/site-plugins/add-a-site-plugin-extension-in-the-cli.md).
A [site plugin](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/about-site-plugin-extensions.md) is a type of component that site builders can place in designated locations (called *slots*) within Wix apps. Site plugins extend the functionality of their host app by providing additional UI elements and business logic.
You can create a site plugin 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 editor as a plugin.
To create this extension, do the following:
* Code and deploy the custom element.
* Optionally, code and deploy your widget's settings panel.
* In the [app dashboard](https://manage.wix.com/account/custom-apps) in Wix Studio, set up the plugin and configure additional extensions, authentication, permissions, and more.
[Learn more about setting up your app in the app dashboard](https://dev.wix.com/docs/build-apps/develop-your-app/app-dashboard-setup/about-the-app-dashboard.md)
You can create a new app for your site plugin or add it to an existing app.
## Step 1 | Code your custom element
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](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
In your code, create a class for the custom element and register the custom element.
Here is a sample code snippet:
```js
class MyCustomElement extends HTMLElement {
constructor() {
super();
console.log(...);
}
connectedCallback() {
...
...
...
}
}
customElements.define('my-custom-element', MyCustomElement);
```
Important:
- Keep track of the name you used when registering the element with `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`.
- To call APIs using the [Wix SDK](https://dev.wix.com/docs/sdk.md), you need to [authenticate using the Wix Client](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/site-extensions/site-widgets-and-plugins/authenticate-using-the-wix-client-in-custom-elements-for-self-hosted-site-extensions.md).
Custom elements react to DOM-related events. When you create your custom element, use MDN lifecycle callback functions such as [`connectedCallback()`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks) and [`attributeChangedCallback()`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes).
When your code is ready, deploy your custom element’s JavaScript file on a remote or local server.
### Connect to the plugin's API
To enable plugins to communicate with their hosts, each slot supports an API that provides data about the plugin's context (for example, a plugin for the product page can access the `productId` property, which the host widget sets to indicate the item that it’s currently displaying).
Learn more about the [plugin APIs supported on each app page](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/supported-wix-app-pages/about-slots.md).
When building a plugin using a custom element, the properties provided in the plugin API are added to the custom elements as attributes. You can get their values in your code using the [`attributeChangedCallback()`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes) function, for example:
```js
static get observedAttributes() {
return ['product-id'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'product-id' && oldValue !== newValue) {
myProductId = newValue;
}
}
```
**Important:**
* Plugin API properties are transformed into custom element attributes using a case conversion from camel case to kebab case. This ensures compatibility with HTML standards. For example, `productId` becomes `product-id`.
* Plugin API properties are passed to the custom element as stringified objects if they are not primitive types. Use `JSON.parse()` to convert them back to their original form.
* Custom-element-based plugins do not support the use of plugin API functions.
### Integrate with Wix APIs
Plugins can use Wix APIs to interact with Wix’s business solutions, such as eCommerce, Stores, and Bookings. [Learn more about integrating with Wix APIs](https://dev.wix.com/docs/build-apps/develop-your-app/api-integrations/about-wix-apis.md)
## Step 2 | Code your plugin's settings panel
Your plugin should have a settings panel in the editor, which is displayed when a user clicks the **Settings** button in the plugin'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 plugin](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-widgets/create-a-settings-panel-for-a-site-widget-or-plugin-wix-cli-and-self-hosting.md).
When your code is ready, deploy your settings panel’s HTML file on a remote or local server.
## Step 3 | Build your app's dashboard page
If your plugin requires a back office management interface, you can create one either within the Wix dashboard, or as an external dashboard on a third-party platform. [Learn how to build a dashboard page to manage your site plugin](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/build-a-dashboard-page-to-manage-your-site-plugin.md)
## Step 4 | Set up the plugin in your app dashboard
To make your plugin available for installation on sites, set up the plugin in your [app dashboard](https://manage.wix.com/account/custom-apps) and configure its installation settings and market listing.
Your plugin's market listing determines how it will appear to users in the [plugin explorer in the editors](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/about-site-plugin-extensions.md), including the plugin's name, icon, and teaser.
> **Note**: The plugin's market listing is different from the [app's market listing](https://dev.wix.com/docs/build-apps/launch-your-app/market-listing/about-market-listings.md), which determines how the entire app appears in the [Wix App Market](https://www.wix.com/app-market).
1. In your Wix Studio workspace, select [Custom Apps](https://manage.wix.com/account/custom-apps), and then create a new app or select an existing app.
2. In the left menu, select **Extensions**.
3. Click **Create Extension** and find the **Site Plugin** extension.
4. Click **+ Create** and then select **Custom Element**
5. Configure your plugin's basic data:
* **Plugin name**: The plugin name that is displayed to users.
* **Tag name**: The custom element’s tag name that is used when registering the element. The tag name should be identical to the name you use in the `customElements.define()` function in your JavaScript file.
* **Script URL**: The URL where your custom element’s JavaScript code is deployed.
6. Configure how your plugin can be added to sites:
* **Which Wix app does it extend?**: The [Wix app](https://dev.wix.com/docs/api-reference/articles/work-with-wix-apis/platform/about-apps-created-by-wix.md) for which you're building the plugin.
* **Slots this plugin can be added to**: Select one or more [slots](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/supported-wix-app-pages/about-slots.md) that are appropriate for your plugin. Select slots in order of priority. If none of the selected slots are available, users can choose to replace a plugin that’s already been added.
* **Add this plugin automatically to the site**: Whether the plugin is automatically added to a slot when a user installs your app. If you set your plugin to be automatically added to a slot on installation, it will be placed in the first available slot according to the order you defined. If that slot is occupied, it will be added in the next available slot, and so on. If there are no available slots, it will not be added.
7. Configure your widget’s action bar in the editor:
* **Settings action button**: Provide the URL where your settings panel’s HTML code is deployed.
* **Manage action button** (optional): If your app has a [dashboard page](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-pages/about-dashboard-page-extensions.md), select the page you want to open when a user clicks the **Manage** button in the widget’s action bar.
8. Configure your plugin's market listing:
* **Teaser**: A short promotional description for your plugin's market listing.
* **Icon**: An icon for your plugin's market listing. Upload a square JPG or PNG file.
9. Click **Save**.
10. If your app is already approved and published, publish a new version in the app dashboard.
## Step 5 | Test and preview
Your unpublished plugins are available for installation in the editors when you're logged in with your developer account. This makes it easy to preview and test your plugin in a real environment.
To test your plugin in the editor:
1. Create a site and install the Wix app that your plugin extends.
2. Go to the page on which you want to install your plugin, and click the host widget's **Plugin** icon.
Your unpublished plugins will appear in the plugin explorer.
3. Hover over your plugin, and then click **Add**.
When prompted for consent, select the checkbox and click **Agree & Add**.
Once you install your plugin on a site, you can preview or publish the site to test the plugin's functionality and make sure it's working properly.
__Important:__
Site plugins are sandboxed when rendered in the editor to enhance security. This means they're treated as if they come from a different domain, which impacts access to browser storage APIs and other same-origin resources. You may encounter various errors when testing.
Learn more about [handling sandboxing in the editor](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/handle-sandboxing-in-the-editor.md).
## Step 6 | Submit and publish your plugin
When you’ve finished building and testing your plugin, you’re ready to launch and monetize your app.
Learn more about [submitting your app for review](https://dev.wix.com/docs/build-apps/launch-your-app/app-distribution/about-app-distribution.md).