> ## 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 in Browsererweiterungen implementieren

Hier erfährst du, wie du Mellowtel Elements in deine Browsererweiterung integrierst, um ein nahtloses Management der Benutzereinwilligung zu ermöglichen.

## Installation

Installiere das Paket in deinem Erweiterungsprojekt:

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

## Implementierung

### 1. Erstelle HTML-Div-Container

Füge Container-Divs in das HTML deiner Erweiterung ein:

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

### 2. Initialisiere Mellowtel Elements

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

// Erstelle Instanz mit Erweiterungs-ID und Konfigurationsschlüssel
const mellowtel = new MellowtelElements(
  'your-extension-id-here',    // Erweiterungs-ID
  'your-config-key-here'       // Konfigurationsschlüssel
);
```

### 3. Erstelle Elemente

Füge Elemente zur Popup- oder Optionsseite deiner Erweiterung hinzu:

```javascript theme={null}
// Erstelle Opt-in-Element
await mellowtel.createElement('opt-in-container', { type: 'opt-in' });

// Erstelle Opt-out-Element
await mellowtel.createElement('opt-out-container', { type: 'opt-out' });

// Erstelle Einstellungen-Element
await mellowtel.createElement('settings-container', { type: 'settings' });
```

Perfekt! Jetzt ist deine Erweiterung bereit, Mellowtel Elements für nahtloses Opt-in, Opt-out und das Verwalten von Einstellungen zu verwenden.