> ## 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 для безперебійної згоди, відмови та управління налаштуваннями.