Plain HTML | Rooster Docs

Analytics Only

Use this when you want page views, visitor context, and page-level bot protection without collecting form fields.

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

Collect Every Form

Place the collector in a shared layout only when every public form on the site should be collected. Without data-rooster-form on the script, Rooster scans all matching forms on the page.

<script src="https://rooster.ink/embed/YOUR_PUBLIC_KEY.js" defer></script>
 
<form data-rooster-form="default">
  <label>
    Email
    <input name="email" type="email" required />
  </label>
  <button type="submit">Join</button>
</form>
 
<form data-rooster-form="sales">
  <label>
    Work email
    <input name="work_email" type="email" required />
  </label>
  <button type="submit">Request demo</button>
</form>

Create matching form groups in Rooster before using non-default keys like sales.

Collect One Form

Use this on a single page when only one form should be collected. The script key and form key must match.

<script src="https://rooster.ink/embed/YOUR_PUBLIC_KEY.js" data-rooster-form="support" defer></script>
 
<form data-rooster-form="support" data-rooster-wait action="/thanks" method="post">
  <label>
    Email
    <input name="email" type="email" required />
  </label>
  <label>
    Message
    <textarea name="message" required></textarea>
  </label>
  <button type="submit">Send</button>
</form>

data-rooster-wait is for native HTML forms that submit to an action URL. Rooster prevents the submit event, sends the submission to the collector, then continues the native form submission.

By default Rooster waits up to 10 seconds. You can adjust that with data-rooster-wait-timeout, from 1000 to 30000 milliseconds:

<form data-rooster-form="support" data-rooster-wait data-rooster-wait-timeout="5000" action="/thanks" method="post">
  <!-- fields -->
</form>

If Rooster accepts the submission before the timeout, the visitor is sent to the form action after the submission is saved and integrations are triggered. If the collector is unavailable or the timeout is reached, Rooster queues a retry in the visitor's browser and continues the native form submission so your form is not blocked.

Use the regular collector script without data-rooster-wait for JavaScript or framework-managed forms that prevent native submission and handle their own success state or redirect.

Multi-Stage Form

Use data-rooster-continue on step buttons to save partial data. Add data-rooster-final="true" to the final submit button so the final submission completes the same record.

<script src="https://rooster.ink/embed/YOUR_PUBLIC_KEY.js" data-rooster-form="sales" defer></script>
 
<form data-rooster-form="sales">
  <section data-step="1">
    <label>
      Work email
      <input name="work_email" type="email" required />
    </label>
    <button type="button" data-rooster-continue>Next</button>
  </section>
 
  <section data-step="2">
    <label>
      Company size
      <select name="company_size">
        <option>1-10</option>
        <option>11-50</option>
        <option>51-200</option>
      </select>
    </label>
    <button type="button" data-rooster-continue>Next</button>
  </section>
 
  <section data-step="3">
    <label>
      Project notes
      <textarea name="project_notes"></textarea>
    </label>
    <button type="submit" data-rooster-continue data-rooster-final="true">Submit</button>
  </section>
</form>

Your own UI code can hide and show the sections. Rooster only needs the form fields and the stage button attributes.