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:
| Attribute | What It Does | Example |
|---|---|---|
data-key | Your tenant API key (required) | "tk_abc123" |
data-title | Chat window title | "Support" |
data-subtitle | Subtitle under title | "We reply instantly" |
data-welcome | Welcome message | "Hello!" |
data-theme | Theme color (hex) | "#FF6B6B" |
data-lang | Language (ar/en) | "ar" |
data-position | Button position | "left" |
data-avatar | Custom 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:
- Sign up at mugib.com and create your first project
- Upload your Knowledge Base — FAQ docs, PDFs, or type directly
- Copy the widget code from your project dashboard
- Paste it into your website's HTML — before the closing
</body>tag - 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 في المتصفح. عندما يغلق العميل الدردشة ويعود لاحقاً، يتم الحفاظ على سجل المحادثة. لا حاجة لتسجيل الدخول، لا كوكيز — تجربة سلسة تستمر من حيث توقفت.
تصميم متجاوب، الجوال أولاً
يبدو الودجت رائعاً على كل جهاز. على سطح المكتب، يظهر كلوحة عائمة أنيقة. على الجوال، يتوسع ليملأ الشاشة لتجربة شبيهة بالتطبيقات الأصلية. يتكيف التصميم تلقائياً مع حجم الشاشة، مما يضمن سهولة القراءة والاستخدام في كل مكان.
نفس المحرك خلف جميع القنوات
ودجت الدردشة ليس منتجاً منفصلاً — إنه قناة أخرى مدعومة بمحرك مجيب. نفس قاعدة المعرفة، نفس نموذج الذكاء الاصطناعي، نفس الجودة التي تدير تكاملات واتساب وتيليجرام وإنستجرام والبريد الإلكتروني. عندما تحدّث قاعدة معرفتك، كل قناة — بما فيها الودجت — تصبح أذكى فوراً.
عقل واحد. كل القنوات. جودة متسقة.
ابدأ الآن
جاهز لإضافة دردشة ذكية لموقعك؟ إليك الخطوات:
- سجّل في mugib.com وأنشئ مشروعك الأول
- ارفع قاعدة معرفتك — مستندات FAQ، ملفات PDF، أو اكتب مباشرة
- انسخ كود الودجت من لوحة تحكم مشروعك
- الصقه في HTML موقعك — قبل وسم
</body>الأخير - انتهى! وكيل الذكاء الاصطناعي الآن حي على موقعك
لا خوادم لإدارتها، لا واجهات API للتكامل، لا أُطر عمل frontend لتعلمها. مجرد سطر كود واحد يمنح موقعك قوى خارقة.