TgTaps Docs
  • TgTaps Documentation
    • Community
  • Blocks
    • Basic
      • Container
      • Block
      • Image
      • Copy button
      • HTML
      • Onboarding
    • Payments
      • Subscriptions list
    • Friends (referral system)
      • Invite friend button
      • Leaderboard
      • Claim friends bonus button
      • Friends list
    • Pages
      • Buy page button
      • Buy page card
      • Access page from date
    • Clicker game
      • Cards
      • Level reachment
      • Level progress
      • Click button
      • Energy progress
      • Farm button
    • Tasks
    • FAQ
    • TON
      • Connect TON wallet button
      • Send TON button
    • System blocks
      • Buy page dialog
    • Quizes
      • Quiz
      • Quiz completion
    • Daily bonus
  • Roulette
  • FEATURES
    • Rates
    • Navigation
    • Placeholders
    • Referrals statistics export
    • Custom value
    • Broadcast sending
    • Bot ownership transfer and token change
    • Head scripts
    • Pages
      • Paid pages
    • Levels
    • Payments
      • How to sell points?
      • How to integrate Robokassa?
  • Mini App Settings
    • Telegram messages
    • Referral system
    • Fonts
    • System icons
    • Analytics
  • Integrations
    • API keys
    • API methods
    • iFrame integrations
    • How to display UI fields from your API?
  • FAQ
    • How to fix "primary page is not configured"?
    • How to create gradient color or background?
    • How pages background works?
    • How to insert YouTube video in app?
    • How to add Play button to Telegram Bot?
  • Changelog
    • Changelog
Powered by GitBook
On this page
  • Table of content
  • How to get Telegram account in iFrame?
  • How to increase points in game's UI from iFrame?
  1. Integrations

iFrame integrations

PreviousAPI methodsNextHow to display UI fields from your API?

Last updated 10 days ago

Table of content

How to get Telegram account in iFrame?

iFrame's do not have access to Telegram's data. Therefore, TgTaps app sends it to you via events.

You can get Telegram account data via window.parent listener.

To do that, you need:

  1. Register listener for TELEGRAM_DATA event.

  2. Send message REQUEST_TELEGRAM_DATA to ask TgTaps send data to your listener.

Here is example code in React:

 useEffect(() => {
    // register listener for account data
    const onTelegramDataReceived = (event: MessageEvent) => {
      if (event.data?.type === "TELEGRAM_DATA") {
        // load account data
        const webAppData = event.data.payload;
      }
    };
    window.addEventListener("message", onTelegramDataReceived);
    
    // request TgTaps to send data to our listener
    window.parent.postMessage({ type: "REQUEST_TELEGRAM_DATA" }, "*");
    
    return () => {
      window.removeEventListener("message", onTelegramDataReceived);
    };
  }, []);

You will get this data into your variable:

{
    "initData": "query_id=AAF...&user=%7B%22id%22%3A165299325%2C%22first_name%22%3A%22Rostislav%22%2C%22last_name%22%3A%22Dugin%22%2C%22username%22%3A%22rostislav_dugin%22%2C%22language_code%22%3A%22ru%22%2C%22is_premium%22%3Atrue%2C%22allows_write_to_pm%22%3Atrue%2C%22photo_url%22%3A%22https%3A%5C%2F%5C%2Ft.me%5C%2Fi%5C%2Fuserpic%5C%2F320%5C%2FUf18xS8yF1KRZ1K3i0KQzD9ZdaHeIzHA5vuK87kFEjo.svg%22%7D&auth_date=1746025746&signature=-5KaD...&hash=bd5...",
    "initDataUnsafe": {
        "query_id": "AAF9RNoJAAAAAH1E2gkYE0_h",
        "user": {
            "id": 165299325,
            "first_name": "Rostislav",
            "last_name": "Dugin",
            "username": "rostislav_dugin",
            "language_code": "ru",
            "is_premium": true,
            "allows_write_to_pm": true,
            "photo_url": "https://t.me/i/userpic/320/Uf18xS8yF1KRZ1K3i0KQzD9ZdaHeIzHA5vuK87kFEjo.svg"
        },
        "auth_date": "1746025746",
        "signature": "-5Ka...",
        "hash": "..."
    }
}

How to increase points in game's UI from iFrame?

To increase user points in app's UI, you need to send message to window.parent:

window.parent.postMessage(
  {
    type: 'INCREASE_POINTS',
    payload: 100,
  },
  '*',
);

This will change balance in the game. To decrease points - send negative value (like -100).

Keep in mind: this will not change real user's balance in our API. This code is used only to sync your calls to the API and TgTaps UI (which doesn't receive real-time updates).

As you know, you can change user balance . However, when you change balance via API, the application UI does not know about updates. So you have to sync UI balance manually with changes you make to API.

via API
How to get Telegram account in iFrame?
How to increase points is game's UI from iFrame?