# Web (JS/TS)
## Basic integration (recommended)
Add Taddy script to `...` section after [telegram sdk script](https://core.telegram.org/bots/webapps#initializing-mini-apps)
```html
```
Replace `XXX` with your Public ID
After the script is loaded, the `init()` method will be called automatically and the `ready` event will be emitted. Taddy object can be accessed via `window.Taddy`
## Advanced integration
1. Add Taddy script to `...` section after [telegram sdk script](https://core.telegram.org/bots/webapps#initializing-mini-apps)
```html
```
2. Install TypeScript declarations (optional). This package includes only types declarations without implementation. Adding the Taddy script to the head section is required (see Step 1).
```bash
npm i taddy-sdk-web@1.3.17
```
3. Initialize Taddy
```typescript
const taddy = window.Taddy;
taddy.init('xxxxxxxxxxx-pub-id-xxxxxxxxxxx');
```
4. Send "ready" event when app is loaded
```typescript
taddy.ready()
```
## Exchange
1. Get exchange service
```typescript
const exchange = taddy.exchange();
```
2. Fetch exchange feed
```typescript
exchange.feed({
limit: 8, // default: 4
imageFormat: 'png', // default: webp
autoImpressions: true, // impressions event will be called
showCompleted: true // default: false
}).then((items) => {
// render(items)
// exchange.impressions(items) -- if autoImpressions: false
});
```
3. Send impressions (manual)
```typescript
exchange.impressions(items);
```
4. Open item via Telegram (item click handler)
```typescript
// open task with auto check
exchange.open(item).then(() => {
// exchange completed!
// reward user, remove task from list, etc...
}).catch(() => {
// exchange is not completed!
});
// or open task with manual check
exchange.open(item, false);
// manual check
exchange.check(item).then(success => {
// if success=true - exchange completed!
// reward user, remove task from list, etc...
});
```
5. Send custom event ...
## Ads
1. Получаем рекламный сервис Taddy
```typescript
const ads = taddy.ads();
// или можем обращаться напрямую без создания переменной
taddy.ads()
```
2. Выполняем загрузку и показ рекламного объявления interstitial
```typescript
ads.interstitial({
// можем добавить полезную нагрузку для получения ее через вебхук (view-through)
payload: { my: "data" },
// можем добавить обработчик закрытия объявления или полного просмотра
onClosed: () => console.log('Объявление закрыто'),
onViewThrough: (id: string) => console.log('Объявление просмотрено', id);
}).then((success: boolean) => {
// success содержит признак того, что объявление было показано
});
// Минимальный код
ads.interstitial();
// или
taddy.ads().interstitial();
```
---
# Agent Instructions: 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:
```
GET https://taddy.gitbook.io/docs/sdk/web.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.