Add a Site Plugin Extension in the CLI

The Wix CLI makes it easy to add and develop site plugins in your app. These are considered app extensions, and appear on the Extensions page in your app's dashboard.

With site plugins, you can create interactive and feature-rich components that seamlessly integrate into Wix’s business solutions, such as Wix Stores and Wix Bookings, extending their functionality and user experience.

Wix users can easily place site plugins into predefined slots (UI placeholders) within Wix apps, using the plugin explorer available in all Wix editors.

Site plugins in the CLI are built with custom element technology. The custom element is essentially a new HTML tag that you define, which is made available in the Wix editors as a plugin.

The Wix CLI creates the necessary files with template code so you can easily start developing your site plugin. It also calls define() for the custom element that the site plugin is built on, so you don't need to explicitly call it in your code.

Follow the instructions below to:

1. Add a site plugin to your app.
2. Test the site plugin on a site.
3. Deploy your app with the site plugin.

Before you begin

• You must have an app project that was created using the Wix CLI.
• You must be logged into your Wix Developer account. If you don’t already have one, sign up for a Wix Developer account.

Step 1 | Add a site plugin to your app

In the terminal:

1. Navigate to your project repo.

2. Run the following command:

   Copy

   The CLI displays a menu of extensions to generate. Select Site Plugin to continue. The CLI then prompts you for the following items:

   • Site plugin folder: The name of the folder in the project repo that contains the custom element code that the site plugin is built on.

   • Site plugin name: The name of the plugin that appears in the plugin.json configuration file, and in the app dashboard.

   • Wix app: The Wix business solution (app made by Wix) who's slot you you want to add your plugin to.

   • Slot: The slot you want to add your plugin to. Use the arrow keys to navigate the list.

   Note: You can only choose one slot when generating your plugin, however you can add more slots later by adding them to the plugin's plugin.json.

3. You will be asked if you would you like to set the Wix business solution to which you want to add your plugin as a requirement for your app. Press Y.

Upon completion, the extension files are created in your project directory with the following structure:

• site-plugin-logo.png - This file is the logo displayed for your plugin when a site owner views the plugins that can be added to a slot.
• panel.tsx - This file is optional but recommended. It contains the code for the site plugin's settings panel. It is not required, but we strongly recommend creating a panel to give the user control over the plugin's settings.
• plugin.json - This file is required and configures how your site plugin integrates with a Wix site. It defines the locations where the plugin can be added.
• plugin.module.css - This file is optional and configures CSS styling to customize your plugin's appearance. It is generated with some initial styles to help you get started.
• plugin.tsx - This file is required and contains the custom element code that supports the site plugin.

Step 2 | Testing your site plugin

Follow the steps below to test your site plugin:

1. Run the following command:

   Copy

2. Select the option in the CLI menu to view your site plugin in the editor. This will open your test site editor in your local development environment.

3. Navigate to the page that contains your plugin slot. You should see your plugin in the selected slot.

4. Publish your site.

5. Return to the CLI menu and select the option to view your site plugin on your site. This will open your site in the local development environment.

6. Navigate to the page that contains your plugin slot. Your plugin should be visible in the slot.

Step 3 | Build and deploy your app

Once your app is ready for production, you can build it and create a version in the app dashboard.

1. Run the following command to build your app:

   Copy

2. Run the following command and follow the prompts to create an app version:

   Copy

An app version allows you to publish an app to the Wix App Market or install it on a site with a direct install URL. You can view your app versions in the app dashboard.

For more information about building and deploying your app, see Build and Deploy an App with the CLI.

Step 4 | (Optional) Build a dashboard page to manage your site plugin

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 page to manage your site plugin.

Summary

You now have a site plugin extension configured in your app.

See also

• Tutorial | Create an App with Wix CLI