Skip to Content
IntegrationsWebsite Widget

أداة دردشة الموقع الإلكتروني

ضمّن أداة دردشة مدعومة بالذكاء الاصطناعي مباشرةً على موقعك الإلكتروني. يحصل الزوّار على إجابات فورية من الـ Agent الذكي الخاص بك دون مغادرة موقعك.

نظرة عامة

توفّر أداة Website Widget ما يلي:

  • فقاعة دردشة عائمة على موقعك الإلكتروني
  • ردود ذكاء اصطناعي بالبثّ في الوقت الفعلي
  • مظهر قابل للتخصيص (الألوان، الموضع، الرسائل)
  • أقلّ من 11 كيلوبايت مضغوطة (gzipped) — تأثير شبه معدوم على الأداء
  • قائمة نطاقات مسموح بها للأمان

المتطلّبات المسبقة

  • Agent ذكي نشط في لوحة الإدارة الخاصة بك
  • الوصول إلى HTML الخاص بموقعك (للصق وسم script)

خطوات الإعداد

1. أنشئ أداة

  1. انتقل إلى Integrations من الشريط الجانبي
  2. مرّر إلى قسم Website Widget
  3. انقر على Create Widget
  4. أدخل اسمًا واختر الـ Agent الذكي
  5. انقر على Create

2. خصّص المظهر

انقر على بطاقة الأداة لفتح ورقة التعديل:

  • Primary Color — لون فقاعة الدردشة والترويسة
  • Text Color — نص الفقاعة والترويسة
  • Position — أسفل اليمين أو أسفل اليسار
  • Welcome Message — أول رسالة يراها الزوّار
  • Suggested Questions — حتى 4 موجّهات بدء قابلة للنقر
  • Avatar URL — صورة مخصّصة في ترويسة الدردشة
  • Border Radius — استدارة الزوايا

تتحدّث المعاينة الحية أثناء إجرائك التغييرات.

3. اضبط النطاقات المسموح بها (موصى به)

قيّد أي المواقع يمكنها تضمين أداتك:

  • اتركه فارغًا للسماح بكل النطاقات (افتراضي)
  • أضف نطاقات محدّدة: example.com و *.example.com
  • استخدم إدخالات المنفذ للتطوير: localhost:3000

4. ضمّنها على موقعك الإلكتروني

انقر على أيقونة التضمين على بطاقة أداتك وانسخ الكود:

<script src="https://core-api.cuneiform.chat/api/widget/widget.js" data-widget-id="your-widget-id" async></script>

الصقه قبل وسم </body> الختامي على موقعك الإلكتروني.

كيف يعمل

الزائر يفتح موقعك الإلكتروني → تظهر فقاعة الدردشة في الزاوية → ينقر الزائر → يُفتح لوح الدردشة → تُعرض رسالة الترحيب + الأسئلة المقترحة → يكتب الزائر سؤالًا → يبحث الـ Agent الذكي في المحتوى الخاص بك → يُبثّ الرد في الوقت الفعلي

تُعالَج الرسائل في الوقت الفعلي. يبحث الـ Agent في المحتوى الخاص بك ويولّد الردود باستخدام نفس خط أنابيب الذكاء الاصطناعي المستخدَم في كل القنوات الأخرى.

الميزات

الردود بالبثّ

تُبثّ الردود في الوقت الفعلي باستخدام Server-Sent Events (SSE). يرى الزوّار الإجابة تظهر تدريجيًا، على غرار ChatGPT.

استمرار الجلسة

يستأنف الزوّار العائدون على المتصفّح نفسه محادثتهم السابقة خلال نافذة 24 ساعة. تُخزَّن الجلسات في localStorage الخاص بالمتصفّح.

الأسئلة المقترحة

اضبط حتى 4 أسئلة قابلة للنقر تظهر عند فتح الدردشة. رائعة لتوجيه الزوّار نحو المواضيع الشائعة.

تعمل الأداة داخل Shadow DOM، فلن تتداخل مع أنماط موقعك الإلكتروني أو JavaScript الخاص به.

عرض Markdown

تدعم ردود الـ Agent تنسيق markdown بما في ذلك النص الغامق والمائل والقوائم وكتل الكود والروابط.

إدارة الأدوات

في صفحة Integrations، تعرض كل بطاقة أداة:

  • اسم الأداة والحالة
  • الـ Agent المُعيَّن
  • إجراءات التعديل والكود المضمَّن والحذف
الإجراءكيف
تعديل الإعداداتانقر على بطاقة الأداة
الحصول على الكود المضمَّنانقر على أيقونة التضمين
الحذفالقائمة ثلاثية النقاط ← Delete

الأمان

  • عزل Shadow DOM — الأداة معزولة عن صفحتك
  • رموز جلسة HMAC — رموز موقّعة بصلاحية 24 ساعة
  • قائمة النطاقات المسموح بها — قيّد أي المواقع يمكنها تضمين أداتك
  • تحديد المعدّل — 30 رسالة/دقيقة لكل جلسة
  • لا وصول إلى البيانات — لا تستطيع الأداة قراءة محتوى صفحتك أو تعديله

استكشاف الأخطاء وإصلاحها

الأداة لا تظهر

  1. تحقّق من أن وسم script قبل </body>، وليس في <head>
  2. تحقّق من أن data-widget-id يطابق لوحة الإدارة الخاصة بك
  3. إذا كانت قائمة النطاقات المسموح بها مضبوطة، تحقّق من إدراج نطاقك
  4. تحقّق من وحدة تحكّم المتصفّح (console) بحثًا عن أخطاء

الأداة لا تستجيب

  1. تأكّد من أن الـ Agent المُعيَّن في حالة Active
  2. تحقّق من أن الـ Agent لديه مستندات في محتواه
  3. تحقّق من تبويب Network في المتصفّح بحثًا عن طلبات API فاشلة

مشكلات المظهر

تستخدم الأداة عزل Shadow DOM. لن يؤثّر CSS الخاص بصفحتك على الأداة. استخدم المعاينة الحية في ورقة التعديل لتخصيص المظهر.

أسئلة شائعة

هل يمكنني تضمين الأداة على صفحات متعدّدة؟

نعم. استخدم نفس الكود المضمَّن على كل صفحة. تتشارك الأداة حالة الجلسة عبر الصفحات على النطاق نفسه.

هل تعمل على الهاتف المحمول؟

نعم. الأداة متجاوبة بالكامل ومُحسَّنة لمتصفّحات الهاتف المحمول.

هل يمكنني إزالة شارة “Powered by”؟

الشارة مطلوبة على خطّتَي Trial وStarter. ارقَّ إلى Plus أو أعلى لإزالتها.

هل تعمل مع React/Next.js/Vue؟

نعم. تُحمَّل الأداة كنص برمجي مستقلّ وتعمل مع أي إطار عمل، بما في ذلك تطبيقات الصفحة الواحدة (single-page applications).

ما هو الحدّ الأقصى لطول الرسالة؟

4,000 حرف لكل رسالة.

Last updated on