تطوير عنصر واجهة مستخدم دردشة مباشر مخصص

توفر Microsoft خيارا لإنشاء عنصر واجهة مستخدم دردشة مباشر مخصص يمكنك إرفاقه بحساب Dynamics 365 Customer Service. يمكن تخصيص كل مكون من عناصر واجهة مستخدم الدردشة المباشرة المخصصة لكل من الوظائف وواجهة المستخدم.

اعتمادا على متطلباتك ونتائجك، يمكنك تخصيص عنصر واجهة مستخدم الدردشة باستخدام أحد الخيارات التالية:

• استخدام عنصر واجهة مستخدم الدردشة المباشرة القابل للتخصيص 2.0
• تطوير عنصر واجهة المستخدم الخاص بك

استخدام عنصر واجهة مستخدم الدردشة المباشرة القابل للتخصيص 2.0

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

تم إنشاء عنصر واجهة مستخدم الدردشة المباشرة الجديد 2.0 على Omnichannel Chat SDK ومكتبة مكونات واجهة مستخدم عنصر واجهة مستخدم الدردشة المباشرة.

مطور المدخل - تخصيص واجهة المستخدم المستندة إلى البرنامج النصي الجاهز

يتيح لك خيار مطور المدخل تخصيص واجهة مستخدم عنصر واجهة مستخدم الدردشة ولكنه لا يعدل إعدادات الوظائف الجاهزة في مركز إدارة خدمة Copilot. للتخصيص، يمكنك استخدام البرنامج النصي "تخصيص البيانات-رد الاتصال" الذي يربط عنصر واجهة المستخدم الجاهز بوظيفة JavaScript. يمكن أن تحتوي الدالة على تخصيصات تصميم CSS لمكونات الدردشة بنفس السوابق مثل مكتبة مكونات واجهة مستخدم عنصر واجهة مستخدم الدردشة المباشرة Omnichannel.

تحرير البرنامج النصي لعنصر واجهة مستخدم الدردشة المباشرة لتمكين عنصر واجهة مستخدم الدردشة المباشرة 2.0

لاستخدام عنصر واجهة مستخدم الدردشة المباشرة 2.0 والتخصيص المستند إلى البرنامج النصي، قم بتعديل القصاصة البرمجية لعنصر واجهة مستخدم الدردشة المباشرة الجاهز 2.0 كما يلي.

1. في مركز إدارة خدمة Copilot، افتح مسار عمل الدردشة، وحدد Copy Live Chat Widget 2.0 Script لنسخ مقتطف التعليمات البرمجية.
2. إنشاء دالة JavaScript جديدة مع تصميم كافة المكونات. مزيد من المعلومات: عنصر واجهة مستخدم الدردشة Omnichannel
3. أضف "v2" بعد سمة البرنامج النصي.
4. إضافة "data-customization-callback" والإشارة إلى دالة JavaScript.

ستبدو القصاصة البرمجية المحدثة كما يلي.

مثال على لقطة شاشة لعنص واجهة مستخدم الدردشة 2.0 الذي تم تخصيصه لزيادة حجمه كما يلي.

شاهد فيديو المعاينة لإعداد عنصر واجهة مستخدم الدردشة المباشرة.

استخدام تنسيق مشاركة الويب لتخصيص عنصر واجهة المستخدم

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

تطوير عنصر واجهة المستخدم الخاص بك

استخدم المعلومات الموجودة في الأقسام التالية لإنشاء عنصر واجهة المستخدم الخاص بك.

مكتبة مكونات واجهة مستخدم عنصر واجهة مستخدم الدردشة المباشر ل Omnichannel

توفر مكتبة مكونات واجهة مستخدم عنصر واجهة مستخدم الدردشة المباشر Omnichannel إطار عمل لمكونات React القابلة لإعادة الاستخدام. يتم إنشاء المكونات باستخدام مكتبة Fluent UI. تعرف على المزيد حول مكتبة مكونات واجهة مستخدم عنصر واجهة مستخدم الدردشة المباشرة Omnichannel.

Omnichannel Chat SDK

إن Omnichannel Chat SDK عبارة عن حزمة مفتوحة المصدر توفر أساليب وميزات الدردشة لإضافة وظائف إلى عنصر واجهة مستخدم الدردشة المباشرة. تعرف على المزيد حول Omnichannel Chat SDK.

تخصيص عنصر واجهة مستخدم الدردشة المباشرة

بعد تثبيت أحدث إصدار من Omnichannel Chat SDK، قم بتخصيص عنصر واجهة مستخدم الدردشة المباشرة باستخدام أساليب Omnichannel Chat SDK وعن طريق تحرير أنماط CSS الأساسية لمكونات واجهة مستخدم عنصر واجهة مستخدم الدردشة المباشرة Omnichannel.

‏‫ملاحظة

يعد SDK لدردشة قناة متعددة الاتجاهات شرطا أساسيا لتثبيت مكتبة مكونات واجهة مستخدم عنصر واجهة مستخدم الدردشة المباشرة Omnichannel.

المعلومات ذات الصلة

تخصيص عناصر واجهة مستخدم الدردشة الحية لتطبيقات الجوال
startChat
closeChat
lcw:closeChat
lcw:threadUpdate
lcw:chatRetrieved
lcw:chatQueued