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.

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.

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

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

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

   Need an example