iFrame integrations

Table of content

• How to get Telegram account in iFrame?

• How to increase points is game's UI from iFrame?

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?

As you know, you can change user balance via API. 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.

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).