> ## 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を実装する
ここでは、NPMパッケージまたはCDNを使用して、Mellowtel Elementsをあなたのウェブサイトに統合する方法を紹介します。
## オプション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 Elementsの例
```
完璧です！これであなたのウェブサイトは、シームレスなオプトイン、オプトアウト、設定管理のためにMellowtel Elementsを使用する準備が整いました。