> ## 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 Elements в расширениях браузера

Здесь вы узнаете, как интегрировать Mellowtel Elements в ваше расширение для браузера для бесшовного управления согласием пользователей.

## Установка

Установите пакет в ваш проект расширения:

```bash theme={null}
npm install mellowtel-elements
```

## Реализация

### 1. Создайте HTML Div контейнеры

Добавьте контейнеры div в HTML вашего расширения:

```html theme={null}
<!-- В popup.html или на странице настроек -->
<div id="opt-in-container"></div>
<div id="opt-out-container"></div>
<div id="settings-container"></div>
```

### 2. Инициализируйте Mellowtel Elements

```javascript theme={null}
import { MellowtelElements } from 'mellowtel-elements';

// Создайте экземпляр с ID расширения и ключом конфигурации
const mellowtel = new MellowtelElements(
  'your-extension-id-here',    // ID расширения
  'your-config-key-here'       // Ключ конфигурации
);
```

### 3. Создайте элементы

Добавьте элементы на всплывающую страницу или страницу настроек вашего расширения:

```javascript theme={null}
// Создайте элемент для согласия
await mellowtel.createElement('opt-in-container', { type: 'opt-in' });

// Создайте элемент для отказа
await mellowtel.createElement('opt-out-container', { type: 'opt-out' });

// Создайте элемент настроек
await mellowtel.createElement('settings-container', { type: 'settings' });
```

Отлично! Теперь ваше расширение готово использовать Mellowtel Elements для бесшовного управления согласием и настройками.