CLI Documentation Notice
You're viewing documentation for the new Wix CLI, which we recommend for all new projects. Determine which CLI your project uses.
Previous CLI documentation:
Add a new embedded script to your CLI project with the generate command and selecting Embedded Script.
The CLI generates this directory structure in your project repo:
In the embedded script folder, the following files are created:
embedded.extension.ts file that defines a builder containing the configuration settings of your embedded script.embedded.html file that contains the HTML code you wish to inject into a site.It's possible to create each of these files yourself, but we don't recommend it for a couple of reasons:
The embedded.html file contains the HTML code you wish to inject. Your code is added to the page's head or body depending on your configuration.
In your HTML code, you can:
Wix hosts and deploys every file in your project unless you specify otherwise, including any that you add. Your HTML code can reference these files using a relative path.
When referencing local files in a <script> tag, the tag needs to have type="module".
For example, to reference a file named local-script.js in the same directory as embedded.html, use the following code:
Note: TypeScript files are supported.
Dynamic parameters are placeholders in your code that allow for the injection of custom information specific to each site where the code is deployed.
Dynamic parameters must:
{{).") to prevent code evaluation.parameters object when calling embedScript(). Learn more about preparing your app for production.For example, the following code contains the dynamic parameters googleTag and userName:
You can add CSS directly to your embedded.html file, or you can reference a CSS stylesheet with a link. For example:
This CSS applies to a site globally. For example, the following code makes the background of every page red:
The embedded.extension.ts file configures the settings for your embedded script. This file is required, so don't delete it after the embedded script is generated. If you add your own files, you must include embedded.extension.ts.
When you generate a new embedded script in your project, you'll see the following code in embedded.extension.ts:
You can edit the configuration object and add properties as follows:
| Field | Type | Description |
|---|---|---|
id | string | A unique identifier for your script. This is a randomly generated GUID. |
name | string | The name of your script as it will appear in your app's dashboard. It can only contain letters and the hyphen (-) character. A descriptive name will help you identify your embedded script in your Extensions page. |
scriptType | enum | Used by consent management apps to determine whether site visitors consent to having your script run during their visit. Possible values are:
An embedded script must have a type. If your script falls into more than one type, choose the option closest to the bottom of the list above. For example, if your script has Advertising and Analytics aspects, choose Advertising as its type. It's unlikely that you'll need to mark it as Essential. |
placement | enum | Indicates where in the page's DOM the HTML code will be injected. Possible values are:
|
You can set dynamic parameter values to use in the script when it's embedded in a site. When calling the embedScript() method, specify a parameters object and list your dynamic parameters in key-value pairs.
Learn more about preparing your project for production.