# Squarespace

The script goes in Code Injection, once for the whole site. The tags go in a Code Block on each page that shows the widget.

:::caution{title="Not tried yet"}
Mellow has not tried this recipe on a Squarespace site yet. The steps follow Squarespace's own help, the same snippet as [Plain HTML](/widget/recipes/html), and the plan rules below.
:::

Squarespace runs JavaScript in Code Injection and in a Code Block only on the Core plan or higher, or on a Business or Commerce plan from before 2025. On a plan without it, the widget does not start.

## 1. The site

In Mellow, add the site's addresses to the widget's **Sites**: the domain, such as `https://www.example.com`, and the built-in address, such as `https://example.squarespace.com`, while you edit there.

## 2. The script, in Code Injection

Open Squarespace's **Code Injection** in the site's settings, and put this in **Header**:

```html
<script type="module" src="https://mllw.is/widget/1/mellow.js"></script>
```

## 3. The booking, in a Code Block

Make a page, such as **Book** at `/book`. Add a **Code** block, keep it on HTML, and paste:

```html
<mellow-booking rental="your-rental" auth="pk_live_…"></mellow-booking>
```

For a search on the home page, add a Code block there too:

```html
<mellow-search rental="your-rental" auth="pk_live_…" action="/book" layout="row"></mellow-search>
```

The editor may not draw the widget. Open the page on the live site to see it.

To test first, use the test key on the built-in address: the test key works from the widget's own sites too.