> 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/widget-attributes.md). # Widget attributes ## What are **claimr widget attributes?** When you embed the claimr widget into your website or application, you use **widget attributes** within the integration script to customize its behavior and appearance. These attributes control what users see, allowing you to show or hide specific parts of the widget based on your business needs, user type, or even location-specific requirements (like country-based restrictions). Essentially, widget attributes allow you to tailor the user experience, deciding what content appears and for whom. ## **How to add attributes** Add attributes directly into the claimr script you’ve copied from the **Publish** section. 1. Navigate and click **Publish** button in your campaign (upper right corner). 2. In the opened window, click **Get integration code**. This will open the window with an embed code. 3. Copy and paste the provided widget script into your website or application's code. 4. To customize the widget's behavior, manually add the desired `data-` attributes (detailed in this documentation below) directly inside your ` ``` In this example: * **`data-addons`**: Used to enable or hide specific content blocks or features * **`data-organization`**: Sets the organization ID to ensure the widget pulls data from the correct campaign. ## List of data-attributes This section lists all supported data-\* attributes for the claimr widget. Add them to the script tag (or to the \ tag where specified) to control the widget’s behavior, appearance, or user experience. {% hint style="warning" %} Attributes marked with an asterisk \* are required or applied by default. {% endhint %} ### 🧩 Default attributes
AttributeDescriptionAccepted ValuesExample
data-organization*Unique ID of your organization. Ensures correct widget settings.Stringmy-awesome-org
data-campaign*ID of the specific campaign to display.Stringgiveaway-2025
data-container*ID of the HTML element where the widget will render.Element ID
(string)		claimr-widget-container
data-autoresize*Automatically adjusts the widget height.true or falsetrue
### 🛠️ Feature control | Attribute | Description | Accepted values | Example value | | -------------- | ----------------------------------------------------- | --------------------------- | -------------- | | `data-theme` | Applies a predefined visual theme. | Theme name (string) | `dark-mode` | | `data-debug` | Outputs debug information in browser console. | ? | | | `data-binance` | Enables features for Binance/BSC-related campaigns. | true or false | `true` | | `data-ga4` | Google Analytics 4 Measurement ID for event tracking. | GA4 Measurement ID (string) | `G-XXXXXXXXXX` | | `data-gtm` | Google Tag Manager Container ID for GTM integration. | GTM Container ID (string) | `GTM-XXXXXXX` | ### 🔧 Advanced integration
AttributeDescriptionAccepted valuesExample value
data-headlessEnables headless mode (functionality without UI).true or falsetrue
data-platformDeclares the main platform environment (e.g., web).Stringtelegram
data-sub-platformMore specific platform context (e.g., Telegram, TrustWallet.).Stringtrustwallet
data-deviceIndicates user’s device type (affects layout).String (mobile, desktop, etc.)mobile
data-user-tokenAuthenticated user token for secure sessions.Stringabc123xyz789
data-envDeclares the current environment dev, proddev
### 🎯 Contextual display settings | Attribute | Description | Accepted values | Example value | | ----------------- | ------------------------------------------- | ------------------------- | ------------------------------------------------------------- | | `data-show-tags` | Shows only elements matching provided tags. | true or false | `true` | | `data-hide-tags` | Hides elements matching provided tags. | true or false | `true` | | `data-route` | Sets the initial route within the widget. | Internal route path | `/quests/winter-challenge` | | `data-quest` | Loads a specific quest on widget load. | Quest ID (string) | `quest_id_abc123` | | `data-ref` | Referral code or user identifier. | String | `ref_friend_xyz` | | `data-groups` | Filters visible groups by IDs. | Comma-separated Group IDs |

group\_alpha,
group\_beta

| | `data-contest-id` | Links widget to a specific contest by ID. | Contest ID (string) | `spring_contest1` | ## **Tag-based customization** Personalize the user experience by dynamically showing or hiding Quests and Groups using tags. First, assign tags to your Quests/Groups in the claimr admin panel. Then, use these `data-` attributes in your widget script to control their visibility: * **`data-hide-tags`:** This attribute hides Quests or Groups tagged with any of the comma-separated tags provided. \ Example: If a Quest Group in your admin panel is tagged `new`, adding `data-hide-tags="new"` to your script will hide that specific group: ```html ``` * **`data-show-tags`:** Conversely, this attribute is used to show Quests or Groups tagged with any of the listed comma-separated tags. This is useful if certain content is hidden by default or by other conditions and you want to make it visible for specific users (e.g., `data-show-tags="beta_testers"`). Using these attributes activates claimr's tag system. The widget receives the "show" or "hide" tags from your script, compares them against the tags on your content elements, and adjusts visibility accordingly. This enables targeted experiences like geo-restrictions or A/B testing. --- # 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/widget-attributes.md?ask=&goal= ``` `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.