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.
Navigate and click 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 in this documentation below) directly inside your<script>tag.
Example:
In this example:
data-addons: Used to enable or hide specific content blocks or featuresdata-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-addons
Comma-separated strings
twitter,telegram,discord_tasks
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
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
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 taggednew, addingdata-hide-tags="new"to your script will hide that specific group: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.
Last updated
Was this helpful?