> 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: Embedded Script Extension Files and Code

## Article: Embedded Script Extension Files and Code

## Article Link: https://dev.wix.com/docs/wix-cli/guides/extensions/site-extensions/embedded-scripts/embedded-script-extension-files-and-code.md

## Article Content:

# Embedded Script Extension Files and Code

[Add a new embedded script](https://dev.wix.com/docs/wix-cli/guides/extensions/site-extensions/embedded-scripts/add-an-embedded-script-extension.md) to your CLI project with the [generate](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/generate.md) 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:

+ An `embedded.extension.ts` file that defines a builder containing the configuration settings of your embedded script.
+ An `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:

- You're more likely to make errors in the filepaths if you add the files and folders yourself. If the filepaths are incorrect, the CLI can't detect the embedded script and it won't work.
- The auto-generated files offer template code that helps you get started developing.

## embedded.html

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:

- [Reference local files](#referencing-local-files-in-your-html-code)
- [Use dynamic parameters](#using-dynamic-parameters-in-your-html-code)
- [Add global CSS](#adding-global-css-to-your-html-code)

### Referencing local files in your HTML code

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:

```tsx
<script type="module" src="./local-script.js"></script>
```

> **Note:** TypeScript files are supported.

### Using dynamic parameters in your HTML code

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:

- Be strings.
- Contain only alphanumeric characters (no special characters or spaces).
- Be wrapped in double curly braces (`{{`).
- Be enclosed in quotes (`"`) to prevent code evaluation.
- Be declared in the `parameters` object when calling [`embedScript()`](https://dev.wix.com/docs/api-reference/app-management/embedded-scripts/embed-script.md). Learn more about [preparing your app for production](https://dev.wix.com/docs/wix-cli/guides/extensions/site-extensions/embedded-scripts/add-an-embedded-script-extension.md#step-2--prepare-your-project-for-production).

For example, the following code contains the dynamic parameters `googleTag` and `userName`:

  ```tsx
  <meta name = "google-tag" id = "{{googleTag}}"></meta>
  <script> console.log("Hello {{userName}} from the CLI.");</script>
  ```
### Adding global CSS to your HTML code

You can add CSS directly to your `embedded.html` file, or you can reference a CSS stylesheet with a link. For example:

```tsx
<link rel="stylesheet" href="./your-css-file.css" />
```

This CSS applies to a site globally. For example, the following code makes the background of every page red:

```tsx
#tuckg {
  background: red;
}
```

## embedded.extension.ts

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`:

```typescript
import { extensions } from "@wix/astro/builders";

export default extensions.embeddedScript({
  id: "cc5c768a-ab95-4b57-af11-612255b50d22",
  name: "My Script",
  placement: "HEAD",
  scriptType: "ESSENTIAL",
  source: "./extensions/site/embedded-scripts/embedded/embedded.html",
});
```

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](https://manage.wix.com/account/custom-apps). 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: <ul><li>`"ESSENTIAL"`: Enables site visitors to move around the site and use essential features like secure and private areas crucial to the functioning of the site.</li><li>`"FUNCTIONAL"`: Remembers choices site visitors make to improve their experience, such as language.</li><li>`"ANALYTICS"`: Provides statistics to the site owner on how visitors use the site, such as which pages they visit. This helps improve the site by identifying errors and performance issues.</li><li>`"ADVERTISING"`: Provides visitor information to the site owner to help market their products, such as data on the impact of marketing campaigns, re-targeted advertising, and so on.</li></ul>**About types**<br>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: <ul><li>`"HEAD"`: Injects the code between the page's `<head>` and `</head>` tags. Best used for analytics or early initialization.</li><li>`"BODY_START"`: Injects the code immediately after the page's opening `<body>` tag. Best used for critical functionality and noscript.</li><li>`"BODY_END"`: Injects the code immediately before the page's closing `</body>` tag. Best used for performance and non-blocking scripts.</li></ul>                                                                             |

## Setting dynamic parameter values

You can set dynamic parameter values to use in the script when it's embedded in a site. When calling the [`embedScript()`](https://dev.wix.com/docs/api-reference/app-management/embedded-scripts/embed-script.md) method, specify a `parameters` object and list your dynamic parameters in key-value pairs.

Learn more about [preparing your project for production](https://dev.wix.com/docs/wix-cli/guides/extensions/site-extensions/embedded-scripts/add-an-embedded-script-extension.md#step-2--prepare-your-project-for-production).