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.

Navigate to and click the Publish button in your campaign (upper right corner).
In the opened window, click Get integration code. This will open the window with an embed code.
Copy and paste the provided widget script into your website or application’s code.
To customize the widget’s behavior, manually add the desired data- attributes (detailed below) directly inside your <script> tag.

Example:

<script
  src="https://example.claimr.io/widget.js"
  data-addons="twitter"
  data-organization="my-company-id"
></script>

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

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:

<script
  id="claimr-script"
  data-organization="YOUR_ORG_ID"
  data-campaign="YOUR_CAMPAIGN_ID"
  data-container="CLAIMR_CONTAINER_ID"
  data-hide-tags="new"
  src="https://widgets.claimr.io/claimr.min.js">
</script>

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.

Get Started

Core Concepts

Campaign Building Blocks

Distribution

Forms

Descriptions, Tags & Personalization

Extra

Insights

Account & Billing

Widget attributes

What are Claimr widget attributes?

How to add attributes

List of data attributes

Default attributes

Feature control

Advanced integration

Contextual display settings

Points badge

Tag-based customization

​What are Claimr widget attributes?

​How to add attributes

​List of data attributes

​Default attributes

​Feature control

​Advanced integration

​Contextual display settings

​Points badge

​Tag-based customization

What are Claimr widget attributes?

How to add attributes

List of data attributes

Default attributes

Feature control

Advanced integration

Contextual display settings

Points badge

Tag-based customization