Skip to main content
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

Open your campaign

Navigate to your campaign in Claimr.
2

Click Publish

Click Publish in the upper right corner.
3

Get embed code

Click Get embed code.
4

Copy the script tag

Copy the provided <script> tag. This code contains all the necessary attributes for your widget.
Example of a Claimr embed code

Example of an embed code

​
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.
Div Block and Custom Element added in Webflow

​
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).
Div Block ID setting in Webflow

​
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.
Example of script attributes copied to Webflow

Example of the attributes copied to Webflow

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