> ## 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.
# Implement Mellowtel Elements in Websites
Here you will see how to integrate Mellowtel Elements into your website using either NPM package or CDN for quick setup.
## Option 1: NPM Package
### Installation
```bash theme={null}
npm install mellowtel-elements
```
### Implementation
```javascript theme={null}
import { MellowtelElements } from 'mellowtel-elements';
// Initialize with your extension ID and config key
const mellowtel = new MellowtelElements('your-extension-id', 'your-config-key');
// Create elements
await mellowtel.createElement('opt-in-container', { type: 'opt-in' });
await mellowtel.createElement('opt-out-container', { type: 'opt-out' });
await mellowtel.createElement('settings-container', { type: 'settings' });
```
## Option 2: CDN
### HTML Setup
```html theme={null}
MellowTel Elements Example
```
Perfect! Now your website is ready to use Mellowtel Elements for seamless opt-in, opt-out, and managing settings.