> ## 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. # Widget attributes > Reference every data-* attribute supported by the Claimr widget script, and learn how to use tags to personalize which quests and groups are shown. ## 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 to and click the **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 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. Attributes marked with an asterisk `*` are required or applied by default. ### Default attributes | Attribute | Description | Accepted Values | Example | | -------------------- | ---------------------------------------------------------------- | ------------------- | ------------------------- | | `data-organization*` | Unique ID of your organization. Ensures correct widget settings. | String | `my-awesome-org` | | `data-campaign*` | ID of the specific campaign to display. | String | `giveaway-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 false | `true` | ### Feature control | Attribute | Description | Accepted values | Example value | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------------- | | `data-theme` | Applies a predefined visual theme. | Theme name (string) | `dark-mode` | | `data-theme-key` | `localStorage` key to read the theme from, kept in sync automatically if the value changes. Takes priority over `data-theme` when set. | String | `app-theme` | | `data-language` | Sets the widget's display language. | Language code (string) | `en` | | `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 | Attribute | Description | Accepted values | Example value | | ------------------- | ------------------------------------------------------------- | ------------------------------ | -------------- | | `data-headless` | Enables headless mode (functionality without UI). | true or false | `true` | | `data-platform` | Declares the main platform environment (e.g., web). | String | `telegram` | | `data-sub-platform` | More specific platform context (e.g., Telegram, TrustWallet). | String | `trustwallet` | | `data-device` | Indicates user's device type (affects layout). | String (mobile, desktop, etc.) | `mobile` | | `data-user-token` | Authenticated user token for secure sessions. | String | `abc123xyz789` | | `data-env` | Declares the current environment. | dev, prod | `dev` | ### 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` | | `data-user-ref-id` | Attributes the visit to a specific referring user, in addition to `data-ref`. | String | `user_123` | | `data-user-ref-tag` | Optional tag to further classify the referral set with `data-user-ref-id`. | String | `campaign_launch` | ### Points badge The SDK includes a built-in points/XP badge and toast notification UI, independent of the widget. These attributes configure it; the same settings can also be changed at runtime with the `configure_points()` SDK method — see the [SDK documentation](/sdk-guide#points). | Attribute | Description | Accepted values | Example value | | ---------------------- | ------------------------------------------------------------------------ | ------------------------------------------------------ | --------------------------- | | `data-points` | Shows or hides the built-in points badge. | true or false | `true` | | `data-points-position` | Badge position on screen. | `top-left`, `top-right`, `bottom-left`, `bottom-right` | `bottom-right` | | `data-points-icon` | Icon shown on the badge and toasts. | String (for example, an emoji) | `⭐` | | `data-points-template` | Toast message template. Supports `{amount}` and `{reason}` placeholders. | String | `+{amount} XP for {reason}` | | `data-points-duration` | How long an award toast stays visible, in milliseconds. | Number | `4000` | | `data-points-bg` | Background color of the badge and toasts. | CSS color | `#111827` | | `data-points-color` | Text color of the badge and toasts. | CSS color | `#ffffff` | | `data-points-accent` | Accent color for the icon. | CSS color | `#facc15` | ## 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. For 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 theme={"dark"} ``` * **`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.