> ## 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` (строка, необязательно): Пользовательский заголовок модального окна (по умолчанию "Поддержка с Mellowtel")
* `body` (строка, необязательно): Пользовательский текст тела модального окна

**Возвращает:** `Promise<void>`

## Поведение модального окна

### Варианты отсрочки

Пользователи могут выбрать один из трех вариантов отсрочки:

* **1 неделя**: Модальное окно не появится в течение 7 дней
* **2 недели**: Модальное окно не появится в течение 14 дней
* **Отключить**: Модальное окно больше никогда не появится