Product 6 min read

Introducing the Mugib Web Chat Widget: Add AI to Your Website in One Line

Mugib now offers an embeddable chat widget you can add to any website with a single script tag. Real-time AI streaming, full customization, and bilingual support — no coding required.

M
Mugib Team
Engineering
المنتج 6 دقائق قراءة

ودجت الدردشة من مجيب: أضف الذكاء الاصطناعي لموقعك بسطر واحد

مجيب يقدم الآن ودجت دردشة قابل للتضمين يمكنك إضافته لأي موقع بوسم سكريبت واحد. بث مباشر للذكاء الاصطناعي، تخصيص كامل، ودعم ثنائي اللغة — بدون برمجة.

ف
فريق مجيب
الهندسة
Introducing the Mugib Web Chat Widget: Add AI to Your Website in One Line

Your Website Deserves an AI Agent

Your website is your most important digital storefront — it's where customers come to learn, ask questions, and make decisions. Yet most businesses still rely on static FAQ pages or slow email forms. What if your website could answer questions instantly, 24/7, in the same voice your human team uses?

Today, we're launching the Mugib Web Chat Widget — a fully embeddable AI chat interface that you can add to any website with a single line of code. No frameworks to install, no build steps, no dependencies. Just one <script> tag.

One Line of Code, Unlimited Intelligence

Adding the Mugib widget to your site is as simple as pasting this into your HTML:

<script src="https://api.mugib.com/widget.js"
  data-key="YOUR_API_KEY"
  data-title="Chat Support"
  data-welcome="Hello! How can I help you?"
  data-theme="#6C63FF"></script>

That's it. Once loaded, a floating chat button appears in the corner of your page. When clicked, it opens a beautiful, branded chat window where your customers can ask questions and receive AI-powered answers in real time.

Real-Time Streaming Responses

Unlike traditional chatbots that make you wait for the full response, the Mugib widget uses Server-Sent Events (SSE) to stream responses word by word. Your customers see the AI "typing" in real time, creating a natural and engaging conversation experience — just like chatting with a real person.

Behind the scenes, the widget connects to the same powerful Mugib Engine that powers all our channels. The AI retrieves answers from your Knowledge Base using RAG (Retrieval-Augmented Generation), ensuring every response is accurate, relevant, and grounded in your actual business data.

Fully Customizable

The widget was built with flexibility in mind. You can customize virtually everything using simple data- attributes:

AttributeWhat It DoesExample
data-keyYour tenant API key (required)"tk_abc123"
data-titleChat window title"Support"
data-subtitleSubtitle under title"We reply instantly"
data-welcomeWelcome message"Hello!"
data-themeTheme color (hex)"#FF6B6B"
data-langLanguage (ar/en)"ar"
data-positionButton position"left"
data-avatarCustom avatar URL"/logo.png"

Arabic-First, Bilingual by Default

Because Mugib was built for the Middle East, the widget has native Arabic support with full RTL layout. Set data-lang="ar" and the entire interface flips — text direction, send button placement, and even the welcome message. This is not a translated afterthought; it's a first-class experience.

