⚡
claimr
  • Getting started
    • Create an account
    • Sign in to your account
    • Reset password
    • Edit profile
  • ⚡️claimr core components
  • Team roles and management
  • Campaigns
    • Create new campaign
    • Campaign settings
  • Groups
    • Create new group
    • Group settings
  • Quests
    • Create new quest
    • Quest settings
  • Tasks
    • Create new task
    • Task settings
    • Telegram tasks
    • X (Twitter) tasks
    • TikTok tasks
    • Discord tasks
    • YouTube tasks
    • Web3 tasks
      • Connect a wallet
      • Transactions count
      • Wallet balance
      • Token balance
      • NFT balance
      • Link3 balance
      • Mint an NFT (721)
      • Mint an NFT (1155)
      • Verify transactions
    • PoW tasks
    • HTTP request tasks
    • Referral tasks
    • Form tasks
    • Poll tasks
    • Events tasks
    • API tasks
  • Widget
    • Publish campaign
    • Widget configurations
    • Widget attributes
    • Integrate claimr widget into your website
    • claimr widget integrations
      • Google Analytics integration
      • Google Analytics Client ID
      • Google Tag Manager integration
      • HotJar integration
  • Rewards
    • Reward settings
    • Custom rewards
  • Events
    • Daily check-ins
    • Challenges
    • Ranks
    • KOLs
  • Codes
    • Secret codes
    • Invite codes
      • Enter invite code task
      • Claim invite code task
    • Gift codes
  • Test users
  • Pop-ups
    • Into pop-up
    • Completion pop-up
  • API
    • API token
    • API methods
    • User token
  • Webhooks
    • Set up webhooks
    • Assign webhooks
    • Webhook scopes
  • SDK
  • Forms
    • Create forms
    • Form settings
    • Pages
    • Blocks
    • Quizzes
  • Data analytics
    • Activity
    • PoW analytics
    • User information
    • Failed actions
    • Issues analytics
  • How to
    • Create X campaign
    • Create Discord campaign
    • Integrate claimr widget into dApp
    • Integrating claimr widget into Telegram mini app
    • Customize user experience with tags and attributes
    • Add custom points to users
  • UX requirements
    • Campaign UX requirements
    • Group UX requirements
    • Quest card UX requirements
    • Quest UX requirements
    • Task UX requirements
    • User progress UX requirements
    • Pop-ups UX requirements
    • Interactive components UX requirements
Powered by GitBook
On this page
  • Embed the ⚡️claimr script
  • Troubleshooting

Was this helpful?

  1. Widget

Integrate claimr widget into your website

This guide provides step-by-step instructions on how to embed the claimr widget into your website, allowing you to seamlessly integrate interactive campaigns and quests into your web pages.

Embed the ⚡️claimr script

  1. Access your website's HTML Begin by accessing the HTML source code of the webpage where you want to integrate the claimr widget.

  2. Locate the <head> section The <head> section is typically found at the beginning of your HTML document. This is where you will insert the claimr script.

  3. Insert the claimr script: Copy the provided script from Get embed code and paste it into the <head> section of your HTML.

  4. Specify the container ID: Replace CLAIMR_CONTAINER_ID in the script with the actual ID of the HTML element where you want the claimr widget to be displayed. Example: if you have a <div> with the ID myClaimrWidget, the data-container attribute should be data-container='myClaimrWidget'

  5. Configure add-ons (optional): The data-addons attribute allows for further customization of the widget. If you have specific add-ons or configurations, modify this attribute accordingly. For basic functionality, the default value (sup) is sufficient.

  6. Save and test: Save your HTML file and load the webpage in a web browser to ensure the claimr widget is correctly integrated and functioning as expected.

Troubleshooting

If the widget does not appear or function correctly:

  • Verify container ID: Ensure that the ID specified in the data-container attribute precisely matches the ID of the designated HTML element.

  • Check for typos: Carefully review the script URL and data attributes for any typographical errors.

  • Consult browser console: Utilize your browser's developer tools to examine the console for any error messages that may indicate issues with the script or integration.

If you have any questions or need assistance, feel free to reach out to our support team.

PreviousWidget attributesNextclaimr widget integrations

Last updated 7 months ago

Was this helpful?