Logo

Webflow

See what visitors do after they reach your Webflow site

When someone clicks a link in a Quotient email and lands on your Webflow site, you want to know what happens next. Quotient's JavaScript pixel records the visit and the pages they view while preserving the original campaign, email, or social post as the source.

You only need to install the pixel once. Webflow will add it to every page on your site.

Before You Start

Before you install the pixel, you need:

  • A Webflow Site plan that supports custom code
  • Permission to edit and publish the Webflow site
  • A Quotient public API key

Create the key in Settings → Developers. Choose a Public key and give it the Analytics: write permission. For its allowed origins, add your production domain, such as https://example.com. This prevents other websites from using your key.

If you plan to test before changing your live site, add your Webflow staging domain too. It will look something like https://your-site.webflow.io.

The key you copy should start with pk_. Never put a private key beginning with sk_ in Webflow or any other browser code.

Add the Pixel to Webflow

  1. Open your site in Webflow, then go to Site settings → Custom code.
  2. Scroll to Footer code.
  3. Paste the following snippet, replacing pk_replace_with_your_public_key with the public key you copied from Quotient:
<script src="https://unpkg.com/@quotientjs/client@0.6.2/dist/quotient.browser.js"></script>
<script>
  Quotient.QuotientClient.init({
    apiKey: "pk_replace_with_your_public_key",
  });
</script>
  1. Click Save changes.
  2. Publish the full site. Choose your webflow.io staging domain if you want to test before publishing to your production domain.

You must publish the full site because Webflow does not include site-wide custom code when you publish a single page. The Footer code field adds the pixel to every page in the location where Webflow recommends placing scripts. See Webflow's custom code guide if you cannot find this field.

The pixel records the current page when it loads and tracks later navigation automatically. Do not add another page-view call, or each visit may be counted twice.

Check the Installation

Visit the published site and move between a few pages. The quickest way to confirm that the pixel is working is to inspect the request it sends to Quotient:

  1. Open your browser's developer tools and select Network.
  2. Reload the page.
  3. Search the requests for analytics/web.
  4. Select the request and confirm that its status is 200.

If the request returns 403, the domain is probably missing from the key's allowed origins, or the key does not have the Analytics: write permission. If there is no request, make sure you published the full site and pasted a public key beginning with pk_ into the snippet.

Once the staging test works, publish the same changes to your production domain.

The pixel stores device and session identifiers in the visitor's browser. Your privacy notice and consent setup should cover this tracking. If you require consent before loading analytics, configure your consent tool to run the snippet only after the visitor accepts analytics tracking.