> For the complete documentation index, see [llms.txt](https://docs.claimr.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.claimr.io/widget/claimr-widget-integrations/html-integration.md).

# 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:**

```html
<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`: T**his ID should match the ID you gave to your container element in Step 2.**

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

```html
<!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.&#x20;


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.claimr.io/widget/claimr-widget-integrations/html-integration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
