الانتقال إلى المحتوى الرئيسي

​
نظرة عامة

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

​
الميزات

  • خفيف الوزن - حزمة ~100-150kb مضغوطة بـ gzip
  • قابل للتخصيص بالكامل - الألوان والعلامات التجارية والتنسيق لمطابقة موقعك
  • متجاوب - نافذة منبثقة لسطح المكتب، ملء الشاشة للجوال
  • عزل Shadow DOM - لا تضارب في الأنماط مع CSS الحالي
  • بث في الوقت الفعلي - أحداث مرسلة من الخادم (SSE) لاستجابات سريعة
  • استمرار الجلسة - المحادثات تصمد عبر إعادة تحميل الصفحات
  • وضعان للعرض - مشغل عائم أو تضمين مضمن

​
البدء السريع

أضف هذه الأسطر القليلة إلى موقعك: 
<!-- تحميل العنصر -->
<script type="module" src="https://cdn.gorbit.app/widget/1.0/dist/gorbit-widget.js"></script>

<!-- التكوين والعرض -->
<gorbit-chat-widget
  backend-url="https://cloud.gorbit.app/api"
  api-key="your_api_key_here"
  mode="launcher"
>
</gorbit-chat-widget>
هذا كل شيء! سيظهر العنصر كزر عائم في الزاوية السفلية اليمنى من صفحتك.
استخدم دائماً مفتاح API محدود النطاق للعنصر. مفتاح API مرئي في الكود من جانب العميل، لذا يجب أن يكون لديه أذونات محدودة وحدود معدل. لا تستخدم أبداً مفاتيح المسؤول أو الوصول الكامل.

​
أوضاع العرض

​
وضع المشغل (افتراضي)

يظهر زر عائم في الزاوية السفلية اليمنى. النقر عليه يفتح نافذة محادثة منبثقة.
  • سطح المكتب: نافذة منبثقة 400x600px فوق الزر
  • الجوال: تراكب بملء الشاشة لتجربة جوال مثلى
<gorbit-chat-widget mode="launcher"></gorbit-chat-widget>

​
الوضع المضمن

يتم تضمين العنصر مباشرة في تخطيط صفحتك. مثالي لصفحات الدعم المخصصة أو قواعد المعرفة. 
<div style="width: 400px; height: 600px;">
  <gorbit-chat-widget mode="inline"></gorbit-chat-widget>
</div>
سيملأ العنصر أبعاد حاويته في الوضع المضمن. اضبط حجم الحاوية للتحكم في حجم العنصر.

​
خيارات التكوين

​
السمات المطلوبة

السمةالنوعالوصف
backend-urlstringعنوان URL لواجهة برمجة تطبيقات الواجهة الخلفية Gorbit
api-keystringمفتاح API للمصادقة

​
السمات الاختيارية

السمةالنوعالافتراضيالوصف
agent-idnumberundefinedوكيل/شخصية محدد للاستخدام
agent-namestring"Assistant"اسم العرض في الرأس
logostringشعار Gorbitعنوان URL لصورة شعار مخصص
primary-colorstring#1c1c1cلون العلامة التجارية الأساسي (الأزرار، اللمسات)
background-colorstring#e9e9e9لون خلفية العنصر
text-colorstring#000000bfلون النص (شفافية 75% سوداء)
modestring"launcher"وضع العرض: "launcher" أو "inline"

​
أمثلة التكوين

الإعداد الأساسي: 
<gorbit-chat-widget
  backend-url="https://cloud.gorbit.app/api"
  api-key="on_abc123">
</gorbit-chat-widget>
التخصيص الكامل: 
<gorbit-chat-widget
  backend-url="https://cloud.gorbit.app/api"
  api-key="on_abc123"
  agent-id="42"
  agent-name="روبوت الدعم"
  logo="https://yoursite.com/logo.png"
  primary-color="#FF6B35"
  background-color="#FFFFFF"
  text-color="#1A1A1A"
  mode="launcher"
>
</gorbit-chat-widget>

​
التخصيص

​
التنسيق

يستخدم العنصر خصائص CSS المخصصة للسمات. جميع الأنماط محددة داخل Shadow DOM لمنع التضارب مع CSS لموقعك. الألوان الافتراضية:
متغير CSSالافتراضيالوصف
--gorbit-primary#1c1c1cالأزرار، اللمسات
--gorbit-primary-hover#000000حالة التمرير
--gorbit-background#e9e9e9خلفية العنصر
--gorbit-text#000000bfالنص (شفافية 75%)
--gorbit-text-light#ffffffنص أبيض على داكن
--gorbit-border#00000033الحدود (شفافية 20%)
التجاوز عبر السمات: 
<gorbit-chat-widget
  primary-color="#FF6B35"
  background-color="#FFFFFF"
  text-color="#1A1A1A"
>
</gorbit-chat-widget>

​
البنية

يتواصل العنصر مباشرة مع واجهة Gorbit الخلفية باستخدام أحداث مرسلة من الخادم (SSE) لاستجابات البث في الوقت الفعلي: تحميل العنصر - حزمة JavaScript خفيفة الوزن تهيئ مكون الويب إنشاء الجلسة - ينشئ العنصر جلسة محادثة عبر واجهة برمجة تطبيقات Gorbit المستخدم يرسل رسالة - يُرسل الطلب إلى واجهة Gorbit الخلفية استجابة البث - استجابة الذكاء الاصطناعي تتدفق في الوقت الفعلي عبر SSE عرض Markdown - يتم تنسيق الاستجابات مع دعم markdown كامل

​
دعم المتصفح

  • Chrome/Edge 90+ (Chromium)
  • Firefox 90+
  • Safari 15+
  • Mobile Safari (iOS 15+)
  • Mobile Chrome (Android)

​
النشر

للحصول على تعليمات نشر مفصلة، بما في ذلك إعداد الاستضافة الذاتية وأفضل ممارسات أمان مفتاح API، انظر دليل نشر عنصر الويب.
تحتاج مساعدة في الإعداد؟ تواصل مع مسؤول Gorbit لتكوين مفتاح API أو المساعدة في النشر.