تخصيص أدوات الدردشة المباشرة لتطبيقات الأجهزة المحمولة

لديك خياران لدمج المراسلة في تطبيق الهاتف المحمول الأصلي:

  • استخدم مجموعات تطوير برامج الهاتف المحمول الأصلية (SDKs) لنظامي التشغيل iOS و Android
  • استخدام عنصر واجهة مستخدم الويب داخل WebView

نوصي بشدة باستخدام حزم SDK الأصلية للجوال لأنها توفر دعما وأداء فائقين للميزات.

التكامل مع حزم SDK للأجهزة المحمولة في Dynamics 365 Contact Center

تتم استضافة حزم SDK للجوال ووثائقها على GitHub:

تحتوي مجموعات SDK على:

  • مثال على التطبيق لمساعدتك على البدء
  • واجهة مراسلة جاهزة للتكوين
  • مجموعة كاملة من وظائف دورة حياة المراسلة لدمج واجهة مستخدم مراسلة مخصصة، إذا رغبت في ذلك
  • دعم الإشعارات الفورية باستخدام Azure Notification Hub

نوصي باستخدام الدردشة المصادق عليها والمستمرة مع حزم SDK للمراسلة. يوفر هذا أفضل تجربة للعملاء لأنماط استخدام الهاتف المحمول.

إشعار

يتم تصميم الواجهة الجاهزة بصريا من خلال التعليمات البرمجية في التطبيق الخاص بك بدلا من مركز الإدارة.

عرض أداة الدردشة المباشرة باستخدام التعليمات البرمجية المضمنة

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

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

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

var html: String = """
        <html>
            <head>
                <meta http-equiv="no-cache">
                <meta http-equiv="Expires" content="-1">
                <meta http-equiv="Cache-Control" content="no-cache">
                <script 
                    type="text/javascript"
                    src = "Use src from widget code snippet"
                    id = Microsoft_Omnichannel_LCWidget
                    data-app-id = "Use data-app-Id from widget code snippet"
                    data-org-id = "Use data-org-Id from widget code snippet"
                    data-org-url = "Use data-org-url from widget code snippet"
                    data-render-mobile = "true"
                    data-hide-chat-button = "true"
                    data-color-override = "desired color code eg. #008577">
                </script>
            </head>
            <body>
            </body>
        </html>
    """.trimIndent()
    var baseUrl: String = "Get baseUrl from data-org-url eg. https://oc-cdn-ocprod.azureedge.net"
    chatWebView.loadDataWithBaseURL(baseUrl,html, "text/html", null, baseUrl)

يستخدم عنصر واجهة مستخدم الدردشة التخزين المحلي لإدارة حالته. لكي تتمكن أداة الدردشة من الوصول إلى التخزين المحلي على Android ، تحتاج إلى تكوين إذن في الرمز الأصلي.

chatWebView = findViewById(R.id.webview)
webSettings = webView.getSettings();
webSettings.setDomStorageEnabled(true);

يمكنك تحسين عرض أداة الدردشة لتجربة الويب للجوال باستخدام علامات البيانات مثل data-hide-chat-button و data-render-mobile، إلى جانب بعض واجهات برمجة التطبيقات والأحداث التي توفرها SDK لعميل أداة الدردشة المباشرة. مزيد من المعلومات: تخصيص أداة محادثة باستخدام علامات البيانات

لفتح جلسة دردشة، يمكنك استدعاء طريقة startChat عند تحديد زر الدردشة الجديد.

chatWebView.evaluateJavascript(
    "Microsoft.Omnichannel.LiveChatWidget.SDK.closeChat();",
    null
)

يمكنك استخدام data-render-mobile علامة البيانات لتحسين عرض أداة الدردشة المباشرة على الأجهزة الجوالة. على سبيل المثال، يخفي رأس أداة الدردشة. إلى جانب الرأس، يختفي زر الإغلاق (X) أيضا. لإغلاق الدردشة ، يجب عليك إنشاء زر "إنهاء الدردشة" في تطبيق الهاتف المحمول واستدعاء طريقة closeChat في حدث النقر.

chatWebView.evaluateJavascript(
    "Microsoft.Omnichannel.LiveChatWidget.SDK.closeChat();", null)

تغطي التعليمات البرمجية السابقة السيناريو الذي ينهي فيه مستخدم تطبيق الأجهزة المحمولة الدردشة. ومع ذلك، في سيناريو آخر، حيث ينهي الوكيل المحادثة، يمكنك الاستماع إلى الحدث lcw:threadUpdate واستدعاء أسلوب closeChat لإنهاء المحادثة من جانب العميل، كما هو موضح في التعليمات البرمجية التالية.

chatWebView.evaluateJavascript(
    "window.addEventListener(\"lcw:threadUpdate\", function(){Microsoft.Omnichannel.LiveChatWidget.SDK.closeChat();})", null)

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

إشعار

لا يتم دعم ميزات أداة الدردشة المباشرة مثل التصعيد إلى الصوت والفيديو وتنزيل نص الدردشة من خلال عرض الويب.

مرجع SDK للدردشة الفورية
تطوير أدوات الدردشة المباشرة المخصصة
startChat
closeChat
lcw:chatRetrieved
lcw:chatQueued
تخصيص أدوات الدردشة المباشرة باستخدام علامات البيانات

  • Last updated on