> 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: Build a Site Plugin in Blocks

## Article: Add a Site Plugin Extension Using Wix Blocks

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/site-plugins/build-a-site-plugin-in-blocks.md

## Article Content:

# Build a Site Plugin in Blocks

<blockquote class="caution">

**Editor compatibility**

Wix Blocks apps aren't supported in the Wix Harmony editor. Existing Blocks apps remain available for purchase on the Wix App Market for Wix Editor and Wix Studio sites. To learn more, see [About Wix Harmony and Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-harmony-and-blocks.md).

</blockquote>

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 by providing additional Ul elements and business logic.

To build a site plugin, you need to do the following:

* In Wix Blocks, design your site plugin's UI and code its business logic.
* In the [app dashboard](https://manage.wix.com/account/custom-apps) in Wix Studio, set up your app's extensions, authentication, permissions, and more.

You can create a new app for your site plugin or add it to an existing app.

> **Checkout plugins**  
> If you're developing a site plugin for the checkout page, there are some special instructions that you must follow. Make sure to pay close attention to the dedicated notes throughout this article.

## Step 1 | Design your site plugin in Wix Blocks

1. Open an existing Blocks app or [create a new app](https://support.wix.com/en/article/wix-blocks-creating-an-app-and-opening-it).
2. Open the **App Interface** panel, click **+ Create Extension**, and select **Plugin**.
3. In the **Create Plugin** panel, do the following:  
   * Enter your plugin's name. This is the name that will be shown to users in the editor.
   * Select the Wix app the your plugin extends. The selected app is automatically [added as a dependency](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/set-wix-app-dependencies-in-blocks.md).
   * Select the slots to which your plugin can be added. Learn more about [available slots for each app](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/supported-wix-app-pages/about-slots.md).
   > **Note**: You can change these settings at any time in the [plugin's extension page in the app dashboard](#step-5--configure-your-plugins-settings-in-your-app-dashboard).
4. Click **Create**.
5. Click ![add-elements-icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/e173767638933ba8a4328239fb25cd35.png) **Add Elements** to open the **Elements** panel.
6. Drag and drop the elements you need, and adjust their layout and design.

Make sure to follow our [design guidelines](https://support.wix.com/en/article/wix-blocks-design-guidelines-for-applications).

## Step 2 | Code your plugin

Use Wix Blocks to [code your plugin’s business logic](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/about-coding-in-blocks.md). Plugins can use [Wix App APIs](https://dev.wix.com/docs/build-apps/get-started/overview/integrating-with-wix-s-business-solutions.md#apis) to access the site’s business data (such as Stores or Bookings data). Depending on your implementation, your plugin may also need to communicate with external servers.

![plugin-architecture](https://wixmp-833713b177cebf373f611808.wixmp.com/images/b3623aa2e76ff54a447f202f00482ab3.png)

### Use the plugin's API

To enable site plugins to communicate with their hosts, each slot supports an API that provides data about the plugin's context (for example the `productId` of the current product on the Product page). 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).

To use the plugin API in Blocks, you first need to add the [properties](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-api/blocks-widget-properties.md) and [functions](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-api/blocks-widget-functions.md) provided by the host widget to the plugin's Widget API.
You can then use your plugin's [`onPropsChanged()` function](https://dev.wix.com/docs/velo/velo-only-apis/$widget/on-props-changed.md) to get the values set by the host widget, for example:

```js
$widget.onPropsChanged((oldProps, newProps) => {
  const productId = newProps.productId;
}
```

## Step 3 | Configure your plugin’s editing experience

> **Checkout plugins**  
> Because the checkout page is not available in the Wix editors, any options for customizing a checkout plugin's appearance or functionality must be exposed through your app's [dashboard page](#step-4--build-your-apps-dashboard-page) or through your own external interface.

In the [Blocks Configuration tab](https://support.wix.com/en/article/wix-blocks-about-configuration) you determine how site builders will interact with your plugin when they add it to their site using any of the Wix editors. You have full control over what users will be able to change in the widget’s design and layout and how it behaves in editing time. You can also build an integrated settings panel, enabling site builders to customize the plugin.

## Step 4 | Build your app's dashboard page

> **Note:** Some plugins may not support automatic addition upon installation. If your plugin isn't added automatically, create a dashboard page to provide users with a way to add the plugin to their site.

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 5 | Configure your plugin's settings in your app dashboard

You can configure various settings, including the plugin's installation settings and market listing, in your app's site plugin extension page in the [app dashboard](https://manage.wix.com/account/custom-apps). You can navigate to this page directly from the Blocks editor.

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 the **Widgets and Design** panel in the left sidebar, hover over your plugin's name and click the **Show More** ![more-actions](https://wixmp-833713b177cebf373f611808.wixmp.com/images/18a9200003dded1ad6b1ad9300bbf9a0.jpeg) icon, and then click **Plugin Settings**.  
   The app dashboard opens in a new tab, showing your app's site plugin extension page.
2. Configure the following:
   * **Plugin name**: The plugin name that is displayed to users.
   * **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.
     > **Notes:**  
     > + If you set your plugin to be automatically added to a slot on installation, it's placed in the first available slot according to the order you defined. If that slot is occupied, it's added in the next available slot, and so on. If there are no available slots, it won't be added.
     > + Some plugins may not support automatic addition upon installation. If your plugin isn't added automatically, [create 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).
   * **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.
3. To apply changes made in the app dashboard, go back to the Blocks editor and build the app again to create a new version.
4. If your app is already approved and published, publish a new version in the app dashboard.

## Step 6 | 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.

> **Checkout plugins**  
> If you're developing a plugin for the checkout page, you won't be able to test it in the editor. See how to [test a checkout plugin](#test-a-plugin-for-the-checkout-page).

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.

### Test a plugin for the checkout page

If you're developing a plugin for the checkout page, make sure you've set up a way to [install your plugin from the dashboard](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) and then do the following:

1. [Create a Premium development site](https://dev.wix.com/docs/build-apps/launch-your-app/app-distribution/test-your-app-on-a-premium-site.md). Select Wix Stores as the business solution.
2. Publish the site.
3. In your app's dashboard, from the **Test Your App** menu, install your app on the development site.
4. Go to the site's dashboard, navigate to your app's dashboard page, and add the plugin to the checkout page.
5. [Preview the checkout process](https://support.wix.com/en/article/wix-stores-previewing-the-checkout-process) on your development site.

## Step 7 | 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).

## See also

- [Tutorial | Create an App in Wix Blocks](https://dev.wix.com/docs/build-apps/get-started/quick-start/create-an-app-with-wix-blocks.md)
- [Tutorial | Create a Site Plugin for the Wix Stores Product Page](https://dev.wix.com/docs/build-apps/get-started/tutorials/tutorial-create-a-site-plugin-for-the-wix-stores-product-page.md)
- [Tutorial | Create a Site Plugin for the Wix Bookings Service Page](https://dev.wix.com/docs/build-apps/get-started/tutorials/tutorial-create-a-site-plugin-for-the-wix-bookings-service-page.md)