Wepster & AppsFlyer Simulator

Роль Mini App (Фронтенд)

Міні-апка є точкою входу. Її головна задача — "познайомити" Wepster з користувачем при відкритті та правильно згенерувати посилання на завантаження, щоб мобільний додаток потім зміг розпізнати цього користувача.

Крок 1 Реєстрація відкриття

При ініціалізації додатку дістаємо дані юзера і відправляємо на бекенд для створення профілю у Wepster.

// 1. Ініціалізуємо Telegram Web App
const tg = window.Telegram.WebApp;
tg.ready();

// 2. Отримуємо дані користувача
const user = tg.initDataUnsafe?.user;

if (user?.id) {
    // 3. Відправляємо на бекенд Wepster
    fetch("https://my.wepster.com/api/v1/telegram/miniapp/YOUR_CONN_ID", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            telegram_id: user.id,
            first_name: user.first_name,
            last_name: user.last_name,
            username: user.username
        })
    }).then(res => console.log("User registered in Wepster", res));
}

Крок 2 Клік "Завантажити" (OneLink)

Коли юзер натискає кнопку завантаження, фронтенд має підставити його telegram_id в параметр af_sub1 та відкрити посилання.

function handleDownloadClick() {
    const telegramId = window.Telegram.WebApp.initDataUnsafe?.user?.id;
    
    if (telegramId) {
        // Динамічно формуємо OneLink
        const oneLink = `https://winpass.onelink.me/aNvF/2qkzpu69?af_sub1=${telegramId}`;
        
        // Відкриваємо посилання нативно в Telegram, щоб не ламати WebView
        window.Telegram.WebApp.openLink(oneLink);
    } else {
        console.error("Не вдалося отримати telegram_id");
    }
}

// Прив'язуємо до кнопки
document.getElementById('download-btn').addEventListener('click', handleDownloadClick);

Чому цей варіант?

На плані Welcome недоступні S2S Webhooks (Push API). Тому відправку даних на сервер Wepster має робити **сам мобільний додаток** (Mobile SDK) одразу після встановлення або проходження KYC.

Як це працює:

У міні-апі юзер тисне "Завантажити". Ти генеруєш OneLink: ...?af_sub1={telegram_id}.
Юзер встановлює і вперше відкриває додаток Winpass.
Мобільний SDK AppsFlyer "розуміє", що юзер прийшов з лінки і витягує af_sub1.
Мобільний додаток **самостійно** робить POST-запит на твій бекенд (на той самий ендпоінт, що готувався для AppsFlyer).

Завдання для мобільного розробника (React Native):

import appsFlyer from 'react-native-appsflyer';

// Цей колбек спрацює при першому відкритті апки
appsFlyer.onInstallConversionData(
  (data) => {
    // 1. Дістаємо ID, який ти передав у міні-апі
    const telegramId = data?.data?.af_sub1; 
    
    if (telegramId) {
        // 2. Відправляємо на твій Wepster-бекенд (на існуючий webhook endpoint)
        fetch("https://my.wepster.com/api/v1/appsflyer/YOUR_CONN_ID/telegram", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                telegram_id: telegramId,
                event_name: "install",
                chain_id: "CHAIN_ID_FUNNEL_2",
                unsubscribe_chains: ["CHAIN_ID_FUNNEL_1"]
            })
        });
    }
  }
);

Вимоги

Цей метод працює лише якщо у тебе активний Growth Plan або вище. AppsFlyer сервери будуть автоматично слати "сирі" (Raw) JSON масиви на твій бекенд.

Кроки налаштування в AppsFlyer:

Відкрий ліве бокове меню і знайди розділ Integration (або Data Export).
Обери API Access.
Знайди блок з назвою Push API (Якщо його немає - план не підтримує).
Натисни Add Postback (або Add Endpoint).
У поле Postback URL встав свій ендпоінт:
https://my.wepster.com/api/v1/appsflyer/TVII_CONN_ID/telegram
У полі Event Messages обов'язково постав галочки на:
- Install
- In-app events (щоб ловити kyc_approved)
Збережи. Твій бекенд має бути готовий парсити поле af_sub1 з їхнього JSON.

Wepster ↔ AppsFlyer

Налаштування запиту