Framer integration

Integrating your Claimr widget into Framer allows you to seamlessly display your interactive content within your Framer designs. This guide will walk you through the process, which involves setting up a frame and configuring a Code Override to embed the widget.

Create a frame in Framer

In Framer, everything begins with a frame. This frame will serve as the container for your Claimr widget.

Create a new Frame in your Framer project.
You can style this frame as needed, or leave it with default styling.

Access Code overrides

To embed the Claimr widget, you will use Framer’s Code Overrides feature, which allows you to extend component functionality with custom code.

Select your newly created Frame.
In the right-hand properties panel, scroll down and open the Code Overrides tab at the bottom.
Click the + button to add a new file. If no override file exists, you will be prompted to create one.

Create the Override File

This file will contain the custom code necessary to initialize and load your Claimr widget.

Name your file (for example, claimrIntegration.tsx) and click Create. In the newly opened code editor, paste the override code for your integration. This code sets up the mechanism to load the Claimr widget.

Edit the Override Code

You will need to modify the override file to include specific data- attributes that define your Claimr widget’s behavior and link it to your campaign.

Replace the contents of the override file with the code below, then fill in the values from your Claimr embed code:

data-organization: Your organization ID.
data-campaign: Your campaign ID.
data-container: The ID of the element the widget renders into. The override gives your frame this ID, so you can keep the default value.

The script tag’s ID must stay exactly claimr-script: the script reads its settings from the element with that ID. Example of an override function

import type { ComponentType } from "react"
import { useEffect } from "react"

const CLAIMR_CONTAINER_ID = "claimr-widget"

function loadClaimr() {
    // Load the script once, even if the page renders the frame more than once.
    if (document.getElementById("claimr-script")) return

    const script = document.createElement("script")
    script.id = "claimr-script"
    script.src = "https://widgets.claimr.io/claimr.min.js"
    script.setAttribute("data-organization", "YOUR_ORGANIZATION_ID")
    script.setAttribute("data-campaign", "YOUR_CAMPAIGN_ID")
    script.setAttribute("data-container", CLAIMR_CONTAINER_ID)
    script.setAttribute("data-autoresize", "true")
    document.body.appendChild(script)
}

export function withClaimr(Component): ComponentType {
    return (props) => {
        useEffect(loadClaimr, [])
        // The widget renders inside the element whose ID matches data-container.
        return <Component {...props} id={CLAIMR_CONTAINER_ID} />
    }
}

Link override to your frame

After editing the override code, you need to apply it to your specific Framer frame.

Linking a Code Override to a Framer frame

In the Layers tab, select the Frame you created before.
In the Code Overrides section of the right-hand properties panel, select your newly created file.
From the function dropdown, choose withClaimr.

Finalize and publish your project

Once the override is linked, save your changes and publish the project to see the integrated widget.

Framer typically autosaves your changes. Ensure all modifications are saved.
Click Publish to deploy your project.
Verify on the published page that the Claimr widget is successfully integrated and functioning correctly within your Framer design.

Get Started

Core Concepts

Campaign Building Blocks

Distribution

Forms

Descriptions, Tags & Personalization

Extra

Insights

Account & Billing

Framer integration

Create a frame in Framer

Access Code overrides

Create the Override File

Edit the Override Code

Link override to your frame

Finalize and publish your project

​Create a frame in Framer

​Access Code overrides

​Create the Override File

​Edit the Override Code

​Link override to your frame

​Finalize and publish your project

Create a frame in Framer

Access Code overrides

Create the Override File

Edit the Override Code

Link override to your frame

Finalize and publish your project