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

# Webflow integration

> Set up the HTML elements and script attributes needed to embed the Claimr widget into your Webflow site.

This guide will walk you through the process of embedding your Claimr widget into your Webflow site. You'll set up the necessary HTML elements and configure the widget script to display correctly.

## Get Claimr's embed code

First, retrieve the embed code for your specific Claimr campaign.

<Steps>
  <Step title="Open your campaign">
    Navigate to your campaign in Claimr.
  </Step>

  <Step title="Click Publish">
    Click **Publish** in the upper right corner.
  </Step>

  <Step title="Get embed code">
    Click **Get embed code**.
  </Step>

  <Step title="Copy the script tag">
    Copy the provided `<script>` tag. This code contains all the necessary attributes for your widget.

    <Frame caption="Example of an embed code">
      <img src="https://mintcdn.com/claimr/SqDb6Tuo_fYS0Je_/images/widget/claimr-widget-integrations/webflow-embed-code-example.png?fit=max&auto=format&n=SqDb6Tuo_fYS0Je_&q=85&s=6c508929e0ff8bd388717e4ed0b0488b" alt="Example of a Claimr embed code" width="1204" height="360" data-path="images/widget/claimr-widget-integrations/webflow-embed-code-example.png" />
    </Frame>
  </Step>
</Steps>

## Create elements in Webflow

Create two elements within your Webflow project that will host the Claimr widget:

1. Add a **Div Block** to your page.
2. Add a **Custom Element** to your page, at the same level as the Div Block.

<Frame>
  <img src="https://mintcdn.com/claimr/SqDb6Tuo_fYS0Je_/images/widget/claimr-widget-integrations/webflow-div-and-custom-element.png?fit=max&auto=format&n=SqDb6Tuo_fYS0Je_&q=85&s=08845f720262ed0d01bb279c294fc372" alt="Div Block and Custom Element added in Webflow" width="304" height="216" data-path="images/widget/claimr-widget-integrations/webflow-div-and-custom-element.png" />
</Frame>

## Configure the Div block

The Div Block will serve as the container where your Claimr widget will be displayed.

1. Select the **Div Block**.
2. Go to the **Settings panel**.
3. In the **ID** field, enter a unique identifier for this div block. This ID will be used to link the script to its container. The ID name is arbitrary (e.g., `WIDGET_ID`).

<Frame>
  <img src="https://mintcdn.com/claimr/SqDb6Tuo_fYS0Je_/images/widget/claimr-widget-integrations/webflow-div-block-id-setting.png?fit=max&auto=format&n=SqDb6Tuo_fYS0Je_&q=85&s=2885f744db9a69ebbb082b6dfbf740ae" alt="Div Block ID setting in Webflow" width="416" height="268" data-path="images/widget/claimr-widget-integrations/webflow-div-block-id-setting.png" />
</Frame>

## Configure the Custom element (Script)

The Custom Element will host the Claimr widget's script.

1. Select the **Custom Element**.
2. Go to the **Settings panel**.
3. In the **Tag** field, change the element type to `<script>`.

## Add script attributes

Add the attributes from your Claimr embed code to this `<script>` element in Webflow. These attributes define how your widget behaves.

1. With the `<script>` element selected, go to its **Settings panel**.
2. Under **Attributes**, click the **+** icon to add new attributes.
3. Add the following attributes, copying their values directly from the Claimr embed code you obtained earlier:
   * `src`: The URL of the Claimr widget script
   * `id`: The ID of the script itself
   * `data-add-ons`: Any additional features or add-ons specified
   * `data-organization`: Your organization's name
   * `data-campaign`: Your specific campaign's name
   * `data-autoresize`: Typically `true` to allow the widget to adjust its size automatically.
   * `data-container`: Crucially, this must be the exact ID you gave to your Div Block.

<Frame caption="Example of the attributes copied to Webflow">
  <img src="https://mintcdn.com/claimr/SqDb6Tuo_fYS0Je_/images/widget/claimr-widget-integrations/webflow-script-attributes-example.png?fit=max&auto=format&n=SqDb6Tuo_fYS0Je_&q=85&s=c8d4084e9cb4baf52818f532366eb25a" alt="Example of script attributes copied to Webflow" width="416" height="812" data-path="images/widget/claimr-widget-integrations/webflow-script-attributes-example.png" />
</Frame>

## Publish and verify integration

Once all elements are configured, publish your changes and test the integration.

1. In Webflow, click **Publish** to deploy your changes.
2. Go to your published site's **Preview** mode.
3. Ensure the following:
   * The Claimr widget is successfully connected.
   * The widget is displayed correctly on the page.
   * The widget is functioning as expected.