Webflow

Webflow accepts custom <head> code either site-wide in Site settings → Custom code or per page in the page settings. Either way the code only reaches the live site when you publish.

Get your tracking snippet

In your Rybbit dashboard, open Site Settings → Tracking Script and copy your snippet. It looks like this:

<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>

YOUR_SITE_ID is the numeric ID of your site. If you self-host Rybbit, app.rybbit.io is the domain of your own instance.

Add the snippet to Webflow

Open your project and go to Site settings → Custom code.
Paste the snippet into Head code.
Click Save, then Publish the site.

Use this when you only want to track specific pages.

In the Designer, open the page's Settings (cog icon next to the page name).
Scroll to Custom code and paste the snippet into Inside <head> tag.
Click Save, then Publish the site.

Verify installation

Open your live site in a new tab and click through a few pages. Within a few seconds the pageviews appear in the Rybbit dashboard.

If nothing shows up:

View the page source and search for script.js?siteId= to confirm the snippet is on the page.
Open the browser Network tab and check that script.js returns 200 and that POST requests go to /api/track.
Disable ad blockers, or set up a proxy so the script loads from your own domain.
See the script troubleshooting guide for other common causes.

Track custom events

Give the element an ID in the Designer (Settings panel → General → ID), then attach a listener in Site settings → Custom code → Footer code or in an Embed element on that page:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var button = document.getElementById("my-special-button");
    if (!button) return;
    button.addEventListener("click", function () {
      window.rybbit?.event("button_click", {
        button_id: "my-special-button",
        page_path: window.location.pathname,
      });
    });
  });
</script>

The same pattern works for a Form Block's submit event. Webflow handles form submission itself, so this fires on the submit attempt, not on confirmed success.

Troubleshooting

Changes not showing on the live site: custom code is staged until you Publish. Check the published site, not the Designer preview.
Interactions that show or hide sections without changing the URL produce a single pageview. Track those states as custom events, or call window.rybbit.pageview() from your own script when they appear.
Scripts that read the DOM belong in Footer code, not Head code, so the elements exist when they run.

Next steps

Track custom events such as signups, purchases and button clicks.
Identify users to connect sessions to accounts.
Proxy the script through your own domain to bypass ad blockers.
Script attributes let you skip or mask URLs and tag events.