> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Add a Site Plugin Extension

## Article: Add a Site Plugin Extension with the Wix CLI

## Article Link: https://dev.wix.com/docs/wix-cli/guides/extensions/site-extensions/site-plugins/add-a-site-plugin-extension.md

## Article Content:

# Add a Site Plugin Extension with the Wix CLI

The Wix CLI makes it easy to add and develop [site plugins](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/about-site-plugin-extensions.md) in your app project. These are considered app extensions, and appear on the **Extensions** page in your [app's dashboard](https://manage.wix.com/account/custom-apps).

With site plugins, you can create interactive and feature-rich components that seamlessly [integrate into Wix’s business solutions](https://dev.wix.com/docs/build-apps/get-started/overview/integrating-with-wix-s-business-solutions.md), such as Wix Stores, Wix Bookings, and Checkout & Orders, 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](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) 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()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/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.
1. Test the site plugin on a site.
1. 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.
1. Run the [generate](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/generate.md) 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`](https://dev.wix.com/docs/wix-cli/guides/extensions/site-extensions/site-plugins/site-plugin-extension-files-and-code.md) file.

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

```bash
.
└── <your-app-name>/
    public/
     └── your-plugin-name-logo.svg
    |
    src/
      └── extensions/
          └── site/
              └── plugins/
                  └── <your-plugin-name>/
                      ├── <your-plugin-name>.extension.ts
                      ├── <your-plugin-name>.tsx
                      ├── <your-plugin-name>.panel.tsx
```

> **Note:** This is the default folder structure created by the CLI. You can move these files to any location within the `src/` folder and update the references in your `extension.ts` file. Learn more about the [flexible file system](https://dev.wix.com/docs/wix-cli/guides/get-started/project-structure.md#your-custom-extension-folder).

Learn more about the [site plugin extension files](https://dev.wix.com/docs/wix-cli/guides/extensions/site-extensions/site-plugins/site-plugin-extension-files-and-code.md).

## Step 2 | Test your site plugin

Follow the steps below to test your site plugin:

1. Run the [dev](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/dev.md) command.
1. 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.
1. Navigate to the page that contains your plugin slot and click on the page to select it.
1. Click the **Plugin** icon that appears in the page toolbar.
1. In the Plugins modal, find the plugin you created and click **+ Add**.
1. Publish your site.
1. 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.
1. Navigate to the page that contains your plugin slot. Your plugin should be visible in the slot.

> **Checkout plugins**  
> If you are building a plugin for the checkout page, you must create a dashboard page to provide users with a way to [add the plugin to their site](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/build-a-dashboard-page-to-manage-your-site-plugin.md).

## 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](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/build-a-dashboard-page-to-manage-your-site-plugin.md).

## Build and deploy your project

Once your project is ready for production, you can [build and deploy](https://dev.wix.com/docs/wix-cli/guides/development/build-and-deploy-a-project.md) it.

An app version allows you to publish an app to the [Wix App Market](https://www.wix.com/app-market) or install it on a site with a direct install URL. You can view your [app versions](https://manage.wix.com/app-selector?title=Select+an+App&primaryButtonText=Select+Site&actionUrl=https%3A%2F%2Fdev.wix.com%2Fapps%2F%7BappId%7D%2Fversions-app) in the app dashboard.

For more information about building and deploying your app, see [Build and Deploy an App with the Wix CLI](https://dev.wix.com/docs/wix-cli/guides/development/build-and-deploy-a-project.md).

## 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.
1. Delete your plugin extension's logo file from the `public` folder.
1. Remove the import and `.use()` statements for the extension from the [`extensions.ts`](https://dev.wix.com/docs/wix-cli/guides/extensions/about-the-extensions-ts-file.md) file.

> **Note**: If you've already [created a version](https://dev.wix.com/docs/wix-cli/guides/development/build-and-deploy-a-project.md#step-3--release-your-project) of your app, deleting a site plugin's files from your project doesn't remove the site plugin from your app's latest version in the app dashboard. To remove the site plugin, create a new version after deleting the site plugin files.

## See also

- [Tutorial: Create a Site Plugin for the Wix Stores Product Page](https://dev.wix.com/docs/build-apps/get-started/tutorials/tutorial-create-a-site-plugin-for-the-wix-stores-product-page-with-the-cli.md).
- [Checkout Page Slots, APIs, and Guidelines](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/supported-wix-app-pages/wix-e-commerce/wix-e-commerce-checkout-page.md)
- [About Site Plugin Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/about-site-plugin-extensions.md)