Tracking Snippet Platform Setup

How the snippet's values reach Hermon from website forms, page builders, Typeform, Cal.com and Calendly. Install the snippet first — see the Tracking Snippet overview.

Website forms (HTML, Webflow, Lovable, SPAs)

No setup needed. Every form that contains an email field gets the fields as hidden inputs, including forms rendered after the page loads. Inputs that already exist with a matching name are filled in; values a visitor typed are never overwritten. Forms without an email field (search, login) are left alone.

If your form is built in JavaScript and submitted with fetch, read the values with hermon.getFields():

Custom form

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const fields = window.hermon ? hermon.getFields() : {};

  // Send to YOUR backend; it calls Hermon's opt-in API with your secret key.
  await fetch('/api/lead', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email: form.email.value, ...fields }),
  });
});

Sending to Hermon (Zapier, Make or your backend)

The snippet does not call Hermon itself. Your form tool or backend forwards the hidden fields to the opt-in submit API with your secret API key. Map them like this:

Hidden field	Opt-in API field
utm_source … utm_term, fbclid, fbc, fbp, landing_page, referrer	traffic.<same name>
hermon_pk	traffic.public_key
hermon_ua	user_agent (top level, not inside traffic)

POST /api/opt-in/submit

{
  "email": "jane@example.com",
  "first_name": "Jane",
  "source": "LANDING_PAGE",
  "user_agent": "{{hermon_ua}}",
  "traffic": {
    "utm_source": "{{utm_source}}",
    "utm_medium": "{{utm_medium}}",
    "utm_campaign": "{{utm_campaign}}",
    "utm_content": "{{utm_content}}",
    "utm_term": "{{utm_term}}",
    "landing_page": "{{landing_page}}",
    "referrer": "{{referrer}}",
    "fbclid": "{{fbclid}}",
    "fbc": "{{fbc}}",
    "fbp": "{{fbp}}",
    "public_key": "{{hermon_pk}}"
  }
}

ClickFunnels and other page builders

Many builders only send fields they know about. Create a hidden field for each name below on your opt-in form; the snippet fills them automatically.

utm_sourceutm_mediumutm_campaignutm_contentutm_termfbclidfbcfbplanding_pagereferrerhermon_pkhermon_ua

Typeform

Typeform keeps only the hidden fields declared on the form. In the Typeform builder, open your form and add each name below as a hidden field (Logic / URL parameters, depending on your plan):

utm_sourceutm_mediumutm_campaignutm_contentutm_termfbclidfbcfbplanding_pagereferrerhermon_pkhermon_ua

Links to typeform.com or typeform.eu get the values after #, as soon as the page loads and again on click.
Embed codes (widget, popup, slider, popover, side tab, live embed data-tf-live) get them through data-tf-hidden, and the legacy typeform-widget through its data-url. Hidden fields left empty in the embed code are filled; values your page sets are kept.
Embeds created in JavaScript with tf.createWidget() and the other tf.create…() functions, or the legacy typeformEmbed.make…(), get them added to their hidden fields. No code changes needed.
Everything else that shows a Typeform in an iframe — the @typeform/embed and @typeform/embed-react packages, iframes pasted by hand, custom form domains — gets them added to the form iframe when it appears.
With Hermon’s native Typeform integration, the hidden fields are read automatically from each response. With Zapier / Make, map them as shown above.

Load the snippet before Typeform’s embed script. If it loads later (for example through a tag manager), forms already on the page are updated once, within 10 seconds of the page opening. After that they are left alone so visitors never lose their answers.

Cal.com

utm_* values are tracked by Cal.com automatically and appear in the booking details.
For the other fields, add a booking question for each name below: input type Short Text, toggled to Hidden, with the identifier set to the field name.
Links to cal.com get the values as query parameters; data-cal-link buttons get them through data-cal-config.

fbclidfbcfbplanding_pagereferrerhermon_pkhermon_ua

Inline embeds created with Cal("inline", …) are supported only when the snippet tag loads before the Cal.com embed code.

Calendly

Calendly links and inline widgets get utm_source … utm_term as query parameters. No setup needed.
An existing utm_content on the link is never replaced — Hermon uses it to route bookings to a closer.

Calendly ignores every parameter except utm_*, so Meta click IDs (fbclid, fbc, fbp) cannot travel through a Calendly link. To keep them, collect the opt-in on your own page before the booking step.