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

# Implementeer Mellowtel Elements in Browserextensies

Hier zie je hoe je Mellowtel Elements integreert in je browserextensie voor naadloos beheer van gebruikersconsent.

## Installatie

Installeer het pakket in je extensieproject:

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

## Implementatie

### 1. Maak HTML Div Containers

Voeg container divs toe in de HTML van je extensie:

```html theme={null}
<!-- In popup.html of optiepagina -->
<div id="opt-in-container"></div>
<div id="opt-out-container"></div>
<div id="settings-container"></div>
```

### 2. Initialiseer Mellowtel Elements

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

// Maak een instantie met extensie-ID en configuratiesleutel
const mellowtel = new MellowtelElements(
  'your-extension-id-here',    // Extensie-ID
  'your-config-key-here'       // Configuratiesleutel
);
```

### 3. Creëer Elementen

Voeg elementen toe aan de popup of optiepaginavan je extensie:

```javascript theme={null}
// Creëer opt-in element
await mellowtel.createElement('opt-in-container', { type: 'opt-in' });

// Creëer opt-out element
await mellowtel.createElement('opt-out-container', { type: 'opt-out' });

// Creëer instellingen element
await mellowtel.createElement('settings-container', { type: 'settings' });
```

Perfect! Nu is je extensie klaar om Mellowtel Elements te gebruiken voor naadloos opt-in, opt-out en het beheren van instellingen.