> ## 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 元素
在这里，你将看到如何使用 NPM 包或 CDN 将 Mellowtel 元素集成到你的网站中，以便快速设置。
## 选项 1：NPM 包
### 安装
```bash theme={null}
npm install mellowtel-elements
```
### 实现
```javascript theme={null}
import { MellowtelElements } from 'mellowtel-elements';
// 使用你的扩展 ID 和配置密钥进行初始化
const mellowtel = new MellowtelElements('your-extension-id', 'your-config-key');
// 创建元素
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' });
```
## 选项 2：CDN
### HTML 设置
```html theme={null}
MellowTel 元素示例
```
完美！现在你的网站已经准备好使用 Mellowtel 元素，实现无缝的选择加入、选择退出和设置管理。