> ## 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 लागू करें

यहां आप देखेंगे कि अपने ब्राउज़र एक्सटेंशन में Mellowtel Elements को कैसे इंटीग्रेट करें ताकि उपयोगकर्ता की सहमति प्रबंधन में सहजता बनी रहे।

## इंस्टॉलेशन

अपने एक्सटेंशन प्रोजेक्ट में पैकेज इंस्टॉल करें:

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

## इंप्लीमेंटेशन

### 1. HTML Div कंटेनर्स बनाएं

अपने एक्सटेंशन के HTML में कंटेनर डिव्स जोड़ें:

```html theme={null}
<!-- popup.html या ऑप्शन्स पेज में -->
<div id="opt-in-container"></div>
<div id="opt-out-container"></div>
<div id="settings-container"></div>
```

### 2. Mellowtel Elements इनिशियलाइज़ करें

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

// एक्सटेंशन आईडी और कॉन्फिग की के साथ इंस्टेंस बनाएं
const mellowtel = new MellowtelElements(
  'your-extension-id-here',    // एक्सटेंशन आईडी
  'your-config-key-here'       // कॉन्फिगरेशन की
);
```

### 3. एलिमेंट्स बनाएं

अपने एक्सटेंशन के पॉपअप या ऑप्शन्स पेज में एलिमेंट्स जोड़ें:

```javascript theme={null}
// ऑप्ट-इन एलिमेंट बनाएं
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' });
```

बढ़िया! अब आपका एक्सटेंशन Mellowtel Elements का उपयोग करने के लिए तैयार है ताकि ऑप्ट-इन, ऑप्ट-आउट, और सेटिंग्स प्रबंधन में सहजता बनी रहे।