Build a Plugin

A plugin is a type of widget that site builders can place in designated locations (called slots) within Wix apps. Plugins extend the functionality of their host by providing additional Ul elements and business logic.

Learn all about plugins

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

• In the Wix Dev Center, set up your app's extensions, authentication, permissions, and more.
• in Wix Blocks, design your plugin's UI and code its business logic.

Step 1 | Set up your app in the Dev Center

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

Extensions

In the Dev Center, your app needs to have two extensions for each plugin:

• Widget (Blocks) extension: Encapsulates the plugin's UI and code
• Widget Plugin extension: Defines the plugin's general settings, including the slots it supports and App Market configuration

Optionally, your app can have a Dashboard extension to provide a back-office interface for managing the plugin.

OAuth, permissions, and webhooks

If your app requires access to a site's private data (for example, contacts, orders, etc.), site owners must give you permission to collect this data when they first install your app. We use OAuth 2.0 to authorize your app to access our APIs and site data.

Use webhooks to get notifications about events in your app, other apps, or the Wix site.

Learn more about setting up OAuth, permissions and webhooks

Step 2 | Design your plugin’s UI in Wix Blocks

Wix Blocks is an editor for building responsive Wix apps. It lets you design widgets, write code, and use APIs – giving you all the tools you need to create a fully-functional app.

Use Wix Blocks to build the widget component that encapsulates the UI and business logic that your plugin provides. The widget includes both UI elements and code.

To add a Blocks widget extensions to an app, do one of the following:

• Add the extensions to an existing app:
  1. In the Dev Center, go to you app's extensions, and click Create Extension.
  2. Find the Widget (Wix Blocks) extension and click Create on Blocks.
• Create a new app and open it in Wix Blocks.

Make sure to follow our design guidelines.

Step 3 | Code your plugin

A plugin communicates with its host widget via an API that the plugin is expected to expose. The host widget uses this API to provide the plugin with data about the context in which it’s running (for example, a reviews plugin exposes a productId property, which the host widget sets to indicate the item that it’s currently displaying).

Depending on your implementation, your plugin may also need to communicate with external servers.

Connect the plugin's API

Add properties and functions to your Widget API according to the plugin’s intended API.
You can then get the properties provided by the host widget using $widget.props, for example:
const productId = $widget.props.productId

Develop the widget code

Use Wix Blocks to code your widget’s business logic. Plugins can use Wix App APIs to access the site’s business data (such as Stores or Bookings data).

Step 4 | Configure your plugin’s editing experience

In the Blocks Configuration tab 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 5 | Build your plugin’s Dashboard page (optional)

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 about building a Dashboard extension

Step 6 | Configure your plugin in the Dev Center

To make a plugin available for users to add in slots, you need to add a Widget Plugin extension to your app. This extension holds metadata about the plugin and is linked to the Blocks widget.

The plugin extension is also where you configure the market listing.

1. First copy your widget's ID from Wix Blocks. You will need this ID when configuring the plugin extension in the Dev Center.
   In the Widgets and Design panel in the left sidebar, hover over your widget's name and click the Show More icon, and then click Copy Widget ID.

   

2. In the Dev Center, select the app containing your plugin widget.

3. In the left menu, select Extensions.

4. Click Create Extension and select Widget Plugin.

5. Configure the following fields:

   • referenceComponentId: The ID of the Blocks widget obtained in step 1.
   • marketData.name: The name of the plugin.
   • marketData.description: A short description of the plugin.
   • marketData.logoUrl: The logo of the plugin, which should be a square image sized 35px x 35px in JPG or PNG format
   • componentName: A unique name for the component (used internally only)
   • placements: An array of placement objects that define the slots in which users can place the plugin.
   • installation: Defines your plugin's installation settings, including whether it is automatically placed in a slot when your app is installed and whether it is set as essential to your app's functionality. If set as essential, deleting the widget will also delete the entire app.

   Note: If you set your plugin to be automatically placed in a slot on installation, it will be placed in the first available slot according to the order you defined in placements. If that slot is occupied, it will be placed in the next available slot, and so on. If there are no available slots, it will not be placed.

6. Go to the Blocks editor and build the app again (to create a new version).

7. If your app is already approved and published, publish a new version in the Dev Center.

Step 7 | 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 editors:

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.

Step 8 | Submit and publish your plugin

When you’ve finished building and testing your plugin, you’re ready to launch and monetize your app.

Learn about the lifecycle of an app, submitting your app for review, and the app launch process.