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
  id="claimr-script"
  src="https://widgets.claimr.io/claimr.min.js"
  data-organization="my-company-id"
  data-campaign="giveaway-2025"
  data-container="claimr-widget"
  data-autoresize="true"
  data-language="fr"
></script>

In this example:

data-organization and data-campaign: Select which organization and campaign the widget loads.
data-container: The ID of the element the widget renders into.
data-language: Opens the widget in French.

Keep id="claimr-script" exactly as it is. The script reads its attributes from the element with that ID, so a script tag with any other ID does not load the widget.

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 container height to fit the widget. Any value turns it on, including `false`. To turn it off, remove the attribute.	`true`	`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. You can also add `?dcl=1` to the page URL.	`true`	`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 quests and groups that have any of these tags. See Tag-based customization.	Comma-separated tags	`beta_testers`
`data-hide-tags`	Hides quests and groups that have any of these tags. See Tag-based customization.	Comma-separated tags	`new,vip`
`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`

Pre-quest badge

The SDK includes a built-in badge, award toasts, and claim button for pre-quests: rewards visitors bank on your site before they sign in. These attributes configure it. You can change the same settings at runtime with the configure_pre_quest() SDK method.

Attribute	Description	Accepted values	Example value
`data-pre-quest`	Turns the badge and toasts on or off. On by default.	`true` or `false`	`false`
`data-pre-quest-position`	Corner of the page the badge sits in. Defaults to `bottom-right`.	`top-left`, `top-right`, `bottom-left`, `bottom-right`	`bottom-left`
`data-pre-quest-icon`	Image shown on the badge and toasts.	URL (absolute, relative, or `data:`)	`/images/coin.svg`
`data-pre-quest-template`	Toast text. Supports the `{amount}`, `{type}`, and `{reason}` placeholders.	String	`+{amount} {type} for {reason}`
`data-pre-quest-duration`	How long an award toast stays visible, in milliseconds. Defaults to `4000`.	Number	`6000`
`data-pre-quest-claim-url`	Page where visitors sign in and collect their rewards. Adds a claim button to the badge. The page must render the widget.	URL	`/quests`
`data-pre-quest-claim-label`	Claim button text. Defaults to `Claim rewards`.	String	`Collect your XP`
`data-pre-quest-claim-target`	Link target for the claim button. Defaults to `_blank`.	`_blank`, `_self`	`_self`
`data-pre-quest-claim-threshold`	Minimum banked XP before the claim button appears. Defaults to `0`.	Number	`100`
`data-pre-quest-bg`	Background color of the badge and toasts.	CSS color	`#111827`
`data-pre-quest-color`	Text color of the badge and toasts.	CSS color	`#ffffff`
`data-pre-quest-accent`	Accent color of the badge and toasts.	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

Pre-quest 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

​Pre-quest 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

Pre-quest badge

Tag-based customization