> ## 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.

# Implémenter Mellowtel Elements dans les Extensions de Navigateur

Ici, tu verras comment intégrer Mellowtel Elements dans ton extension de navigateur pour une gestion fluide du consentement des utilisateurs.

## Installation

Installe le package dans ton projet d'extension :

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

## Implémentation

### 1. Créer des Conteneurs Div HTML

Ajoute des divs conteneurs dans le HTML de ton extension :

```html theme={null}
<!-- Dans popup.html ou la page des options -->
<div id="opt-in-container"></div>
<div id="opt-out-container"></div>
<div id="settings-container"></div>
```

### 2. Initialiser Mellowtel Elements

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

// Crée une instance avec l'ID de l'extension et la clé de configuration
const mellowtel = new MellowtelElements(
  'your-extension-id-here',    // ID de l'extension
  'your-config-key-here'       // Clé de configuration
);
```

### 3. Créer des Éléments

Ajoute des éléments à la popup ou à la page des options de ton extension :

```javascript theme={null}
// Crée un élément d'opt-in
await mellowtel.createElement('opt-in-container', { type: 'opt-in' });

// Crée un élément d'opt-out
await mellowtel.createElement('opt-out-container', { type: 'opt-out' });

// Crée un élément de paramètres
await mellowtel.createElement('settings-container', { type: 'settings' });
```

Parfait ! Maintenant, ton extension est prête à utiliser Mellowtel Elements pour une gestion fluide de l'opt-in, de l'opt-out et des paramètres.