Add a Site Plugin Extension with the Wix CLI

The Wix CLI makes it easy to add and develop site plugins in your app project. 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 apps built by Wix, 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 project.
2. Test the site plugin on a site.
3. Deploy your project with the site plugin.

Step 1 | Add a site plugin to your app

In the terminal:

1. Navigate to your project repo.

2. Run the generate command.

   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 your-plugin-name.extension.ts configuration file, and in the app dashboard.

   • Wix app: The Wix business solution (app made by Wix) whose slot 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 your-plugin-name.extension.ts file.

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

Learn more about the site plugin extension files.

Step 2 | Test your site plugin

Follow the steps below to test your site plugin:

1. Run the dev command.
2. Select the option in the CLI menu to view your site plugin in the editor. This opens the 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 opens 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 (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.

Build and deploy your project

Once your project is ready for production, you can build and deploy it.

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

Delete a site plugin extension

To delete an existing site plugin extension from your app:

1. Delete the folder that contains your site plugin's files.
2. Delete your plugin extension's logo file from the public folder.
3. Remove the import and .use() statements for the extension from the extensions.ts file.