Build a Site Plugin in Blocks

A site plugin 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 Wix Dev Center, 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.

Step 1 | Design your site plugin in Wix Blocks

1. Open an existing Blocks app or create a new app.
2. Open the Widgets and Design panel, click , and select Add Plugin.
3. In the Add a 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.
   • Select the slots to which your plugin can be added. Learn more about available slots for each app.

   Note: You can change these settings at any time on the plugin's extension page in the Dev Center.

4. Click Create.
5. Click Add Elements to open the Elements panel.
6. Drag and drop the elements you want to your plugin.

Make sure to follow our design guidelines.

Step 2 | 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 3 | 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 4 | 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 5 | Configure your plugin's settings in the Dev Center

You can configure various settings, including the plugin's installation settings and market listing, in your app's site plugin extension page in the Dev Center. You can navigate to this page directly from the Blocks editor.

1. In the Widgets and Design panel in the left sidebar, hover over your plugin's name and click the Show More icon, and then click Plugin Settings.
   The Dev Center 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

   • Source widget ID: The extension ID of of the Blocks widget obtained in step 1.

   • Which Wix app does it extend?: The Wix app for which you're building the plugin.

   • Slots this plugin can be added to: Select one or more slots 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.

   • 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.

   Note: 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.

3. To apply changes made in the Dev Center, 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 Dev Center.

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.

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 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.

See also

• Tutorial | Create an App in Wix Blocks
• Tutorial | Create a Site Plugin for the Wix Stores Product Page
• Tutorial | Create a Site Plugin for the Wix Bookings Service Page