> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Модальне Вікно Підтримки Mellowtel

Модальне Вікно Підтримки Mellowtel — це ненав'язливе модальне вікно, яке заохочує користувачів підтримати ваше розширення або вебсайт через розширення Support with Mellowtel.

## Передумови

Перед використанням модального вікна переконайтеся, що у вашому проєкті налаштовані Mellowtel Elements:

<CardGroup cols={2}>
  <Card title="Інтеграція Розширення" icon="puzzle-piece" href="/mellowtel-elements/extension-integration">
    Налаштування для розширень браузера
  </Card>

  <Card title="Інтеграція Вебсайту" icon="atom" href="/mellowtel-elements/website-integration">
    Налаштування для вебсайтів за допомогою NPM або CDN
  </Card>
</CardGroup>

## Основні Характеристики

* **Кросплатформенність** - Працює на вебсайтах і в скриптах контенту розширень
* **Розумне Відкладання** - Користувачі можуть відкласти на 1 тиждень, 2 тижні або вимкнути назавжди
* **Сховище Chrome** - Використовує API сховища Chrome, коли доступно, з поверненням до localStorage
* **Shadow DOM** - Ізоляція стилів запобігає конфліктам зі стилями сторінки хоста
* **Мобільна Адаптивність** - Оптимізовано для всіх розмірів екранів
* **Деталі Розширення** - Автоматично отримує та відображає ім'я та іконку розширення

## Створення Модального Вікна

Після ініціалізації Mellowtel Elements (див. керівництва з інтеграції вище), ви можете створити та відобразити модальне вікно підтримки:

### Основне Використання

```javascript theme={null}
// Основне використання з заголовком і текстом за замовчуванням
await mellowtel.createModal('your-invite-id-here');

// Кастомний заголовок і текст
await mellowtel.createModal(
  'your-invite-id-here',
  'Підтримайте Наше Розширення!',
  'Допоможіть нам підтримувати цей безкоштовний сервіс, додавши наше розширення.'
);
```

### Приклади Використання

#### У Скриптах Контенту

```javascript theme={null}
// Показати модальне вікно після того, як користувач перебуває на сторінці 30 секунд
setTimeout(async () => {
    await mellowtel.createModal(
        'content-script-invite-456',
        'Дякуємо за використання нашого розширення!',
        'Допоможіть нам покращити, підтримуючи розробку цього розширення.'
    );
}, 30000);
```

#### На Вебсайтах

```javascript theme={null}
// Показати модальне вікно після завантаження сторінки
window.addEventListener('load', async () => {
    await mellowtel.createModal(
        'website-invite-123',
        'Підтримайте Наш Сервіс',
        'Встановіть наше розширення, щоб допомогти зберегти цей вебсайт безкоштовним і без реклами.'
    );
});
```

#### Умовне Відображення

```javascript theme={null}
// Показувати лише на певних доменах
const allowedDomains = ['github.com', 'stackoverflow.com', 'reddit.com'];
const currentDomain = window.location.hostname;

if (allowedDomains.some(domain => currentDomain.includes(domain))) {
    await mellowtel.createModal(
        'conditional-invite-789',
        'Подобається наше розширення?',
        'Підтримайте нас і допоможіть нам продовжувати покращувати цей безкоштовний інструмент.'
    );
}
```

## Довідка по API

### `createModal(inviteId, title?, body?)`

Створює та відображає модальне вікно підтримки.

**Параметри:**

* `inviteId` (рядок, обов'язковий): Унікальний ідентифікатор для відстеження взаємодій з модальним вікном
* `title` (рядок, необов'язковий): Кастомний заголовок модального вікна (за замовчуванням "Support with Mellowtel")
* `body` (рядок, необов'язковий): Кастомний текст модального вікна

**Повертає:** `Promise<void>`

## Поведінка Модального Вікна

### Опції Відкладання

Користувачі можуть вибрати одну з трьох опцій відкладання:

* **1 тиждень**: Модальне вікно не з'являтиметься протягом 7 днів
* **2 тижні**: Модальне вікно не з'являтиметься протягом 14 днів
* **Вимкнути**: Модальне вікно більше ніколи не з'явиться