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

# Set Up Webhook Integration

> Learn how to set up a webhook integration in LanderLab to send lead data to any HTTPS endpoint in real time, including CRMs, lead buyers, and custom APIs.

> Connect a webhook to your landing pages in LanderLab to send lead data to any HTTPS endpoint in real time. Use webhooks to push leads to CRMs, lead distribution platforms, custom APIs, or any system that accepts HTTP requests.

## What is a Webhook?

A webhook is an automated HTTP request that sends data from one system to another the moment an event happens. In LanderLab, a webhook fires every time a lead is collected on your landing page. It sends the lead data (form fields, visitor information, and any custom fields you define) directly to the URL you specify.

This means your leads are delivered to your CRM, lead buyer, or backend system instantly, without any manual export or third-party middleware.

LanderLab's webhook integration supports **GET**, **POST**, and **PUT** methods, **JSON** and **Form (URL encoded)** body types, custom headers, and full control over which fields are sent and how they are named.

<Note>
  Webhook integrations are **not** saved globally. Each webhook is configured per landing page, so you will need to set up a new webhook for each landing page where you want to send lead data.
</Note>

***

## How to Add a Webhook

The webhook setup uses a 3-step wizard: configure the request, map your fields, and review the final payload before connecting.

### Step 1: Configure the Request

<Steps>
  <Step title="Go to your landing page">
    Navigate to **Landing Pages** and click the **name of the landing page** where you want to add the webhook.
  </Step>

  <Step title="Open the Integrations tab">
    Click **Add Integration** to open the integrations panel.
  </Step>

  <Step title="Select Webhook integration">
    From the list of available integrations, find **Webhook integration** (labeled as "Send lead data to any HTTPS endpoint in real time") and click on it. The webhook configuration wizard will open.
  </Step>

  <Step title="Fill in the request settings">
    Enter the following details:

    | Field         | Description                                                                                                                                                  |
    | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | **Name**      | A label to identify this webhook (e.g. "Send leads to CRM" or "Lead Buyer - Webhook").                                                                       |
    | **URL**       | The HTTPS endpoint where lead data should be sent (e.g. `https://api.example.com/webhooks/leads`). This must be a valid HTTPS URL.                           |
    | **Method**    | The HTTP method for the request. Options are **GET**, **POST**, or **PUT**. Most integrations use POST.                                                      |
    | **Body type** | The format of the request body. Choose **JSON** (`application/json`) or **Form (URL encoded)** (`application/x-www-form-urlencoded`). Most APIs expect JSON. |

    <Note>
      The **Body type** setting only applies to POST and PUT requests. GET requests send data as URL query parameters.
    </Note>
  </Step>

  <Step title="Add headers (optional)">
    If your endpoint requires custom HTTP headers (such as an API key or authorization token), click **+ Add header** and enter the **Key** and **Value** for each header. Common examples include:

    | Key             | Value                 |
    | :-------------- | :-------------------- |
    | `Authorization` | `Bearer your-api-key` |
    | `X-API-Key`     | `your-api-key`        |

    You can add multiple headers by clicking **+ Add header** again.
  </Step>

  <Step title="Click Continue">
    Click **Continue** to move to the field mapping step.
  </Step>
</Steps>

***

### Step 2: Map Your Fields

In this step, you choose which data fields to include in the webhook request and how they should be named when sent to your endpoint. LanderLab gives you two ways to build your payload: **Fields** mode for a simple visual mapper, or **JSON** mode for full control over the request body.

At the top of the screen, you will see a toggle between **Fields** and **JSON**. Choose the one that fits your use case.

#### Option A: Fields Mode (Recommended for Most Users)

The Fields mode provides a visual interface where you can select fields, rename their keys, and add custom values without writing any code.

<Steps>
  <Step title="Select and configure fields">
    LanderLab automatically includes a set of default LanderLab fields that are available on every landing page. Each field has a checkbox to include or exclude it, and a **Sent As** column where you can rename the key that gets sent in the request. The default LanderLab fields are:

    | Form Field                 | Sent As (default key)    | Description                                          |
    | :------------------------- | :----------------------- | :--------------------------------------------------- |
    | **LL Lander URL**          | `ll_lander_url`          | The full URL of the landing page the visitor was on. |
    | **LL Visitor IP**          | `ll_visitor_ip`          | The IP address of the visitor.                       |
    | **LL Visitor User Agent**  | `ll_visitor_user_agent`  | The browser and device information of the visitor.   |
    | **LL Submission Time UTC** | `ll_submission_time_utc` | The date and time the lead was submitted (in UTC).   |
    | **LL Variant ID**          | `ll_variant_id`          | The A/B test variant ID the visitor was shown.       |

    Use the checkboxes to enable or disable any field. You can also edit the **Sent As** value to match the field names your endpoint expects.

    <Tip>
      If your landing page includes a **quiz funnel** or **form**, all the form fields you have added (such as name, email, phone, address, and any custom inputs) will automatically appear in this field list alongside the default LanderLab fields. You can enable, disable, or rename them just like the default fields.
    </Tip>
  </Step>

  <Step title="Add custom fields (optional)">
    Under the **Additional fields** section, click **+ Add field** to include extra key-value pairs in the webhook payload. This is useful for sending static values like a campaign ID, lead source tag, or API identifier that your endpoint needs but is not collected from the form.
  </Step>

  <Step title="Click Continue">
    Click **Continue** to move to the review step.
  </Step>
