HTML integration

This guide provides a short, structured instruction set for integrating your claimer widget into a static HTML website.

1. Open your HTML file

Start by opening the HTML file for your website. You should have a basic site structure already in place, including <html>, <head>, and <body> sections, along with any existing content elements.

2. Add a container for the widget

Create an HTML element where your claimr widget will be embedded. This element will serve as the widget's container.

  • You can use any suitable HTML element, typically a <div>.

  • Assign a unique id to this container.

Example:

<div id="CLAIMR_CONTAINER_ID"></div>

3. Insert the claimr script

Next, you will add the claimr embed script into your HTML file.

  1. Go to your claimr account to copy the embed script for your campaign.

  2. Paste this <script> tag into your HTML file.

Placement options:

  • In the <head> section.

  • At the end of the <body> section, before the closing </body> tag. This is a common practice for library scripts as it allows the page content to load before the script executes.

Ensure the script includes all the necessary data- attributes:

  • src: The URL of the claimer widget script.

  • id: The ID of the script itself (e.g., "claimer-script").

  • data-add-ons: Any additional features or add-ons.

  • data-organization: Your organization's name.

  • data-campaign: Your specific campaign's name.

  • data-autoresize: Typically true for automatic resizing.

  • data-container: This ID should match the ID you gave to your container element in Step 2.

Example of the HTML structure with the script and container:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML page</title>
</head>
<body>
    <header>
        <a class="logo" href="/">WEBSITE LOGO</a>
    </header>

    <div id="CLAIMR_CONTAINER_ID"></div>

    <script
        src="https://dev.widgets.claimr.io/dev.claimr.min.js"
        id="claimer-script"
        data-addons="eap,pvm"
        data-organization="nikita-claimer-io"
        data-campaign="name-123"
        data-autoresize="true"
        data-container="CLAIMR_CONTAINER_ID">
    </script>
</body>
</html>

Finalize integration

After making these changes:

  • Save your HTML file.

  • Refresh your web page.

The claimr widget will now be successfully connected and displayed on your site.

PreviousFramer integrationNextRewards

Last updated

Was this helpful?