Webflow

Builder Reference

Webflow supports custom code in site/page head and body areas, plus Code Embed elements inside a page. See Webflow's custom code docs: head and body tags and Code Embed.

Analytics

Add analytics in Project settings or Page settings so it loads on the pages you want to track.

<script src="https://api.rooster.host/analytics/YOUR_PUBLIC_KEY.js" defer></script>

Basic Form Collection

On the page that has the Webflow form:

1. Add the collector script in page custom code before </body>, or place it in a Code Embed above the form.
2. Select the Webflow form element.
3. Add a custom attribute named data-rooster-form with the form group key.
4. Publish the site and submit a test form.

<script src="https://rooster.ink/embed/YOUR_PUBLIC_KEY.js" data-rooster-form="default" defer></script>

Multi-Stage Form

If your Webflow form has custom step buttons, add data-rooster-continue to each continue button and data-rooster-final="true" to the final submit button.

<script src="https://rooster.ink/embed/YOUR_PUBLIC_KEY.js" data-rooster-form="sales" defer></script>
 
<form data-rooster-form="sales">
  <input name="work_email" type="email" />
  <button type="button" data-rooster-continue>Next</button>
  <textarea name="project_notes"></textarea>
  <button type="submit" data-rooster-continue data-rooster-final="true">Submit</button>
</form>