Embed Your Bot on a Website تضمين بوتك في موقع ويب

Open your project → Integrate → Widget Builder tab.

Customize the widget appearance in real time using the left panel:

• Chat Title — shown in the widget header (e.g., ACME Support)
• Subtitle — a line below the title (e.g., We reply in minutes)
• Welcome Message — the first message shown to visitors
• Theme Color — choose a preset or pick a custom color
• Language — Arabic, English, French, Turkish, or Kurdish
• Position — bottom-right or bottom-left corner
• Avatar URL — optional image for the bot's icon

The right panel shows a live preview of how the widget will look on a website.

When ready, click Copy Code under the Embed Code section. Paste the <script> tag into your website's HTML just before the </body> closing tag.

Switch to the REST API tab. Your project's API Key is shown at the top of the page — treat it like a password.

You can integrate Mugib into any app or backend using three endpoints:

• Create Session — start a new conversation
• Send Message — send a user message and get the bot's reply
• Send Message (Streaming) — same as above but the response streams token-by-token (SSE)

Use the API when you want to embed the AI in a mobile app, a custom chat UI, or integrate it into an existing product flow.

Switch to the Voice Widget tab. This requires a Voice Agent to be set up first (see Lesson 10 — Voice AI Setup).

1. Select the voice agent from the dropdown
2. Copy the generated <script> snippet
3. Paste it before </body> on your website

A floating 📞 button appears on your website. Visitors can click it to talk directly to your voice AI.

افتح مشروعك ← التكامل ← تبويب مُنشئ الويدجت.

خصّص مظهر الويدجت في الوقت الفعلي باستخدام اللوحة اليسرى:

• عنوان الدردشة — يُعرض في رأس الويدجت (مثل: دعم ACME)
• العنوان الفرعي — سطر أسفل العنوان (مثل: نرد في دقائق)
• رسالة الترحيب — أول رسالة يراها الزوار
• لون الثيم — اختر من المُعدَّة مسبقاً أو حدد لوناً مخصصاً
• اللغة — العربية، الإنجليزية، الفرنسية، التركية، أو الكردية
• الموضع — ركن أسفل اليمين أو أسفل اليسار
• رابط الصورة الرمزية — صورة اختيارية لأيقونة البوت

اللوحة اليمنى تُظهر معاينة حية لشكل الويدجت على موقع ويب.

عند الجاهزية، انقر نسخ الكود في قسم كود التضمين. الصق وسم <script> في HTML موقعك مباشرة قبل وسم الإغلاق </body>.

انتقل لتبويب REST API. مفتاح API مشروعك معروض في أعلى الصفحة — تعامل معه كلمة مرور.

يمكنك دمج مجيب في أي تطبيق أو backend باستخدام ثلاث نقاط نهاية:

• إنشاء جلسة — بدء محادثة جديدة
• إرسال رسالة — إرسال رسالة مستخدم والحصول على رد البوت
• إرسال رسالة (Streaming) — نفسها لكن الرد يتدفق رمزاً بعد رمز (SSE)

استخدم API عندما تريد تضمين AI في تطبيق موبايل، أو واجهة دردشة مخصصة، أو دمجه في تدفق منتجك الحالي.

انتقل لتبويب Voice Widget. يتطلب هذا إعداد Voice Agent أولاً (انظر الدرس 10 — إعداد Voice AI).

1. اختر الوكيل الصوتي من القائمة المنسدلة
2. انسخ snippet الـ <script> المُولَّد
3. الصقه قبل </body> على موقعك

يظهر زر 📞 عائم على موقعك. يمكن للزوار النقر عليه للتحدث مباشرة مع AI الصوتي.