تثبيت SDK

"أرسل معلومات إضافية حول المستخدم إلى نظام بيفاتيل باستخدام SDK موقع بيفاتيل لتعزيز التفاعل مع العملاء وتخصيص الواجهة."

إرسال معلومات إلى بيفاتيل

المعلومات الإضافية حول جهة الاتصال دائما مفيدة. يضمن SDK موقع بيفاتيل أن يمكنك إرسال معلومات إضافية تمتلكها حول مستخدم. إذا كنت قد قمت بتثبيت رمز بيفاتيل على موقعك الإلكتروني، سيكشف SDK عن window.$bevatel.

للتأكد من أن SDK قد تم تحميله بشكل كامل، يرجى التأكد من الاستماع إلى حدث "bevatel:ready" على النحو التالي:

window.addEventListener("bevatel:ready", function () {
  // Use window.$bevatel here
  // ...
});

إذا كنت ترغب في الاستماع إلى الرسائل في الواجهة، يمكنك استخدام الحدث التالي.

window.addEventListener("bevatel:on-message", function (e) {
  console.log("bevatel:on-message", e.detail);
});

SDK إعدادات​

لإخفاء النافذة، يمكنك استخدام الإعداد المذكور أدناه.

ملحوظة: إذا قمت باستخدام هذا، فسيتعين عليك أيضًا تشغيل الودجت.

window.bevatelSettings = {
  hideMessageBubble: false,
  position: "left", // This can be left or right
  locale: "en", // Language to be set
  useBrowserLanguage: false, // Set widget language from user's browser
  baseDomain: '.mydomain.com'
  type: "standard", // [standard, expanded_bubble]
  darkMode: "auto", // [light, auto]
};

للمحافظة على جلسات الدردشة عبر النطاقات الفرعية، استخدم تكوين baseDomain.​

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

تنفيذ الإعدادات​

أضف تهيئة baseDomain إلى window.bevatelSettings.

window.bevatelSettings = {
  //other settings
  baseDomain: ".yourdomain.com",
};

قم بتبديل "yourdomain.com" بنطاقك، واحتفظ بالنقطة السابقة.

ملاحظات

• يجب ضبط التأكد من SSL لجميع النطاقات الفرعية.

• التهيئة ينطبق على النطاقات الفرعية، وليس على نطاقات مختلفة.

على سبيل المثال:

baseDomain: '.bevatel.com'

استخدام لغة المتصفح في ودجت اللايف تلقائيًا.

لعرض ودجت اللايف بلغة المتصفح الخاصة بالمستخدم، ضع useBrowserLanguage على القيمة true في window.bevatelSettings المذكورة أعلاه.

ملحوظة: إذا تم ضبط useBrowserLanguage على القيمة true، سيتم تجاهل اللغة المحددة.

إذا لم تكن لغة المتصفح مدعومة بواسطة Bevatel، سيتم استخدام اللغة المحددة تحت locale. إذا كانت تلك أيضًا مفقودة، سيتم الاستناد إلى لغة لوحة تحكم الموظف.

نظام التعتيم​

قد أضيفت دعم وضع الظلام لودجت اللايف شات في بيفاتيل ابتداءً من الإصدار 2.4.0. لتمكين وضع الظلام، اتبع الخطوات المذكورة. هنا

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

بيفاتيل تدعم تصميمين للودجت.

1. أساسي (افتراضي)

1. Expanded bubble

إذا كنت تستخدم بوب آب، يمكنك تخصيص النص المستخدم في الفقاعة عن طريق تعيين معلمة launcherTitle في BevatelSettings كما هو موضح أدناه.

window.bevatelSettings = {
  type: "expanded_bubble",
  launcherTitle: "Chat with us",
};

تفعيل نافذة البوب أب آوت​

لتمكين نافذة البوب ​​آوت، أضف التهيئة التالية إلى bevatelSettings. تكون هذه الخيارات معطلة بشكل افتراضي.

window.bevatelSettings = {
  // ...Other Config
  showPopoutButton: true,
}

You can also pop out the chat window programmatically with the `popoutChatWindow()` method.

فتح البوب أب برمجيًا

يمكنك فتح نافذة البوب ​​آوت برمجياً باستخدام الطريقة popoutChatWindow(). لتفعيل ذلك، استخدم الطريقة التالية.

window.$bevatel.popoutChatWindow();

تغيير رؤية بوب أب الودجت.

