محادثة الويب لـ Clawdbot

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

نظرة عامة على محادثة الويب لـ Clawdbot

تتيح لك محادثة الويب تضمين واجهة دردشة على أي موقع إلكتروني، مما يمكّن الزوار من التفاعل مع مساعد Clawdbot الخاص بك مباشرة من متصفحهم.

الميزات

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

البدء السريع

تمكين محادثة الويب

{
  "web": {
    "webchat": {
      "enabled": true,
      "path": "/chat"
    }
  }
}

تضمين الأداة

إضافة إلى موقعك:

<script src="https://your-gateway.com/webchat.js"></script>
<script>
  ClawdbotChat.init({
    gateway: 'wss://your-gateway.com',
    theme: 'light'
  });
</script>

التكوين

إعدادات محادثة الويب

{
  "web": {
    "webchat": {
      "enabled": true,
      "title": "Chat with AI",
      "placeholder": "Type your message...",
      "welcomeMessage": "Hello! How can I help you today?"
    }
  }
}

خيارات الأداة

الخيارالافتراضيالوصف
positionbottom-rightموقع الأداة
width400pxعرض نافذة الدردشة
height600pxارتفاع نافذة الدردشة
buttonSize60pxحجم زر التشغيل

التخصيص

السمات

{
  "webchat": {
    "theme": {
      "primary": "#007bff",
      "background": "#ffffff",
      "text": "#333333",
      "userBubble": "#007bff",
      "botBubble": "#f0f0f0"
    }
  }
}

CSS مخصص

{
  "webchat": {
    "customCSS": "/path/to/custom.css"
  }
}

العلامة التجارية

{
  "webchat": {
    "logo": "/path/to/logo.png",
    "botAvatar": "/path/to/avatar.png",
    "botName": "Assistant"
  }
}

واجهة برمجة الأداة

واجهة JavaScript

// فتح الدردشة
ClawdbotChat.open();

// إغلاق الدردشة
ClawdbotChat.close();

// تبديل الدردشة
ClawdbotChat.toggle();

// إرسال رسالة برمجياً
ClawdbotChat.send("Hello!");

// تعيين معلومات المستخدم
ClawdbotChat.setUser({
  id: "user123",
  name: "John",
  email: "[email protected]"
});

الأحداث

ClawdbotChat.on('open', () => {
  console.log('Chat opened');
});

ClawdbotChat.on('close', () => {
  console.log('Chat closed');
});

ClawdbotChat.on('message', (msg) => {
  console.log('New message:', msg);
});

إدارة الجلسات

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

{
  "webchat": {
    "session": {
      "persist": true,
      "storage": "localStorage",
      "expiry": 86400000
    }
  }
}

زائر مقابل مصادق

{
  "webchat": {
    "auth": {
      "required": false,
      "methods": ["guest", "oauth"]
    }
  }
}

الأمان

تكوين CORS

{
  "webchat": {
    "cors": {
      "origins": ["https://yourdomain.com"]
    }
  }
}

تحديد المعدل

{
  "webchat": {
    "rateLimit": {
      "messages": 10,
      "window": 60000
    }
  }
}

دعم الهاتف المحمول

التصميم المتجاوب

تتكيف محادثة الويب تلقائياً مع شاشات الهاتف:

  • ملء الشاشة على الهاتف
  • واجهة صديقة للمس
  • التعامل مع لوحة المفاتيح

تكوين الهاتف المحمول

{
  "webchat": {
    "mobile": {
      "fullScreen": true,
      "hideOnKeyboard": false
    }
  }
}

التحليلات

تتبع الاستخدام

{
  "webchat": {
    "analytics": {
      "enabled": true,
      "events": ["open", "close", "message"]
    }
  }
}

الخطوات التالية