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

# Implementar Mellowtel Elements en Extensiones de Navegador

Aquí verás cómo integrar Mellowtel Elements en tu extensión de navegador para una gestión fluida del consentimiento del usuario.

## Instalación

Instala el paquete en tu proyecto de extensión:

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

## Implementación

### 1. Crear Contenedores Div HTML

Agrega contenedores div en el HTML de tu extensión:

```html theme={null}
<!-- En popup.html o página de opciones -->
<div id="opt-in-container"></div>
<div id="opt-out-container"></div>
<div id="settings-container"></div>
```

### 2. Inicializar Mellowtel Elements

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

// Crear instancia con ID de extensión y clave de configuración
const mellowtel = new MellowtelElements(
  'your-extension-id-here',    // ID de la extensión
  'your-config-key-here'       // Clave de configuración
);
```

### 3. Crear Elementos

Agrega elementos a la ventana emergente o página de opciones de tu extensión:

```javascript theme={null}
// Crear elemento de aceptación
await mellowtel.createElement('opt-in-container', { type: 'opt-in' });

// Crear elemento de rechazo
await mellowtel.createElement('opt-out-container', { type: 'opt-out' });

// Crear elemento de configuración
await mellowtel.createElement('settings-container', { type: 'settings' });
```

¡Perfecto! Ahora tu extensión está lista para usar Mellowtel Elements para una gestión fluida de aceptación, rechazo y configuración de opciones.