> 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 Embedded Script Extensions with the CLI

## Article: Add Embedded Script Extensions with the CLI

## Article Link: https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/embedded-scripts/add-embedded-script-extensions-with-the-cli.md

## Article Content:

# Add an Embedded Script Extension with the Wix CLI for Apps

<blockquote classname="warning">

**Deprecated**

The Wix CLI for Apps is deprecated and no longer receives updates or new features. New projects should use the unified [Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md). [Determine which CLI your project uses](https://dev.wix.com/docs/wix-cli/guides/development/determine-which-cli-your-project-uses.md).

</blockquote>


An embedded script is an app extension that injects an HTML code fragment into the DOM of your users' sites. Unlike other extensions, embedded scripts are not fully configured during app installation, and require an additional setup step to embed the code fragment.

Follow the instructions below to:

1. Create an embedded script extension for a Wix CLI app.
2. Prepare your app for production.
3. Build and deploy your app.

Once this task is complete, your app will have an embedded script extension that injects its HTML code fragment into the DOM of every page of your users' sites.

## Before you begin

+ You must have an app project that was [created using the Wix CLI](https://dev.wix.com/docs/wix-cli/guides/get-started/quick-start-an-app.md).
+ You must be logged into your Wix Studio account. If you don’t already have one, [sign up for a Wix Studio account](https://manage.wix.com/account/custom-apps).

## Step 1 | Create the extension

In the terminal:
1. Navigate to your project repo.
1. Run the following command and follow the prompts to create an embedded script extension:

    ```tsx
    npm run generate -- --type=EMBEDDED_SCRIPT
    ```

    During the creation process you will be prompted to select a **script type** and a **placement**. For this guide, you can make any selection. For more information, see the [script type and placement options](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/embedded-scripts/embedded-script-extension-files-and-code.md).
    
Upon completion, the extension files will be created in your app directory with the following structure:

```tsx
.
└── <your-app-name>/
    └── src/
        └── site/
            └── embedded-scripts/
                └── <your-script-name>/
                    ├── embedded.html
                    ├── embedded.json
                    └── params.dev.json
```

+ [**embedded.html**](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/embedded-scripts/embedded-script-extension-files-and-code.md) - This file contains the HTML code fragment for your embedded script.
+ [**embedded.json**](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/embedded-scripts/embedded-script-extension-files-and-code.md) - This file contains information about your embedded script.
+ [**params.dev.json**](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/embedded-scripts/embedded-script-extension-files-and-code.md) - This file contains values for dynamic parameters to use during testing.

> **Note:** This step has covered the basics of setting up an embedded script extension. For more information about how you can customize your embedded script, read [Embedded Script Extension Files and Code](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/embedded-scripts/embedded-script-extension-files-and-code.md)

## Step 2 | Prepare your app for production

To finish setting up your embedded script, either you or the site owner must call the [embedScript()](https://dev.wix.com/docs/api-reference/app-management/embedded-scripts/embed-script.md) endpoint to embed your script and update the values of the dynamic parameters in each app instance.

#### Prompting the site owner to embed the code (recommended)

If your app has a dashboard page, you have the option to shift responsibility for this last configuration step onto site owners.

>**Note**: If an app has a dashboard page and an embedded script extension, site owners will automatically be directed to the app's dashboard page after installing the app.

This API call is also used to specify the value of any dynamic parameters. For more information about using dynamic parameters see [Using dynamic parameters in your HTML code](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/embedded-scripts/embedded-script-extension-files-and-code.md).

To use `embedScript()` in your app's dashboard page:

1. Open the `page.tsx` file in your app’s `src/dashboard/pages` folder.
1. Add the following import statement at the top of your page:

    ```tsx
    import { embeddedScripts } from '@wix/app-management';
    ```

1. Inside the dashboard page's `Index` component, add the following code before the return statement:

    ```tsx
    const { embedScript } = embeddedScripts;
    ```

1. Add the `embedScript()` call somewhere in your component's code.

    For example, add a call to action with instructions to click a button to complete setup for your app. Then, when the site owner clicks the button, they will call the endpoint.
    
    If your app contains only one embedded script, the endpoint should be called in the following format:

    ```tsx
    await embedScript({
       parameters: {
         "<your-key-1>": "<your-value-1>"
       }
    })
    ```
    If your app contains more than one embedded script, you must also pass a `componentId` using the `id` value defined in your `embedded.json` file. In this situation, your call should be in the following format:
        
    ```tsx
    await embedScript(
      {
        parameters: {
          "<your-key-1>": "<your-value-1>",
          "<your-key-1>": "<your-value-1>"
        }
      },
      {
        options: {
          "componentId": <your-component-id>   
        }   
      }
    )
    ```
   
    <blockquote class="warning">
    
    __Warning:__
    If your app only has 1 embedded script, don't pass the `componentId` in the request body. This action could break your app in production. The `componentId` is only relevant for apps with more than 1 embedded script.
    </blockquote>

Ensure that `parameters` contains all the dynamic parameters in your embedded script. Otherwise, you will get an error and your code will not be embedded.

**Example component:**
```tsx
const Index: FC = () => {

  const { embedScript } = embeddedScripts;

  async function handleButtonClick(){
    dashboard.showToast({
      message: 'Embedded script activated!',
    });
              
    await embedScript({
      parameters: {
        "<your-key-1>": "<your-value-1>",
      },
    });
  }
  return (
    // Your component code with a button that uses an onClick handler to call handleButtonClick.
  );
};
```

Although we are setting it up now, the `Embed Script` call will not work until you have released an app version, as documented [below](#step-3--build-and-deploy-your-app).

For a practical example of this configuration, see our [Mixpanel Analytics template](https://github.com/wix/cli-app-templates/tree/master/mixpanel-analytics).

#### Embedding a script as an app developer

You can also call the [Embed Script](https://dev.wix.com/docs/rest/app-management/embedded-scripts/embed-script.md) endpoint from your server once the app is installed on a user's site. This requires an access token obtained through the [OAuth process](https://dev.wix.com/docs/build-apps/develop-your-app/access/authentication/about-oauth.md).

## Step 3 | Build and deploy your app

Now that your app is ready for production, you can build your app and release a version in the [app dashboard](https://manage.wix.com/account/custom-apps).

1. Run the following command to build your app:

    ```bash
    npm run build
    ```

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

    ```bash
    npm run release
    ```

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 CLI](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/app-development/build-and-deploy-an-app-with-the-cli.md).

## Summary

By following these instructions, you have:

1. Created and configured an embedded script extension for your application.
2. Provided a method to embed your extension’s HTML code fragment on your users' sites. When site owners download your app and complete the setup process, your code will be injected into the DOM of every page on their site.
3. Built your app and released a version.

## Delete an embedded script extension

To delete an existing embedded script extension from your app, delete the subfolder under `src/site/embedded-scripts/` that contains your embedded script's files. 

> **Note**: If you've already [created a version](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/app-development/build-and-deploy-an-app-with-the-cli.md) of your app, deleting an embedded script's files from your project does not remove the embedded script from your app's latest version in the app dashboard. To remove the embedded script, create a new version after deleting the [embedded script's files](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/embedded-scripts/embedded-script-extension-files-and-code.md).

## See also

- [Tutorial | Build a Locations App Using the Wix CLI](https://dev.wix.com/docs/build-apps/get-started/tutorials/tutorial-build-a-locations-app-with-the-cli.md#tutorial--build-a-locations-app-using-the-wix-cli)