Your AI responses will also be in Arabic (or whatever language you've configured in your Mugib tenant), making the entire interaction seamless for your Arabic-speaking customers.

Smart Session Management

The widget automatically manages chat sessions using the browser's localStorage. When a customer closes the chat and comes back later, their conversation history is preserved. No logins required, no cookies — just a seamless experience that picks up right where they left off.

Mobile-First, Responsive Design

The widget looks stunning on every device. On desktop, it appears as a sleek floating panel. On mobile, it expands to fill the screen for a native app-like experience. The design automatically adapts to screen size, ensuring readability and ease of use everywhere.

The Same Engine Behind All Channels

The Web Chat Widget isn't a separate product — it's another channel powered by the Mugib Engine. The same Knowledge Base, the same AI model, the same quality that drives your WhatsApp, Telegram, Instagram, and email integrations. When you update your KB, every channel — including the widget — gets smarter instantly.

One brain. Every channel. Consistent quality.

Getting Started

Ready to add AI chat to your website? Here's how:

  1. Sign up at mugib.com and create your first project
  2. Upload your Knowledge Base — FAQ docs, PDFs, or type directly
  3. Copy the widget code from your project dashboard
  4. Paste it into your website's HTML — before the closing </body> tag
  5. Done! Your AI agent is now live on your website

No servers to manage, no APIs to integrate, no frontend frameworks to learn. Just a single line of code that gives your website superpowers.

موقعك يستحق وكيل ذكاء اصطناعي

موقعك الإلكتروني هو واجهتك الرقمية الأهم — المكان الذي يأتي إليه العملاء للتعلم وطرح الأسئلة واتخاذ القرارات. ومع ذلك، لا تزال معظم الشركات تعتمد على صفحات أسئلة شائعة ثابتة أو نماذج بريد إلكتروني بطيئة. ماذا لو كان موقعك يستطيع الإجابة على الأسئلة فوراً، على مدار الساعة، بنفس أسلوب فريقك البشري؟

اليوم، نطلق ودجت الدردشة من مجيب — واجهة دردشة ذكية قابلة للتضمين يمكنك إضافتها لأي موقع بسطر كود واحد. لا أُطر عمل، لا خطوات بناء، لا تبعيات. مجرد وسم <script> واحد.

سطر كود واحد، ذكاء لا محدود

إضافة ودجت مجيب لموقعك بسيطة كلصق هذا الكود في HTML:

<script src="https://api.mugib.com/widget.js"
  data-key="YOUR_API_KEY"
  data-title="دعم المحادثة"
  data-welcome="مرحباً! كيف أقدر أساعدك؟"
  data-theme="#6C63FF"></script>

هذا كل شيء. بمجرد التحميل، يظهر زر دردشة عائم في زاوية صفحتك. عند النقر عليه، تُفتح نافذة دردشة جميلة ومُعلَّمة بعلامتك التجارية حيث يمكن لعملائك طرح الأسئلة والحصول على إجابات مدعومة بالذكاء الاصطناعي في الوقت الفعلي.

ردود بث مباشر في الوقت الفعلي

على عكس روبوتات الدردشة التقليدية التي تجعلك تنتظر الرد الكامل، يستخدم ودجت مجيب تقنية Server-Sent Events (SSE) لبث الردود كلمة بكلمة. يرى عملاؤك الذكاء الاصطناعي "يكتب" في الوقت الفعلي، مما يخلق تجربة محادثة طبيعية وجذابة — تماماً مثل الدردشة مع شخص حقيقي.

خلف الكواليس، يتصل الودجت بنفس محرك مجيب القوي الذي يدعم جميع قنواتنا. يسترجع الذكاء الاصطناعي الإجابات من قاعدة معرفتك باستخدام تقنية RAG (التوليد المعزز بالاسترجاع)، مما يضمن أن كل رد دقيق وذو صلة ومبني على بيانات عملك الفعلية.

تخصيص كامل

تم بناء الودجت مع مراعاة المرونة. يمكنك تخصيص كل شيء تقريباً باستخدام سمات data- البسيطة:

السمةماذا تفعلمثال
data-keyمفتاح API للمشروع (مطلوب)"tk_abc123"
data-titleعنوان نافذة الدردشة"الدعم"
data-subtitleنص فرعي تحت العنوان"نرد فوراً"
data-welcomeرسالة ترحيب"مرحباً!"
data-themeلون الثيم (hex)"#FF6B6B"
data-langاللغة (ar/en)"ar"
data-positionموضع الزر"left"
data-avatarرابط صورة مخصصة"/logo.png"

عربي أولاً، ثنائي اللغة بشكل افتراضي

لأن مجيب بُني للشرق الأوسط، يتمتع الودجت بـدعم عربي أصلي مع تخطيط RTL كامل. اضبط data-lang="ar" وتنقلب الواجهة بالكامل — اتجاه النص، موضع زر الإرسال، وحتى رسالة الترحيب. هذا ليس ترجمة لاحقة؛ إنها تجربة من الدرجة الأولى.

ستكون ردود الذكاء الاصطناعي أيضاً بالعربية (أو أي لغة قمت بتهيئتها في مشروع مجيب)، مما يجعل التفاعل سلساً لعملائك الناطقين بالعربية.

إدارة جلسات ذكية

يدير الودجت جلسات الدردشة تلقائياً باستخدام localStorage في المتصفح. عندما يغلق العميل الدردشة ويعود لاحقاً، يتم الحفاظ على سجل المحادثة. لا حاجة لتسجيل الدخول، لا كوكيز — تجربة سلسة تستمر من حيث توقفت.

تصميم متجاوب، الجوال أولاً

يبدو الودجت رائعاً على كل جهاز. على سطح المكتب، يظهر كلوحة عائمة أنيقة. على الجوال، يتوسع ليملأ الشاشة لتجربة شبيهة بالتطبيقات الأصلية. يتكيف التصميم تلقائياً مع حجم الشاشة، مما يضمن سهولة القراءة والاستخدام في كل مكان.

نفس المحرك خلف جميع القنوات

ودجت الدردشة ليس منتجاً منفصلاً — إنه قناة أخرى مدعومة بمحرك مجيب. نفس قاعدة المعرفة، نفس نموذج الذكاء الاصطناعي، نفس الجودة التي تدير تكاملات واتساب وتيليجرام وإنستجرام والبريد الإلكتروني. عندما تحدّث قاعدة معرفتك، كل قناة — بما فيها الودجت — تصبح أذكى فوراً.

عقل واحد. كل القنوات. جودة متسقة.

ابدأ الآن

جاهز لإضافة دردشة ذكية لموقعك؟ إليك الخطوات:

  1. سجّل في mugib.com وأنشئ مشروعك الأول
  2. ارفع قاعدة معرفتك — مستندات FAQ، ملفات PDF، أو اكتب مباشرة
  3. انسخ كود الودجت من لوحة تحكم مشروعك
  4. الصقه في HTML موقعك — قبل وسم </body> الأخير
  5. انتهى! وكيل الذكاء الاصطناعي الآن حي على موقعك

لا خوادم لإدارتها، لا واجهات API للتكامل، لا أُطر عمل frontend لتعلمها. مجرد سطر كود واحد يمنح موقعك قوى خارقة.

Build Your AI Agent Today

Join thousands of businesses using Mugib to serve their customers better.

Start Free Trial

ابدأ مع مجيب اليوم

انضم للشركات التي تستخدم مجيب لخدمة عملائها بشكل أفضل.

ابدأ تجربة مجانية