Install the pixel on Webflow

In Webflow, the RAVE™ pixel goes in your project's custom head code. The one thing to remember: Webflow only runs custom code on the published site, so you must publish after pasting.

Before you start

• Add your Webflow domain as a site in RAVE™. See Add a site.
• Copy the site's snippet: in your RAVE™ workspace, click Sites, open the site, and use the copy button under 1. Install the pixel.

<script async src="https://rave.cxformula.com/pixel.js" data-site="YOUR_SITE_KEY"></script>

Add the pixel

1. 1

   Open Project settings

   In Webflow, open your project's Project settings.

2. 2

   Go to Custom code

   Open the Custom code tab.

3. 3

   Paste into Head code

   Paste your RAVE™ snippet into Head code, keeping any code already there.

4. 4

   Save

   Save the changes.

5. 5

   Publish

   Publish the site. Custom code only runs on the published domain, not in the Designer.

Check that it works

1. In RAVE™, open a live campaign on this site and click Send test event.
2. Open your published Webflow site in a new browser window.
3. A sample card should appear within about a minute.
4. Click Delete test events on the campaign page when you're done.

Troubleshooting

• Nothing shows. Confirm you published after saving, and that you're on the domain you added as a RAVE™ site.
• Staging and live domains. If you test on the webflow.io staging domain and run live on your own domain, the same snippet works on both; add the live domain as your RAVE™ site.
• Cards on the wrong pages. Use the campaign's Pages tab to set Show on and Hide on rules.

Next steps

• Webflow forms: use RAVE™'s auto form capture. In your campaign's Sources tab, add an Auto form capture rule for the page with the form, and submissions are recorded as sign-ups.
• Form webhooks or Ecommerce orders: point Webflow's form or order webhooks, or a Zapier Zap, at your campaign's webhook URL. See How webhooks work.

The original guide is at /docs/webflow.