> ## Documentation Index
> Fetch the complete documentation index at: https://docs.claimr.io/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML integration

> A short, structured instruction set for integrating the Claimr widget into a static HTML website.

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

<Steps>
  <Step title="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.
  </Step>

  <Step title="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:**

    ```html theme={"dark"}
    <div id="CLAIMR_CONTAINER_ID"></div>
    ```
  </Step>

  <Step title="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 Claimr 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 the previous step.

    **Example of the HTML structure with the script and container:**

    ```html theme={"dark"}
    <!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>
    ```
  </Step>
</Steps>

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