This feature is in Developer Preview and is subject to change.
Wix allows you to add site plugins to your app through the CLI. These are considered app extensions, and appear under the Extensions section of your app in the Wix Dev Center.
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:
In the terminal:
Navigate to your project repo.
Run the following command:
1
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.
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:
1
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.Follow the steps below to test your site plugin:
Run the following command:
1
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.
Navigate to the page that contains your plugin slot. You should see your plugin in the selected slot.
Publish your site.
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.
Navigate to the page that contains your plugin slot. Your plugin should be visible in the slot.
Once your app is ready for production, you can build it and create a version in the Dev Center.
Run the following command to build your app:
1
Run the following command and follow the prompts to create an app version:
1
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.
For more information about building and deploying your app, see Build and Deploy an App with the CLI.
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.
You now have a site plugin extension configured in your app.