> For the complete documentation index, see [llms.txt](https://tgtaps.gitbook.io/tgtaps-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tgtaps.gitbook.io/tgtaps-docs/integrations/iframe-integrations.md).

# iFrame integrations

## Table of content

* [How to get Telegram account in iFrame?](#how-to-get-telegram-account-in-iframe)
* [How to increase points is game's UI from iFrame?](#how-to-increase-points-in-games-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:

```typescript
 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:

```json
{
    "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](https://docs.tgtaps.com/tgtaps-docs/integrations/api-methods#increase-points). 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`:

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://tgtaps.gitbook.io/tgtaps-docs/integrations/iframe-integrations.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.