Skip to main content

​
Webflow Integration Guide

Webflow forms can POST directly to Trackly’s webhook — no Zapier needed.

​
Step 1: Create your form in Webflow

  1. Open your Webflow project in the Designer
  2. Add a Form Block to your page
  3. Add these fields:
    • Phone (type: Tel, name: phone_number, required)
    • Consent checkbox (required) with label: “I agree to receive SMS marketing messages. Msg & data rates may apply. Reply STOP to unsubscribe.” This checkbox is an on-page UX/legal gate only — its field name is irrelevant to Trackly intake and the API never reads a consent field. What the API requires is the consentText/consent_text value (the exact disclosure language shown), sent in the request body (see Step 4).
  4. Optionally add: First Name (first_name), Last Name (last_name), Email (email)

​
Step 2: Send the submission through an authenticated relay

The webhook at https://api.tracklysms.com/api/v2/optins/webhook is guarded by API-key auth: it requires the X-Api-Key: trk_your_api_key_here header (or Authorization: Bearer trk_...) and returns 401 Invalid credentials when that header is absent. A native Webflow Form Block POST cannot attach custom headers, so pointing the form’s Action directly at the webhook URL will be rejected with a 401. Webflow’s native site-settings Webhooks (Project Settings → Integrations → Webhooks) also cannot add arbitrary request headers, and the form_submission event emits Webflow’s fixed payload envelope rather than a flat map of your field keys — so neither path can satisfy the auth header or the body contract. Instead, route the submission through a layer that can set the header and shape the body:
  • A Webflow Cloud / Logic flow, or
  • A relay/automation step (Make.com, Zapier, etc.), or
  • Custom JS on the page that issues a fetch() POST with the X-Api-Key header.
The request must send the X-Api-Key header and a JSON or form-encoded body containing phoneNumber, listId, and a non-empty consentText. If you prefer no API key at all, use Method 2 (iframe) or Method 3 (script), which need no credentials.

​
Step 4: Map your fields

Trackly accepts flexible field names. Use these in your Webflow form field names:
  • phone_number, phone, tel → maps to phoneNumber
  • first_name → maps to firstName
  • last_name → maps to lastName
  • email → maps to email
You’ll also need to include listId and consentText in the request your relay sends. Add hidden fields to your form:
  • Hidden field list_id with value set to your Trackly sending list ID
  • Hidden field consent_text with your TCPA consent language

​
Method 2: Iframe Embed

  1. Add a Custom Code Embed element to your page
  2. Paste:
  3. Replace YOUR_PUBLIC_TOKEN with your opt-in configuration’s public token (found in the Embed Code card)

​
Method 3: Script Tag

  1. Add a Custom Code Embed element or use Project Settings → Custom Code → Footer Code
  2. Paste your script tag from the Embed Code card:

​
Finding Your Credentials

  • API Key: Settings → API Keys in Trackly SMS
  • List ID: SMS → Sending Lists → click your list → the ID is in the URL
  • Public Token: Opt-ins → click your config → Embed Code card