</Steps>

#### Option B: JSON Mode (Advanced)

The JSON mode gives you a raw code editor where you can write the exact JSON body that will be sent with the webhook. This is the advanced option for users who need full control over the payload structure, especially when the receiving API requires nested objects, arrays, or a specific format that the Fields mode cannot produce.

<Steps>
  <Step title="Switch to JSON mode">
    Click the **JSON** toggle at the top of the screen. A code editor will appear with a default JSON payload that includes all available fields.
  </Step>

  <Step title="Edit the JSON payload">
    Write or modify the JSON body directly in the editor. To insert dynamic lead data, use the `{{Field Name}}` template syntax. Type `/` to open a field picker, or type the variable name manually inside double curly braces. These template variables are replaced with real values when the webhook fires. For example, `{{LL Visitor IP}}` will be replaced with the actual IP address of the visitor who submitted the lead.

    **Basic flat payload (same as Fields mode produces):**

    ```json theme={null}
    {
      "ll_lander_url": "{{LL Lander URL}}",
      "ll_visitor_ip": "{{LL Visitor IP}}",
      "ll_visitor_user_agent": "{{LL Visitor User Agent}}",
      "ll_submission_time_utc": "{{LL Submission Time UTC}}",
      "ll_variant_id": "{{LL Variant ID}}"
    }
    ```

    **Nested payload with grouped objects:**

    Some APIs expect data organized inside nested objects. JSON mode lets you build any structure you need. For example:

    ```json theme={null}
    {
      "lead": {
        "first_name": "{{First Name}}",
        "last_name": "{{Last Name}}",
        "email": "{{Email}}",
        "phone": "{{Phone}}"
      },
      "tracking": {
        "source_url": "{{LL Lander URL}}",
        "ip_address": "{{LL Visitor IP}}",
        "user_agent": "{{LL Visitor User Agent}}",
        "submitted_at": "{{LL Submission Time UTC}}"
      },
      "campaign": {
        "variant_id": "{{LL Variant ID}}",
        "source": "landerlab"
      }
    }
    ```

    **Payload with static values and mixed data:**

    You can combine dynamic template variables with hardcoded static values in the same payload:

    ```json theme={null}
    {
      "api_key": "your-api-key-here",
      "lead_source": "landing_page",
      "contact": {
        "name": "{{Full Name}}",
        "email": "{{Email}}",
        "phone": "{{Phone}}",
        "zip": "{{Zip Code}}"
      },
      "meta": {
        "page_url": "{{LL Lander URL}}",
        "ip": "{{LL Visitor IP}}",
        "variant": "{{LL Variant ID}}"
      }
    }
    ```

    <Note>
      The field names inside `{{ }}` must match exactly the field names available in your landing page. Default LanderLab fields use names like `LL Lander URL`, `LL Visitor IP`, etc. Form and quiz fields use the names you gave them when building the form (e.g. `First Name`, `Email`, `Phone`).
    </Note>
  </Step>

  <Step title="Click Continue">
    Click **Continue** to move to the review step.
  </Step>
</Steps>

***

### Step 3: Review and Connect

<Steps>
  <Step title="Review your webhook">
    The final step shows a complete preview of the request that will be sent every time a lead is collected. You will see:

    * The **HTTP method** and **URL** (e.g. `POST https://api.example.com/webhooks/leads`)
    * The **body** with all mapped fields shown as template variables (e.g. `{{LL Lander URL}}`, `{{LL Visitor IP}}`)

    Review the request carefully to make sure the method, URL, and field names match what your endpoint expects.

    <Tip>
      Click the **cURL** button in the top right corner of the preview to copy the request as a cURL command. You can use this to test the webhook manually in your terminal before connecting it.
    </Tip>
  </Step>

  <Step title="Click Connect webhook">
    If everything looks correct, click the **Connect webhook** button to save and activate the integration. If you need to change anything, click **Back** to return to the previous steps.
  </Step>
</Steps>

***

## Common Use Cases

Webhooks are flexible and can be used to send lead data to almost any system. Here are some common examples:

* **CRM systems** - Send leads directly to Salesforce, HubSpot, GoHighLevel, or any CRM that accepts incoming webhooks or has an API endpoint.
* **Lead distribution platforms** - Push leads to buyers or ping trees in real time for lead bidding and distribution.
* **Email marketing tools** - Add new leads to your email lists in platforms like Mailchimp, ActiveCampaign, or Klaviyo.
* **Custom backends** - Send data to your own API or backend system for processing, scoring, or routing.
* **Zapier or Make** - Use a webhook URL from Zapier or Make to trigger automated workflows from your landing page leads.

***

## Tips for Setting Up Webhooks

* **Always use HTTPS** - LanderLab requires an HTTPS URL for webhook endpoints. HTTP URLs are not supported.
* **Match your field names** - Use the **Sent As** column in Step 2 to rename fields so they match what your receiving system expects. For example, if your CRM expects `email_address` instead of `email`, rename it in the field mapper.
* **Test before going live** - Use the **cURL** button in the review step to copy and test the request manually. You can also use tools like [webhook.site](https://webhook.site) to inspect incoming requests and verify the payload format.
* **Add authentication headers** - If your endpoint requires an API key or token, add it in the Headers section during Step 1. Do not include authentication credentials in the URL.