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

# Integrate the Claimr widget into your website

> Step-by-step instructions on how to embed the Claimr widget into your website, allowing you to seamlessly integrate interactive campaigns and quests into your web pages.

## Embed the Claimr script

<Steps>
  <Step title="Access your website's HTML">
    Begin by accessing the HTML source code of the webpage where you want to integrate the Claimr widget.
  </Step>

  <Step title="Locate the head section">
    The `<head>` section is typically found at the beginning of your HTML document. This is where you will insert the Claimr script.
  </Step>

  <Step title="Insert the Claimr script">
    Copy the provided script from **Get embed code** and paste it into the `<head>` section of your HTML.
  </Step>

  <Step title="Specify the container ID">
    Replace `CLAIMR_CONTAINER_ID` in the script with the actual ID of the HTML element where you want the Claimr widget to be displayed.

    Example: if you have a `<div>` with the ID `myClaimrWidget`, the `data-container` attribute should be `data-container='myClaimrWidget'`.
  </Step>

  <Step title="Configure add-ons (optional)">
    The `data-addons` attribute allows for further customization of the widget. If you have specific add-ons or configurations, modify this attribute accordingly. For basic functionality, the default value (`sup`) is sufficient.
  </Step>

  <Step title="Save and test">
    Save your HTML file and load the webpage in a web browser to ensure the Claimr widget is correctly integrated and functioning as expected.
  </Step>
</Steps>

## Troubleshooting

If the widget does not appear or function correctly:

* **Verify container ID:** Ensure that the ID specified in the `data-container` attribute precisely matches the ID of the designated HTML element.
* **Check for typos:** Carefully review the script URL and data attributes for any typographical errors.
* **Consult browser console:** Utilize your browser's developer tools to examine the console for any error messages that may indicate issues with the script or integration.

If you have any questions or need assistance, feel free to reach out to our support team.
