> ## 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 em Extensões de Navegador

Aqui você verá como integrar Mellowtel Elements na sua extensão de navegador para um gerenciamento de consentimento do usuário sem interrupções.

## Instalação

Instale o pacote no seu projeto de extensão:

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

## Implementação

### 1. Criar Contêineres Div HTML

Adicione divs de contêiner no HTML da sua extensão:

```html theme={null}
<!-- Em popup.html ou na página de opções -->
<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';

// Criar instância com ID da extensão e chave de configuração
const mellowtel = new MellowtelElements(
  'seu-id-da-extensao-aqui',    // ID da Extensão
  'sua-chave-de-config-aqui'    // Chave de Configuração
);
```

### 3. Criar Elementos

Adicione elementos ao popup ou à página de opções da sua extensão:

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

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

// Criar elemento de configurações
await mellowtel.createElement('settings-container', { type: 'settings' });
```

Perfeito! Agora sua extensão está pronta para usar Mellowtel Elements para opt-in, opt-out e gerenciamento de configurações de forma integrada.