> ## 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. إنشاء حاويات Div في 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}
// إنشاء عنصر opt-in
await mellowtel.createElement('opt-in-container', { type: 'opt-in' });

// إنشاء عنصر opt-out
await mellowtel.createElement('opt-out-container', { type: 'opt-out' });

// إنشاء عنصر الإعدادات
await mellowtel.createElement('settings-container', { type: 'settings' });
```

برافو! دابا الإضافة تاعك واجدة باش تستعمل Mellowtel Elements للإدارة السلسة للاختيار، الإلغاء، وتسيير الإعدادات.