> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tracklysms.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Webflow

# Webflow Integration Guide

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

## Method 1: Native Form with Custom Action (Recommended)

### 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:
   ```html theme={null}
   <iframe src="https://api.tracklysms.com/optin/page/YOUR_PUBLIC_TOKEN" width="100%" height="520" frameborder="0" style="border:none;max-width:480px;margin:0 auto;display:block;"></iframe>
   ```
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:
   ```html theme={null}
   <script src="https://api.tracklysms.com/optin/script.js?token=YOUR_PUBLIC_TOKEN" async></script>
   ```

## 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