> 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: Build an Embedded Script in Studio Two

## Article: Build an Embedded Script in Studio Two

## Article Link: https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-frontend/embedded-scripts/build-an-embedded-script-in-studio-two.md

## Article Content:

# Build an Embedded Script in Studio Two

An [embedded script](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-frontend/embedded-scripts/about-embedded-scripts.md) is a configuration file plus an HTML fragment. You generate the files first, then spend most of your time in the HTML file.

This article walks through that loop from a scaffolded script to one that logs a message and can carry a per-installation value.

Follow the instructions below to:

1. Scaffold the script.
2. Set the configuration.
3. Write the HTML.

## Step 1 | Scaffold the script

Start from a generated embedded script rather than an empty folder, so the file structure and registration are already in place.

For the full procedure, see [Add an Embedded Script Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-frontend/embedded-scripts/add-an-embedded-script-extension.md).

You can find the new files under `src/extensions/site/embedded-scripts/<script-folder>/`. You spend most of this article in `<script-folder>.html`. For what every file in the folder is for, see [Embedded Script Extension Files and Code](https://dev.wix.com/docs/site-extensions/embedded-scripts/embedded-script-extension-files-and-code.md).

## Step 2 | Set the configuration

`<script-folder>.extension.ts` is the configuration file you own. It declares the script ID, name, placement, script type, and path to the HTML file.

```ts
import { extensions } from '@wix/custom-extensions';

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

Keep `id` stable once other code depends on it. When an app has more than one embedded script, this value is the component ID you pass to the [Embed Script API](https://dev.wix.com/docs/api-reference/app-management/embedded-scripts/embed-script?apiView=SDK.md).

`placement` is `HEAD`, `BODY_START`, or `BODY_END`. `scriptType` is `ESSENTIAL`, `FUNCTIONAL`, `ANALYTICS`, or `ADVERTISING`. Those values match the **Placement** and **Script type** choices from **Generate**.

For every field, see [Embedded Script Extension Files and Code](https://dev.wix.com/docs/site-extensions/embedded-scripts/embedded-script-extension-files-and-code.md#configuration-fields).

## Step 3 | Write the HTML

`<script-folder>.html` is the fragment injected into the page at the placement you set. A generated script logs a greeting and loads a local module:

```html
<script>console.log('Hello {{name}}');</script>
<script type="module" src="./logger.ts"></script>
```

`{{name}}` is a [dynamic parameter](https://dev.wix.com/docs/overview/extensions-framework/site-extensions/embedded-scripts.md#dynamic-parameters). The platform replaces it when the script is embedded. The placeholder has to sit inside quotes, and the name has to match the name you pass to the [Embed Script API](https://dev.wix.com/docs/api-reference/app-management/embedded-scripts/embed-script?apiView=SDK.md).

`logger.ts` is a generated module in the same folder. The HTML loads it with `type="module"`. You can replace the module, or delete that script tag if the fragment doesn't need a separate file.

For example, to log a fixed message instead of a parameter:

1. Open `<script-folder>.html`.
2. Replace `console.log('Hello {{name}}');` with `console.log('Hello world!');`.
3. Save the file.

When the script runs on the site, the browser console logs **Hello world!**.

To check the script on the published site, follow [Add an Embedded Script Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-frontend/embedded-scripts/add-an-embedded-script-extension.md#step-3--check-the-script).

When the script behaves the way you want, click **Publish** in the Studio Two editor to ship it with your site.

## See also

- [About Embedded Scripts](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-frontend/embedded-scripts/about-embedded-scripts.md)
- [Add an Embedded Script Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-frontend/embedded-scripts/add-an-embedded-script-extension.md)
- [Embedded Script Extension Files and Code](https://dev.wix.com/docs/site-extensions/embedded-scripts/embedded-script-extension-files-and-code.md)
- [Embedded Scripts](https://dev.wix.com/docs/overview/extensions-framework/site-extensions/embedded-scripts.md)