إذا كنت ترغب في إخفاء/إظهار فقاعة ودجت بيفاتيل، يمكنك فعل ذلك بواسطةtoggleBubbleVisibility('show/hide')

مثال

window.$bevatel.toggleBubbleVisibility("show"); // to display the bubble
window.$bevatel.toggleBubbleVisibility("hide"); // to hide the bubble

تنشيط الويدجت دون عرض الفقاعة.

window.$bevatel.toggle();

// Toggle widget by passing state
window.$bevatel.toggle("open"); // To open widget
window.$bevatel.toggle("close"); // To close widget

إضافة المستخدم في الواجهة

window.$bevatel.setUser("<unique-identifier-key-of-the-user>", {
  email: "<[e-mail]>",
  name: "<name-of-the-user>",
  avatar_url: "<avatar-url-of-the-user>",
  phone_number: "<phone-number-of-the-user>",
});

setUser يقبل معرف يمكن أن يكون user_id في قاعدة البيانات الخاصة بك أو أي معلمة فريدة تمثل مستخدم. يمكنك تمرير البريد الإلكتروني، الاسم، عنوان الصورة الشخصية (avatar_url)، ورقم الهاتف كمعلمات.

الدعم لمعلمات إضافية في التنفيذ. تأكد من إعادة تعيين الجلسة عندما يقوم المستخدم بتسجيل الخروج من تطبيقك.

​ التحقق من الهوية باستخدام HMAC

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

window.$bevatel.setUser(`<unique-identifier-key-of-the-user>`, {
  name: "", // Name of the user
  avatar_url: "", // Avatar URL
  email: "", // Email of the user
  identifier_hash: "", // Identifier Hash generated based on the webwidget hmac_token
  phone_number: "", // Phone Number of the user
  description: "", // description about the user
  country_code: "", // Two letter country code
  city: "", // City of the user
  company_name: "", // company name
  social_profiles: {
    twitter: "", // Twitter user name
    linkedin: "", // LinkedIn user name
    facebook: "", // Facebook user name
    github: "", // Github user name
  },
});

لإنشاء HMAC، اقرأ التحقق من الهوية

يرجى ملاحظة أن تنفيذ التحقق بواسطة HMAC سيتيح لسجل المحادثة الاستمرار عبر الجلسات.

تعيين سمات جهة الاتصال​

لجهات الاتصال​

لتعيين معلومات إضافية حول العميل، يمكنك استخدام حقل سمات العميل المخصصة. اقرأ المزيد حول السمات المخصصة من هنا.

لتعيين سمات مخصصة، setCustomAttributes على النحو التالي:

window.$bevatel.setCustomAttributes({
  accountId: 1,
  pricingPlan: "paid",

  // Here the key which is already defined in custom attribute
  // Value should be based on type (Currently support Number, Date, String and Number)
});

يمكنك عرض هذه المعلومات في اللوحة الجانبية للمحادثة. لحذف سمة مخصصة، استخدم deleteCustomAttribute كما يلي:

window.$bevatel.deleteCustomAttribute("attribute-key");

للمحادثات​

يمكنك أيضًا تعيين سمات مخصصة للمحادثة النشطة من خلال SDK. لتعيين السمات المخصصة، استخدم setConversationCustomAttributes على النحو التالي:

window.$bevatel.setConversationCustomAttributes({
  productName: "iPhone",
  productCategory: "Smartphone",
});

يمكنك عرض هذه المعلومات في اللوحة الجانبية للمحادثة. لحذف سمة مخصصة، استخدم deleteConversationCustomAttribute كما يلي:

window.$bevatel.deleteConversationCustomAttribute("productName");

تثبيت اللغة بشكل يدوي​

window.$bevatel.setLocale("en");

لتعيين اللغة يدويًا، استخدم وظيفة setLocale.

إعداد علامات بالمحادثة​

يرجى ملاحظة أن العلامات سيتم إضافتها على محادثة إذا لم يبدأ المستخدم محادثة. في هذه الحالة، فإن العناصر التالية لن تكون لها أي تأثير:

window.$bevatel.setLabel("support-ticket");

window.$bevatel.removable("support-ticket");

تحديث الجلسة (استخدم هذا عند تسجيل خروج للمستخدم من تطبيقك).​

window.$bevatel.reset();

أخطاء الويدجت​

للاطلاع على أي أخطاء في الواجهة، يرجى التأكد من الاستماع إلى حدث "bevatel:event" على النحو التالي:

window.addEventListener("bevatel:error", function () {
  // ...
});

Note: This feature is available in v2.3.0 or later.