> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getzenstep.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Webflow

> Install Zenstep on a Webflow site using the custom code editor.

## Add the snippet to Webflow

Webflow lets you inject custom code into the `<head>` or `<body>` of your site. The Zenstep snippet must go in the **before `</body>` tag** section.

### Site-wide installation (recommended)

1. In the Webflow Designer, go to **Project Settings → Custom Code**.
2. Scroll to the **Footer Code** section.
3. Paste the snippet:

```html theme={null}
<script
  async
  src="https://cdn.getzenstep.com/v1/snippet.js"
  data-zenstep="YOUR_SNIPPET_KEY"
></script>
```

4. Click **Save Changes** and **Publish** your site.

### Page-level installation

To install on a single page only:

1. Select the page in the **Pages panel**.
2. Click the **gear icon** to open Page Settings.
3. Scroll to **Custom Code → Before `</body>` tag**.
4. Paste the snippet and save.

***

## Calling identify

Webflow is typically used for marketing sites without user authentication. If your Webflow site has a login (using Webflow's Memberships feature or a custom auth integration), call `identify()` after login.

```html theme={null}
<script>
  // Triggered after Webflow Memberships login
  document.addEventListener("DOMContentLoaded", function () {
    // Webflow Memberships exposes the current user via MemberStack or custom attribute
    var userId = document.querySelector("[data-user-id]")?.dataset.userId;
    if (userId) {
      window.zenstep?.identify(userId);
    }
  });
</script>
```

For most Webflow use cases (unauthenticated visitors), you do not need to call `identify()`. Zenstep will track users anonymously and flows will show based on URL and device targeting rules.

***

## Verifying installation

1. **Publish** your Webflow site after adding the snippet.
2. Open the published site in Chrome (not the Webflow preview).
3. Open Developer Tools → Console.
4. You should see: `[Zenstep] Loaded N flow(s)`

<Note>
  Zenstep does not run in the Webflow Designer preview. It only runs on the
  published (or staging) domain. Test on your live Webflow domain.
</Note>

***

## Webflow + Zenstep use cases

Webflow is a great platform for using Zenstep's **banner** and **modal** flow types:

* **Banners** — show product announcements or conversion prompts at the top/bottom of the page
* **Modals** — display welcome messages, offer pop-ups, or exit-intent prompts
* **Tooltips** — highlight key CTAs or explain features in a product-led marketing site

All flow types are available regardless of which platform you use.
