> For the complete documentation index, see [llms.txt](https://docs.claimr.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.claimr.io/widget/claimr-widget-integrations/webflow-integration.md).

# Webflow integration

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.

1. Navigate to your campaign in claimr.
2. Click **Publish** in the upper right corner.
3. Click **Get embed code**.
4. Copy the provided `<script>` tag. This code contains all the necessary attributes for your widget.

<figure><img src="/files/SBJ7XRVY3ITmtxEBFPNu" alt="" width="563"><figcaption><p>Example of an embed code</p></figcaption></figure>

### Create elements in Webflow

Create two elements within your Webflow project that will host the claimr widget:&#x20;

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

<figure><img src="/files/jhgy46QVsn91t8Ok8Uvi" alt="" width="152"><figcaption></figcaption></figure>

### 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`).

<figure><img src="/files/1mfmizB06PrtlMC5zORf" alt="" width="208"><figcaption></figcaption></figure>

### 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 in Step 1:

   * `src`: The URL of the claimr widget script&#x20;
   * `id`: The ID of the script itself&#x20;
   * `data-add-ons`: Any additional features or add-ons specified&#x20;
   * `data-organization`: Your organization's name&#x20;
   * `data-campaign`: Your specific campaign's name&#x20;
   * `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.&#x20;

   <figure><img src="/files/fIPDZ6C593nIQQ63pDT1" alt="" width="208"><figcaption><p>Example of the attributes copied to Webflow</p></figcaption></figure>

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

   <mark style="color:yellow;">Need an example</mark>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.claimr.io/widget/claimr-widget-integrations/webflow-integration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.