Skip to main content
You can integrate the Claimr widget into a Telegram Mini App. This setup allows you to leverage Claimr’s engagement features seamlessly within the Telegram environment, automatically utilizing the user’s Telegram context. This article demonstrates how to:
  • Dynamically inject the Claimr widget tailored for Telegram.
  • Understand the interaction between the Claimr widget and the Telegram Mini App API.
  • Configure the required Claimr campaign settings for Telegram integration.
Main files:
  • src/claimr_wrapper.tsx: Handles Claimr widget injection and configuration.
  • src/example_app.tsx: Main UI component demonstrating Telegram API initialization.
Ensure you have the following installed:

​
Running the project

1

Navigate to the project folder

2

Install dependencies

Using npm:
Using Yarn:
3

Start the development server

Using npm:
Using Yarn:
4

View in browser

The app will be available at http://localhost:3000.
For full Telegram Mini App functionality testing, you’ll need to run this within the Telegram environment.

​
Optional: build for production

To create a production-ready build:
Or:
This will create a build/ folder.

​
Claimr widget integration (claimr_wrapper.tsx)

The ClaimrWrapper component is responsible for dynamically injecting the Claimr widget script into your application page. Script source The widget script is loaded from https://widgets.claimr.io/claimr.min.js. Script attributes It’s injected with the following custom attributes:
Purpose of attributes: this lets the widget know where to render (container ID), which organization and campaign to load, which features (addons) to enable, and that it’s running in a Telegram context. The wrapper ensures this script is injected only once per session.

​
Telegram Mini App behavior (example_app.tsx)

This component demonstrates initializing the Telegram Mini App API to ensure the webview behaves correctly within Telegram:
These standard Telegram Mini App API functions:
  • expand(): Maximizes the Mini App window.
  • enableClosingConfirmation(): Prompts the user before they close the Mini App.
  • disableVerticalSwipes(): Prevents vertical swipes from accidentally closing or navigating away from the Mini App.

​
How it works (user view)

  1. A Telegram user opens your Mini App containing the Claimr integration.
  2. The ClaimrWrapper injects the widget script with the data-platform='telegram' attribute.
  3. The Claimr widget initializes and reads the window.Telegram.WebApp context to automatically identify the Telegram user (using their Telegram ID and other available data).
  4. The widget displays relevant tasks or quests based on the campaign configuration and the identified user.
  5. If necessary for specific tasks, the widget might prompt the user to link other accounts (like Discord, email, or a wallet) through separate flows within the widget.
  6. Task completions and results are synced back to Claimr’s backend, associated with the user’s Telegram identity.

​
Campaign configuration: required settings

To ensure the Claimr widget functions correctly within your Telegram Mini App and automatically recognizes users, specific campaign settings are required.
Sign-in options page
  1. Navigate to Sign-in options: Open your Claimr dashboard, go to your specific campaign, click Settings, then select Sign-in options.
  2. Set the following parameter: Select sign-in services — Ensure that Telegram is selected in this field. This explicitly allows users to authenticate and interact with your campaign using their Telegram identity provided by the Mini App environment.