When you add a site plugin extension, the generated files land under src/extensions/site/plugins/<plugin-folder>/, a logo file lands in the project's public/ folder, and the extension is registered in your project's extensions.ts.
This file set is the same whether you add the plugin in a Studio Two site project or in a Wix CLI app.
| File | What it's for |
|---|---|
<plugin-folder>.extension.ts | The configuration file for the plugin ID, name, slots, tag name, and file paths. |
<plugin-folder>.tsx | The custom element that renders in the slot. |
<plugin-folder>.panel.tsx | The settings panel, a React component where a Wix user customizes the plugin in the editor. |
<plugin-folder>-logo.svg | The plugin's logo, referenced by marketData.logoUrl in the configuration file. |
The <plugin-folder>.extension.ts file declares the plugin with extensions.sitePlugin().
Import extensions from the package your project uses:
The following example declares a plugin named Checkout Banner for the Checkout page's checkout:top slot:
Keep this file. If you add a site plugin yourself, include it. Don't delete it after the plugin is generated.
| Field | Type | Description |
|---|---|---|
id | string | Plugin ID as a GUID. It must be unique across all extensions in the project. |
name | string | The plugin's name. |
marketData | object | Optional. How the plugin is presented to Wix users. |
marketData.name | string | The plugin name that Wix users see. |
marketData.description | string | The plugin description that Wix users see. |
marketData.logoUrl | string | URL of the plugin's logo. The generated value points to the logo file in the project's public/ folder. If you rename that file, update this value. If you delete it, remove this field. |
placements | array | The slots the plugin can fill. The generated file lists the slot you chose. Add an object for each other slot the plugin can fill. For each widget's appDefinitionId, widgetId, and slotId values, see the Legacy placements values section of the widget's page in About Slots. extensions.sitePlugin() doesn't accept the placementsSlotIds array that those pages recommend. |
placements.appDefinitionId | string | ID of the Wix app that owns the widget, such as Wix eCommerce. |
placements.widgetId | string | ID of the widget that contains the slot, such as the Checkout page. |
placements.slotId | string | ID of the slot in that widget, such as checkout:top. |
installation.autoAdd | boolean | For a plugin in an app, whether Wix adds the plugin to the first available slot in placements when a Wix user installs the app. Automatic placement might not work in some slots, such as the Checkout and Side Cart slots. Their pages in About Slots say so. |
tagName | string | The custom element's tag name. It must follow the custom element naming rules: lowercase, with at least one hyphen. A generated plugin uses the plugin folder name. |
element | string | Path to the custom element file, relative to the project's src/ directory. |
settings | string | Path to the settings panel file, relative to the project's src/ directory. |
The <plugin-folder>.tsx file defines the plugin as a custom element: a class that extends HTMLElement. The class must be the file's default export. Wix registers it under the configuration's tagName.
A generated plugin renders a title from its display-name attribute, and renders again when the attribute changes:
You can write code in other files and import it into this file.
A slot can pass data to the plugin through its plugin API, such as the ID of the product in view. Wix sets each plugin API property and function on the element as a JavaScript property with the same name. Wix also sets each plugin API property as an attribute:
productId becomes product-id.JSON.parse() to read it.To read an attribute, list it in observedAttributes and handle it in attributeChangedCallback(), the same way the generated element reads display-name. To receive a function, use a setter. For the setter pattern, see Connect to the plugin's API.
For the plugin API of each slot, see About Slots.
Note: The screenshots and slot locations in About Slots and its widget pages might not match every Wix editor. In some editors, a widget and its slots might look different, or not exist.
The <plugin-folder>.panel.tsx file exports a React component, the plugin's settings panel. A Wix user opens it in the editor to customize the plugin.
The panel reads and sets the plugin's properties with the Widget API from @wix/editor. Each property is bound to an attribute of the custom element, so a change in the panel updates the element. A generated panel has a single Display Name field for the display-name property:
Inside the panel you can use the Wix Design System for the panel's UI and the Wix JavaScript SDK to access Wix data.
Last updated: 2 November 2026