# Webflow

The script goes in the site's head code, once. The tags go in a Code Embed element on each page that shows the widget.

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

Webflow publishes custom code, the Code Embed element included, only on a site with a paid Site plan or a Workspace plan.

## 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 staging address, such as `https://example.webflow.io`.

## 2. The script, in the head code

In **Site settings → Custom code → Head code**, paste:

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

Press **Save**. To load it on the booking page only, put it in that page's **Page settings → Custom code** instead.

## 3. The booking, in a Code Embed

On the booking page, such as `/book`, add a **Code Embed** element where the widget goes, and paste:

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

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

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

The Designer shows a box in place of the widget. Publish, and open the page on the staging address or the domain to see it.

Webflow's classes do not reach the widget's parts, as the widget sets no class. Style the parts in an Embed with a `<style>` element, or in the head code, with the selectors from [Look](/widget/look).