Skip to content

WAITLIST_SETUP.md

Latest commit

 

History

History
225 lines (178 loc) · 6.99 KB

WAITLIST_SETUP.md

File metadata and controls

225 lines (178 loc) · 6.99 KB

Waitlist Setup Guide

Реализованная функциональность

✅ Модалка для сбора email при клике на кнопки App Store и Google Play ✅ Возможность скачать приложение прямо из модалки ✅ Теги для отслеживания (iOS vs Android) ✅ Красивая UI с анимациями ✅ Мобильная адаптация

Вариант 1: Email Octopus (Рекомендуется - САМЫЙ ПРОСТОЙ)

Преимущества:

  • ✅ Абсолютно бесплатный
  • ✅ Простая API
  • ✅ Автоматические welcome письма
  • ✅ Встроенная email рассылка
  • ✅ 10,000 контактов в бесплатном плане

Пошаговая настройка:

  1. Создать аккаунт:

  2. Создать список контактов:

    • В левой панели: Contacts → Lists
    • Нажать "Create new list"
    • Назвать его "Prayer Lock Waitlist"
    • Сохранить

  3. Получить API ключ:

    • Перейти в Settings → API
    • Скопировать API ключ
    • Заменить YOUR_EMAIL_OCTOPUS_API_KEY в index.html

  4. Получить List ID:

    • Вернуться в Contacts → Lists
    • Нажать на список
    • В URL или в деталях найти List ID (выглядит как: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)
    • Заменить YOUR_LIST_ID в index.html

  5. Пример кода (уже реализовано):

const EMAIL_OCTOPUS_CONFIG = {
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    listId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
};

Вариант 2: Brevo (бывший Sendinblue)

Преимущества:

  • ✅ 300 писем/день бесплатно
  • ✅ Автоматизация
  • ✅ CRM функции
  • ✅ Красивые email шаблоны

Пошаговая настройка:

  1. Создать аккаунт: https://www.brevo.com/

  2. Получить API ключ:

    • Settings → SMTP & API → API Keys
    • Создать новый API key
    • Заменить в коде

  3. Пример интеграции:

async function handleWaitlistSubmit(event) {
    // Вместо Email Octopus:
    const response = await fetch('https://api.brevo.com/v3/contacts', {
        method: 'POST',
        headers: {
            'api-key': BREVO_CONFIG.apiKey,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            email: email,
            listIds: [BREVO_CONFIG.contactListId],
            attributes: {
                SMS: phone // опционально
            }
        })
    });
}

Вариант 3: Использовать собственный backend

Если у вас есть свой backend:

async function handleWaitlistSubmit(event) {
    const response = await fetch('/api/waitlist', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            email: email,
            platform: selectedPlatform,
            timestamp: new Date().toISOString()
        })
    });
}

Best Practices для Waitlist

1. Email Validation

  • ✅ HTML5 type="email" уже добавлен
  • Можно добавить дополнительную валидацию на backend

2. Double Opt-In

  • Отправлять письмо с подтверждением
  • Email Octopus это делает автоматически

3. Сегментация

  • Теги iOS и Android помогают отправлять релевантные письма
  • Можно добавить более подробные теги (возраст, интересы и т.д.)

4. Welcome Sequence

  • Отправляйте 3-5 писем по расписанию
  • Письмо 1: Спасибо за подписку
  • Письмо 2: Обзор функций
  • Письмо 3: История создания (storytelling)
  • Письмо 4: Когда выходит приложение
  • Письмо 5: Промокод на launch

5. Metrics для отслеживания

// Отправляйте события в аналитику
gtag('event', 'waitlist_signup', {
    platform: selectedPlatform,
    email_domain: email.split('@')[1]
});

6. Rate Limiting

  • Не позволять одному email подписаться несколько раз
  • Email Octopus автоматически игнорирует дубликаты

7. GDPR Compliance

  • ✅ Сохранение email только с согласия
  • ✅ Легко удалить данные (у Email Octopus есть функция)
  • Добавить Privacy Policy ссылку в модалку

8. Analytics

  • Отслеживайте conversion rate: сколько посетителей подписались
  • Email Octopus предоставляет встроенную аналитику

Тестирование

Локально:

# Используйте test email:
test@example.com

# Проверьте консоль браузера (F12) для ошибок

Production:

  1. Заменить API ключи на реальные
  2. Протестировать с реальным email
  3. Проверить, приходит ли письмо подтверждения
  4. Убедиться, что email появился в вашем списке

Расширения

Добавить Telegram уведомление:

// Отправить в Telegram когда кто-то подписался
await fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`, {
    method: 'POST',
    body: JSON.stringify({
        chat_id: TELEGRAM_CHAT_ID,
        text: `🎉 Новый подписчик: ${email}`
    })
});

Добавить Discord webhook:

await fetch(DISCORD_WEBHOOK_URL, {
    method: 'POST',
    body: JSON.stringify({
        content: `✉️ New waitlist signup: ${email} (${selectedPlatform})`
    })
});

Gamification - Referral Links:

// Дать каждому подписчику уникальную реферальную ссылку
const referralCode = btoa(email).substring(0, 8);
// https://prayer-lock.com?ref=ABC12345

Миграция данных

Когда приложение выйдет:

  1. Экспортировать список из Email Octopus (CSV)
  2. Отправить вторую волну писем
  3. Собрать feedback перед публикацией

Support