Webflow

​

Add the snippet to Webflow

​

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:

<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

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

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

​

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)

​

Webflow + Zenstep use cases

• 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