نظرة عامة

تتيح لك ميزة تخطيط سطح المكتب تكوين Webex Contact Center Desktop وفقا لمتطلبات عملك. يمكنك تخصيص عناصر مثل الشعار والعنوان والأدوات. يمكنك إنشاء تخطيط سطح مكتب وتعيينه لفريق. ينشئ هذا التخطيط تجربة الوكيل على سطح المكتب لجميع الوكلاء الذين يقومون بتسجيل الدخول كجزء من هذا الفريق.

هناك نوعان من التخطيطات:

  • التخطيط العام: هذا التخطيط عبارة عن تخطيط تم إنشاؤه بواسطة النظام ويتم تعيينه افتراضيا عند إنشاء فريق. لمزيد من المعلومات، راجع إدارة الفرق. عند إنشاء فريق، يتم تعيين التخطيط العام تلقائيا كتخطيط سطح المكتب للفريق. لا يمكنك حذف هذا التخطيط.

  • تخطيط مخصص: تخطيط يوفر تجربة سطح مكتب مخصصة. يمكنك إنشاء تخطيط مخصص لفريق واحد أو أكثر.

إذا قمت بتعيين تخطيط سطح مكتب جديد عند تسجيل دخول أحد العاملين، فيجب على العامل إعادة تحميل الصفحة لرؤية التخطيط الجديد.

يدعم سطح مكتب مركز اتصال Webex ثلاثة أشخاص:

  • الوكيل

  • مشرف

  • مشرف ووكيل

يحتوي ملف تخطيط JSON على أقسام منفصلة لكل شخصية. يجب على المسؤول تكوين الإعدادات لكل شخصية في القسم المقابل من ملف تخطيط JSON. لمزيد من المعلومات حول نموذج ملف تخطيط JSON، راجع خصائص المستوى الأعلى لتخطيط JSON.

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

إذا كنت تستخدم ملف سطح المكتب الافتراضي Layout.json دون أي تعديل ، اعتباره تخطيطا غير معدل. ومع ذلك، إذا قمت بتنزيل ملف "سطح المكتب Layout.json الافتراضي" وتحميله مرة أخرى، اعتباره تخطيطا معدلا حتى إذا لم يتم تعديل محتوى الملف أو اسم الملف.

في سطح المكتب، يوجد نوعان من عناصر واجهة المستخدم—المستندة إلى iframe والمستندة إلى مكونات الويب. الرأس والتنقل (صفحة مخصصة) والمنطقة الثابتة ومنطقة مقطوعة الرأس ولوحة aux هي المنطقة القابلة للتخصيص في سطح المكتب. هذه ليست عناصر واجهة مستخدم.

توضح القائمة التالية تفاصيل المسافات التي يمكنك تكوينها. توضح الصور تخطيط سطح المكتب:

  1. منطقة العنوان والشعار: تعرض هذه المساحة شعار مركز اتصال Webex واسمه (افتراضي) في الزاوية العلوية اليمنى من الشاشة.

  2. منطقة الرأس الأفقية: تحتوي هذه المساحة على منطقة قابلة للتكوين يتم ملؤها بعناصر واجهة مستخدم مخصصة. يمكن أن تعرض عناصر واجهة المستخدم هذه، على سبيل المثال، معلومات مضمنة وقوائم منسدلة. نظرا لأن ارتفاع هذا الرأس يبلغ 64 بكسل فقط ، لا يمكن أن يتجاوز ارتفاع عنصر واجهة المستخدم ارتفاع الرأس.

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

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

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

  4. منطقة شريط التنقل: استخدم هذه المساحة لإضافة عناصر تنقل للوصول إلى الصفحات المخصصة.

Sample Webex Contact Center Desktop user interface for voice, showing the areas that are customizable including page icons, page labels, page level widgets, tab icons, tab labels, table level widgets, logo, title, drag and drop/resize/maximize/minimize ability, header customization, and other header widgets.
نموذج واجهة مستخدم سطح المكتب للصوت
Sample Webex Contact Center Desktop user interface for new digital channels, showing the areas that are customizable including page icons, page labels, page level widgets, tab icons, tab labels, table level widgets, logo, title, drag and drop/resize/maximize/minimize ability, header customization, and other header widgets.
نموذج واجهة مستخدم سطح المكتب للقنوات الرقمية الجديدة

خصائص المستوى الأعلى لتخطيط JSON

ادوار

يحتوي تخطيط JSON الافتراضي على الأدوار الثلاثة التالية.

  • الوكيل—لتعيين تخطيط سطح المكتب ليتم عرضه عندما يقوم أحد الوكلاء بتسجيل الدخول إلى Webex Contact Center Desktop للتعامل مع أنشطة العامل.

  • المشرف—لتعيين تخطيط سطح المكتب ليتم عرضه عندما يقوم المشرف بتسجيل الدخول إلى Webex Contact Center Desktop للتعامل مع إمكانات المشرف فقط.

    عندما يقوم المشرف بتسجيل الدخول إلى سطح المكتب، يتم تطبيق تخطيط سطح المكتب المحدد للفريق الأساسي. إذا لم تقم بتوفير فريق أساسي، تطبيق التخطيط العام. بشكل افتراضي، APS يتم تعطيل التقارير.

  • supervisorAgent—لتعيين تخطيط سطح المكتب ليتم عرضه عندما يقوم المشرف بتسجيل الدخول إلى Webex Contact Center Desktop للتعامل مع كل من إمكانات المشرف وأنشطة العامل.

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

فيما يلي خصائص المستوى الأعلى لتخطيط JSON استنادا إلى الدور:

{ "الوكيل": { "الإصدار": "0.1.0"، "appTitle": "Webex مركز الاتصال"، "الشعار": ""، "taskPageIllustration": "https://www.abc.com/image/logo.jpg"، "stopNavigateOnAcceptTask": خطأ، "dragDropEnabled": خطأ، "notificationTimer": 8، "maximumNotificationCount": 3، "browserNotificationTimer": 8، "wxmConfigured": false، "desktopChatApp": { "webexConfigured": false، } "headerActions": ["outdial"، "notification"]، "area": { "advancedHeader": { ... } ، "لوحة": { ... } ، "الملاحة": { ... } ، "مستمر": { ... } ، "مقطوعة الرأس": { ... } }, }, "المشرف": { "الإصدار": "0.1.0", "appTitle": "Webex مركز الاتصال", "الشعار": """، "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": خطأ, "dragDropEnabled": خطأ, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... } ، "لوحة": { ... } ، "الملاحة": { ... } ، "مستمر": { ... } ، "مقطوعة الرأس": { ... }، "الصفحة الرئيسية": { ... } }, } "supervisorAgent": { "الإصدار": "0.1.0", "appTitle": "Webex Contact Center", "logo": "", "taskPageIllustration": "https://www.abc.com/image/logo.jpg", "stopNavigateOnAcceptTask": false, "dragDropEnabled": false, "notificationTimer": 8, "maximumNotificationCount": 3, "browserNotificationTimer": 8, "wxmConfigured": false, "desktopChatApp": { "webexConfigured": false, } "headerActions": ["outdial", "notification"], "area": { "advancedHeader": { ... } ، "لوحة": { ... } ، "الملاحة": { ... } ، "مستمر": { ... } ، "مقطوعة الرأس": { ... } }, } },
  • تسري التغييرات التي تم إجراؤها على خصائص تخطيط JSON عند تحديث مستعرض سطح المكتب.
  • في حالة عدم توفر الميزة التي قمت بتمكينها في تخطيط JSON على سطح المكتب، اتصل بدعم Cisco لتمكين الميزة.
  • جميع الخصائص في تخطيط JSON حساسة لحالة الأحرف.

عنوان التطبيق

لتحديد عنوان على الرأس الأفقي لسطح المكتب. العنوان الافتراضي هو Webex مركز الاتصال.

مثال:

"appTitle": "مركز اتصال Webex"

يتم تغيير عنوان التطبيق الافتراضي من سطح مكتب مركز الاتصال إلى Webex مركز الاتصال. لا يوجد أي تأثير على التخطيطات المخصصة الموجودة التي تستخدم عنوان التطبيق الافتراضي القديم (سطح مكتب مركز الاتصال). لاستخدام عنوان التطبيق الجديد، يجب تعديل التخطيط المخصص. ومع ذلك، يستخدم التخطيط العام الجديد عنوان التطبيق الافتراضي على النحو التالي Webex مركز الاتصال.

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

يمكنك إما استخدام عناوين URI للبيانات (معرف الموارد الموحد) أو استضافة صورة عنوان مخصصة على شبكة توصيل المحتوى (CDN) أو حاوية Amazon Web Services (AWS) خدمة التخزين البسيطة (S3) أو خدمة استضافة مماثلة، ثم تحديد عنوان URL للصورة المستضافة. تنسيقات صور العنوان المدعومة هي PNG وJPG وJPEG وGIF وSVG وWebP. حجم صورة العنوان المدعومة هو 184 × 32 بكسل (العرض × الارتفاع).

الشعار

لتحديد عنوان URL لشعار الشركة. إذا لم تقم بتوفير عنوان URL، فسيظهر شعار Webex Contact Center افتراضيا.

مثال:

"الشعار": "https://my-cdn.com/logo.png"

يمكنك استضافة صورة شعار مخصصة على CDN أو حاوية Amazon Web Services (AWS) Simple Storage Service (S3) أو خدمة استضافة مماثلة، ثم تحديد عنوان URL للصورة المستضافة. تنسيقات صور الشعار المدعومة هي PNG وJPG وJPEG وGIF وSVG وWebP. حجم صورة الشعار المدعوم هو 96 × 32 بكسل (العرض × الارتفاع).

الجدول 1. مصفوفة العرض للتطبيق العنوان والشعار استنادا إلى تكوين تخطيط سطح المكتب
الحالة مثال عنوان التطبيق الشعار
إذا لم يتم تكوين appTitle والشعار
"appTitle": "", "logo": "", 
لا يوجد عنوان الشعار الافتراضي
إذا تم تكوين عنوان التطبيق والشعار
"appTitle": "شركة ABC"، "الشعار": "https://my-cdn.com/abclogo.png"، 
النص المكون شعار تم تكوينه
إذا تم تكوين appTitle ولم يتم تكوين الشعار
"appTitle": "شركة ABC"، "الشعار": ""، 
النص المكون الشعار الافتراضي

إذا لم يتم تكوين appTitle وتكوين الشعار

"appTitle": "", "logo": "https://my-cdn.com/abclogo.png", 
لا يوجد عنوان شعار تم تكوينه
إذا تم تكوين appTitle ولم يكن الشعار مفضلا
"appTitle": "شركة ABC"، "الشعار": "بدون شعار"، 
النص المكون لا يوجد شعار

إذا لم يتم تكوين appTitle ولم يكن الشعار مفضلا

"appTitle": "", "logo": "no-logo", 
لا يوجد عنوان لا يوجد شعار
إذا تمت إضافة appTitle كصورة وتم تكوين الشعار
"appTitle": "https://my-cdn.com/abccompanylogo.png "، "الشعار": "https://my-cdn.com/abclogo.png" ، 
صورة تم تكوينها شعار تم تكوينه

إذا تمت إضافة appTitle كصورة ولم يتم تكوين الشعار

"appTitle": "https://my-cdn.com/abccompanylogo.png ", "logo": "", 
صورة تم تكوينها الشعار الافتراضي

إذا تمت إضافة appTitle كصورة ولم يكن الشعار مفضلا

"appTitle": "https://my-cdn.com/abccompanylogo.png "، "الشعار": "بدون شعار" ، 
صورة تم تكوينها لا يوجد شعار
  • يتم ضبط حجم الصورة المخصص بناء على نسبة العرض إلى الارتفاع. قد يظهر نص العنوان المخصص الذي تم تكوينه مسبقا في صفين على سطح المكتب. لتجنب ذلك، يمكنك تعديل نص العنوان المخصص.
  • إذا لم يتم تكوين العنوان والشعار في الرأس الأفقي لسطح المكتب، استخدام هذه المساحة بواسطة عناصر واجهة المستخدم الخاصة بالرأس. يجب تكوين عناصر واجهة المستخدم الخاصة بالرأس بشكل صحيح لاستخدام مساحة العنوان والشعار.
  • لا يمكن أن يتجاوز العنوان والشعار معا الحد الأقصى للعرض البالغ 304 بكسل (بما في ذلك الحشو). إذا كان عرض الشعار أقل من 96 بكسل، فيمكن استخدام العرض المتبقي للعنوان.
  • إذا كان حجم الصورة المخصص أعلى من الحجم المدعوم، يتم ضبط حجم الصورة استنادا إلى نسبة العرض إلى الارتفاع في الرأس الأفقي. إذا كان حجم الصورة المخصص أقل من الحجم المدعوم، يتم الاحتفاظ بحجم الصورة الفعلي في الرأس الأفقي.

taskPageIllustration

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

مثال:

"taskPageIllustration": "https://www.abc.com/image/logo.jpg"،

يمكنك إما استخدام عناوين URI للبيانات أو استضافة رسم توضيحي مخصص على شبكة توصيل المحتوى (CDN) أو حاوية Amazon Web Services (AWS) Simple Storage Service (S3) أو خدمة استضافة مماثلة، ثم تحديد عنوان URL للرسم التوضيحي المستضاف. يمكن تكوين الرسم التوضيحي على المستوى العام أو مستوى الفريق استنادا إلى تعريف التخطيط. تأكد من تكوين عنوان URL الصحيح لمنع عرض الصورة المكسورة على سطح المكتب.

تنسيقات الرسم التوضيحي لصفحة المهام المدعومة هي PNG وJPG وJPEG وGIF وSVG وWebP. حجم الرسم التوضيحي الموصى به هو 400 × 400 بكسل (العرض × الارتفاع). إذا كان حجم الرسم التوضيحي المخصص أكبر من الحجم الموصى به، يتم ضبط حجم الرسم التوضيحي استنادا إلى نسبة العرض إلى الارتفاع في صفحة المهمة. إذا كان حجم الرسم التوضيحي المخصص أصغر من الحجم الموصى به، يتم الاحتفاظ بحجم الرسم التوضيحي الفعلي في صفحة المهمة.

Webex Contact Center interface example of a custom illustration retraining the actual size.
مثال نموذجي لرسم توضيحي مخصص يحتفظ بالحجم الفعلي
Webex Contact Center interface example of a custom illustration adjusted based on the aspect ratio.
مثال نموذجي لرسم توضيحي مخصص تم تعديله استنادا إلى نسبة العرض إلى الارتفاع

إيقافنافيجيتأونقبولالمهمة

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

مثال:

"stopNavigateOnAcceptTask": false

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

على سبيل المثال، ضع في اعتبارك أن العميل 1 يجري محادثة مع العميل 1 وفي نفس الوقت يجري مكالمة صوتية مع العميل 2. أثناء المكالمة الصوتية، يقوم العامل 1 بتحديث تفاصيل العميل 2 في جزء التحكم في التفاعل. حاليا، لدى العامل 1 مهمتان نشطتان في جزء قائمة المهام، وينصب التركيز على جزء التحكم في التفاعل. عندما يقبل العامل 1 طلب دردشة جديد من العميل 3، يظل التركيز على جزء التحكم في التفاعل مع العميل 2 ولا ينتقل إلى طلب الدردشة المقبول حديثا.

للاحتفاظ بالتركيز على المهمة السابقة وعدم الانتقال إلى المهمة المقبولة حديثا، حدد التخطيط المخصص مع تعيين قيمة الخاصية stopNavigateOnAcceptTask إلى true.

إذا لم يتم إدخال قيمة خاصية stopNavigateOnAcceptTask في تخطيط JSON، يحول سطح المكتب التركيز إلى المهمة المقبولة حديثا. السلوك مشابه عندما يتم تعيين قيمة الخاصية stopNavigateOnAcceptTask إلى false.

  • ينطبق هذا الإعداد على جميع المهام (الصوتية والقنوات الرقمية) التي يتم تنفيذها على سطح المكتب—مثل قبول مهمة أو مؤتمر أو استشارة أو تحويل، وبالنسبة للمكالمات الخارجية ومكالمات الحملة الصادرة والإنهاء التلقائي وما إلى ذلك.
  • لا يتم تطبيق الإعداد إذا كان مستخدم سطح المكتب موجودا في الصفحة الرئيسية، مع عدم وجود مهمة نشطة في جزء قائمة المهام. في مثل هذه الحالة، عند قبول مهمة جديدة، يتم تحويل التركيز من الصفحة الرئيسية إلى المهمة المقبولة حديثا.

السحب دروب ممكن

لتمكين السحب والإفلات وتغيير حجم الأدوات في الصفحات المخصصة، قم بتعيين القيمة إلى true. القيمة الافتراضية هي false.

مثال:

"dragDropEnabled": خطأ

لمزيد من المعلومات حول تمكين ميزة السحب والإفلات لعلامات التبويب في جزء المعلومات المساعدة، راجع جزء المعلومات الإضافية.

مؤقت الإخطار

لتعيين المدة (بالثواني) التي يتم بعدها تجاهل إعلامات سطح المكتب على سطح المكتب تلقائيا. يظهر الإعلام في الزاوية العلوية اليسرى من سطح المكتب. قيمة المهلة الافتراضية هي 8 ثوان. النطاق الصالح لقيم المهلة هو من 1 إلى 10 ثوان. لكي تدخل تغييرات المهلة حيز التنفيذ، يجب تحديث المستعرض بعد إجراء التغييرات.

مثال:

"مؤقت الإخطار": 8

الحد الأقصىعدد الإشعارات

لتعيين عدد إعلامات سطح المكتب ليتم عرضها في وقت واحد على سطح المكتب. القيمة الافتراضية هي 3. نطاق إعلامات سطح المكتب هو 1-10. إعلامات سطح المكتب مكدسة. إذا كان هناك العديد من الإشعارات ، فإنها تظهر مع تأخير طفيف وفقا لإعدادات notificationTimer .

مثال:

"الحد الأقصى لعدد الإخطارات": 3

المتصفحNotificationTimer

لتعيين المدة (بالثواني) التي يتم بعدها رفض إشعارات محمصة المتصفح على سطح المكتب تلقائيا. Toaster هو إشعار مستعرض أصلي يظهر فقط إذا لم يكن سطح المكتب هو نافذة أو علامة تبويب المتصفح النشطة. تكون نافذة أو علامة تبويب مستعرض سطح المكتب غير نشطة عندما

  • أنت تعمل على نوافذ أو علامات تبويب متصفح أخرى.

  • أنت تعمل على تطبيقات أخرى.

  • لقد قمت بتصغير نافذة مستعرض سطح المكتب.

يظهر الإعلام في الزاوية العلوية اليسرى من سطح المكتب. قيمة المهلة الافتراضية هي 8 ثوان. النطاق الموصى به لقيم المهلة هو 5-15 ثانية. لكي تدخل تغييرات المهلة حيز التنفيذ، يجب تحديث المستعرض بعد إجراء التغييرات.

مثال:

"مؤقت المستعرض": 8

تعتمد المهلة التي تم تكوينها لإشعارات المستعرض على نظام التشغيل وإعدادات المستعرض. يتم احترام قيمة المهلة في متصفح Chrome عبر أنظمة التشغيل Windows وChrome OS وmacOS. ومع ذلك، لا تحترم المستعرضات المدعومة الأخرى قيمة مهلة الإعلام التي تم تكوينها بشكل متسق.

wxmConfigure

(اختياري) لتكوين Webex Experience Management، قم بتعيين القيمة إلى صواب. القيمة الافتراضية هي false.

مثال:

"wxmتكوين": صحيح

desktopChatApp

لتكوين العديد من تطبيقات الدردشة التي تقدمها Cisco مثل تطبيق Webex.

webexConfigure

يمكن تكوين Webex التطبيق جنبا إلى جنب مع وظائف المراسلة والاجتماع داخل سطح المكتب. يسمح هذا التكوين للوكلاء بالتعاون مع الوكلاء والمشرفين وخبراء الموضوع (SMEs) الآخرين في مؤسستهم دون التنقل بعيدا عن سطح المكتب.

  • يدير مسؤول الموقع مستخدمي Webex Meeting ويعين الامتيازات فقط إذا كان لدى المستخدمين Webex Enterprise Edition. لمزيد من المعلومات، راجع إدارة Webex Meetings المستخدمين في Cisco Webex Control Hub.
  • يجب على المشرفين والشركات الصغيرة والمتوسطة تنزيل Webex العميل على نظامهم (الجهاز الشخصي) أو الوصول إلى تطبيق Webex باستخدام تطبيق Webex للويب ( https://web.webex.com/). لمزيد من المعلومات، راجع تنزيل التطبيق.
  • يمكنك الوصول إلى تطبيق Webex داخل Agent Desktop للتعاون مع الوكلاء والمشرفين والخبراء المتخصصين (SMEs) الآخرين في مؤسستك دون الانتقال بعيدا عن Agent Desktop. ميزة التحكم في المكالمات غير متوفرة. لتلقي المكالمات وإجرائها، تحتاج إلى تطبيق Webex خارجي غير مضمن. لمزيد من المعلومات، راجع تطبيقات الاتصال.

لتكوين Webex التطبيق داخل سطح المكتب:

  • في Cisco Webex Control Hub، عند إضافة خدمات لمستخدم، حدد خانة الاختيار المراسلة المتقدمة (المستخدمون > إدارة المستخدمين > الخدمات > المراسلة). لمزيد من المعلومات، راجع إدارة حسابات المستخدمين في Cisco Webex إدارة الموقع.

  • في تخطيط سطح المكتب المخصص، قم بتعيين قيمة الخاصية webexConfigure إلى true.

    مثال:

    "desktopChatApp": { "webexConfigured": true },

    القيمة الافتراضية للخاصية webexConfigure هي false.

    لا يتوفر Webex App لأدوار العامل والمشرف والوكيل المشرف إلا إذا قمت بتعيين قيمة خاصية webexConfigure إلى true لكل دور من هذه الأدوار. لا يمكن للوكيل أو المشرف أو وكيل المشرف تسجيل الخروج من Webex التطبيق.

    لعرض أيقونة Webex (Webex) على الرأس الأفقي لسطح المكتب، أدخل القيمة webex في خاصية headerActions . لمزيد من المعلومات، راجع headerActions.

    لتمكين تطبيق Webex لفريق معين، حدد التخطيط المخصص مع تعيين قيمة خاصية webexConfigure إلى true. لمزيد من المعلومات، راجع إنشاء فريق.

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

Webex إشعار التطبيق

القيم التي تم تحديدها باستخدام خصائص notificationTimer و browserNotificationTimer لمؤقت الإشعارات قابلة للتطبيق على تطبيق Webex. قيمة مهلة الانتظار الافتراضية هي 8 ثوانٍ لهذه الخصائص. لمزيد من المعلومات، راجع notificationTimer و browserNotificationTimer.

إجراءات الرأس

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

  1. أيقونة Webex (Webex)

  2. استخدم الهاتف لمؤشر الصوت (مكالمة خارجية)

  3. أيقونة الإشعارات. (مركز الإشعارات)

قم بتعيين قيمة الخاصية headerActions كما يلي:

اسم الأيقونة

قيمة خاصية headerActions

تطبيق Webex

webex

مكالمة طلب صادر

الاتصال الخارجي

مركز الإعلام

إعلام

مثال:

"headerActions": ["webex"، "outdial"، "notification"]،

قيمة الخاصية headerActions حساسة لحالة الأحرف.

لتغيير الترتيب الافتراضي للرموز، أدخل الخاصية headerActions والقيم في التخطيط المخصص وفقًا لذلك.

المثال:

"headerActions": ["الإشعار"، "الاتصال الخارجي"، "webex"]،
  • إذا لم تقم بإدخال الخاصية headerActions والقيم في التخطيط المخصص، فسيتم عرض الرموز بالترتيب الافتراضي.
  • لإزالة أيقونات الرأس والوظائف المرتبطة بها من سطح المكتب، قم بتعيين قيمة فارغة لخاصية headerActions ("headerActions": []). ومع ذلك، إذا قمت بإضافة تطبيق Webex إلى جزء المعلومات المساعدة أو صفحة مخصصة، أو كأداة مخصصة، لا يزال بإمكان الوكيل الوصول إلى تطبيق Webex على الرغم من عدم توفر تطبيق Webex في الرأس الأفقي لسطح المكتب.
  • إذا تم تعيين قيمة الخاصية webexConfigured على false، فلن يتم عرض رمز Webex App على الرأس الأفقي لسطح المكتب، حتى إذا تمت إضافة webex القيمة في headerActions . لمزيد من المعلومات، راجع webexConfigured.

منطقة

تُعد خاصية المنطقة القسم الأساسي لتخطيط سطح المكتب. يمكنك تحديد التخطيط حسب المنطقة.

"المنطقة": { "الرأس": { ... }, "advancedHeader: { { "comp": "widget-1", "attributes": { ... }, "النص": .... } }، "لوحة": { ... }، "ملاحة": { ... }، "مثابر": { ... }, "بدون رأس": { ... } },

يمكنك تكوين كائنات المنطقة التالية:

  • اللوحة: تمثل اللوحة الثانية أو اللوحة الموجودة في أقصى اليمين في جزء المعلومات المساعدة.

  • التنقل: يمثل الصفحات المخصصة وعناصر التنقل الخاصة بها والتي تتعلق بالصفحات.

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

  • بدون رأس: يمثل الأدوات التي ليس لها واجهة مرئية، ولكنها تنفذ المنطق في الخلفية.

إذا تم تكوين خاصية advancedHeader، فيجب إزالة خصائص header وheaderActions.

رأس متقدم

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

  1. أيقونة Webex (Webex)

  2. استخدم الهاتف لمؤشر الصوت (مكالمة خارجية)

  3. أيقونة الإشعارات. (مركز الإشعارات)

  4. Webex محدد حالة وكيل مركز الاتصال. (محدد حالة الوكيل)

قم بتعيين قيمة الخاصية advancedHeader كما يلي:

اسم الأيقونة

قيمة خاصية headerActions

تطبيق Webex

وكيل إكس ويبكس

مكالمة طلب صادر

وكيل x-outdial

مركز الإعلام

إشعارات Agentx

محدد حالة الوكيل

محدد حالة الوكيل x

مثال:

"advancedHeader": [ { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-notification" }, { "comp": "agentx-state-selector" } { "comp": "widget-1", "attributes": { ... }, "النص": .... } ]

قيمة الخاصية advancedHeader حساسة لحالة الأحرف.

لتغيير الترتيب الافتراضي للرموز، أدخل الخاصية advancedHeader والقيم في التخطيط المخصص وفقًا لذلك.

تتدفق الأدوات إلى القائمة المنسدلة من اليسار إلى اليمين.

  • إذا لم تقم بإدخال الخاصية advancedHeader في التخطيط المخصص، فسيتم عرض الرأس الافتراضي.

  • عند تمكين الرأس المتقدم، يجب عليك نقل الأدوات من الرأس الحالي إلى الرأس المتقدم وفقًا للمثال.

  • عندما يتم تمكين الرأس المتقدم، لن يتم عرض الرأس القديم.

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

  • يعد موقع الشعار والعنوان وأيقونات الملف الشخصي ثابتًا ولا يمكن تخصيصه.

  • لإزالة أيقونات الرأس والوظائف المرتبطة بها من سطح المكتب، قم بتعيين قيمة فارغة للمكون المرتبط في الخاصية advancedHeader ("advancedHeader": []).

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

  • إذا قمت بإضافة عنصر واجهة مستخدم يحتوي على تسمية طويلة، فسيتم عرض اسم التسمية المقطوع وفقًا للمساحة المتوفرة.

    يمكنك استخدام السمة محتوى النص لإضافة تسمية إلى عنصر واجهة المستخدم.

    مثال:

    { "comp": "timer-widget", "attributes": { "duration": "08:00:00" }, "textContent": "مؤقت العد التنازلي للوردية الحالية", "script": "https://wxcc-demo.s3.amazonaws.com/widgets/timer-widget.js" }

    سيتم اقتطاع علامة "مؤقت العد التنازلي للوردية الحالية" وعرضها وفقًا للمساحة المتوفرة.

    • تجنب إضافة أدوات ذات تسمية طويلة.

    • عندما تنتقل الأداة إلى القائمة المنسدلة، يكون رمز الأداة فقط هو القابل للنقر.

  • إذا كان تم تكوين webex تم تعيين قيمة الخاصية على أنها خطأ شنيع ، ال تطبيق Webex لا يتم عرض الرمز على رأس سطح المكتب الأفقي، حتى لو كان ويبكس تتم إضافة القيمة في رأس متقدم ملكية. لمزيد من المعلومات، انظر تم تكوين webex.

الصفحة الرئيسية

عند تسجيل الدخول إلى سطح المكتب، ستنتقل إلى الصفحة الرئيسية.

الصفحة الرئيسية مخصصة فقط للمشرفين وشخصيات SupervisorAgent.

يمكنك عرض الأدوات التالية على الصفحة الرئيسية. يتم توفير أدوات التحليل بشكل افتراضي، ولكن يمكن للمسؤول أيضًا تكوين أدوات ثابتة ومخصصة. لمزيد من المعلومات، انظر خصائص المستوى الأعلى لتخطيط JSON.

أدوات التحليل

بشكل افتراضي، يتم عرض أداة المحلل على الصفحة الرئيسية لسطح المكتب.

تكوين تخطيط الصفحة الرئيسية

بإمكانك تكوين الصفحة الرئيسية لسطح المكتب لعرض تخطيط يعتمد على تفضيلات مؤسستك ومواءمة العلامة التجارية. تعديل الصفحة الرئيسية حقل لتكوين الصفحة الرئيسية. يمكنك تكوين المكونات التالية لعرضها في الصفحة الرئيسية عندما يقوم المستخدم بتسجيل الدخول إلى سطح المكتب:

  • رسالة ترحيب

  • استخدم رمز المهمة على شريط التنقل للانتقال إلى جزء المهام. يتم عرض رمز المهمة لدور المشرف والمشرف والوكيل مع تمكين ميزة مراقبة المكالمات. يعرض جزء المهام طلبات العملاء الواردة، والتفاعلات النشطة والماضية مع العملاء، وطلبات المراقبة النشطة.

  • قم بتصفية الأقسام مثل اسم قائمة الانتظار، نوع القناة، و الفرق المُدارة.

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

الجدول 2. تخطيط الصفحة الرئيسية الديناميكية—خصائص الصفحة

ملكية

الوصف والرمز

الصفحة > useFlexLayout

تخطيط Flex هو مكون ويب جديد. لا يتم تغيير الأدوات الموجودة. يستخدم تخطيط Flex الجديد نفس تنسيق تكوين التخطيط بطريقة مبسطة. إنه متوافق مع الإصدارات السابقة ولا يؤثر على الأدوات الموجودة. يجب عليك تكوين تخطيط JSON. لتكوين تخطيط JSON، قم بتوفير الارتفاع والعرض للأداة. يتم عرض الأداة بنفس التسلسل الذي تم تكوينها به داخل تخطيط JSON. تحتوي الأدوات على هامش افتراضي يبلغ 8 بكسل.

يعتمد تخطيط JSON على الأبعاد (العرض × الارتفاع) والإحداثيات (X وY وZ) للأدوات.

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

يتم قياس ارتفاع الأدوات الفردية بالبكسل. 1 وحدة ارتفاع = 40 بكسل. يعتمد عرض الأداة على عدد الأعمدة الموجودة في الحاوية وعدد الأعمدة التي تتغير استنادًا إلى عرض الحاوية.

يتم عرض الأدوات من اليسار إلى اليمين. يستخدم محرك التخطيط المتقدم منطقًا مخصصًا لتطبيق تعديل المساحة الأفقية والرأسية للأدوات. في البداية، يتم تحميل التخطيط أفقيًا. بعد التحميل أفقيًا، يتم تحميل الأداة عموديًا لضمان الاستخدام الأمثل للمساحة.

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

يوفر تخطيط Flex نقاط توقف قياسية مثل الكبيرة والمتوسطة والصغيرة والصغيرة جدًا.

  • تتمتع الأدوات الكبيرة بدقة 1360 بكسل أو أكثر. بالنسبة للأدوات الكبيرة، حدد قيمة العمود على أنها 12.

  • تتمتع عناصر واجهة المستخدم المتوسطة بدقة تتراوح من 1070 بكسل إلى 1360 بكسل. بالنسبة للأدوات المتوسطة، حدد قيمة العمود على أنها 10.

  • تتمتع الأدوات الصغيرة بدقة تتراوح بين 850 بكسل إلى 1070 بكسل. بالنسبة للأدوات الصغيرة، حدد قيمة العمود على أنها 6.

  • تتمتع الأدوات الصغيرة جدًا بدقة 500 بكسل. بالنسبة للأدوات الصغيرة جدًا، حدد قيمة العمود على أنها 4.

قد تختلف هذه البكسلات وفقًا لنظام التشغيل والمتصفح.

"الصفحة": { "المعرف": "الصفحة المقصودة"، "استخدام تخطيط Flex": صحيح، "الأدوات": { "comp1": { "comp": "div"، "العرض": 4، "الارتفاع": 4، "محتوى النص": "الأداة 1"، "السمات": { "النمط": "العرض: الحد الأقصى للمحتوى؛ الهامش: 80 بكسل 240 بكسل؛ اللون: أبيض؛" } }، "comp2": { "comp": "div"، "العرض": 4، "الارتفاع": 4، "محتوى النص": "الأداة 2"، "السمات": { "النمط": "العرض: الحد الأقصى للمحتوى؛ الهامش: 80 بكسل 240 بكسل؛ اللون: أبيض؛" } } 

الصفحة > comp

تأكد من توفير مكون مخصص فريد من نوعه.

"comp": "عنوان الصفحة"،

يمثل مكون page-title عنوان المستوى 2 <h2> لعنصر HTML المخصص.

الصفحة > رأس الصفحة

تأكد من تحديد سلسلة عنوان يمكن أن تكون ثابتة أو ديناميكية أو كليهما.

يمثل مكون page-title عنوان المستوى 2 <h2> في عنصر HTML المخصص.

  • سلسلة ثابتة: على سبيل المثال، مرحبًا، مرحبًا بك!

    "comp": "page-title", "attributes": { "pageTitle": "مرحبًا، مرحبًا بك!" }
  • سلسلة ديناميكية: لجلب القيمة من STORE. على سبيل المثال، جين دو.

    "comp": "عنوان الصفحة"، "السمات": { "عنوان الصفحة": "$STORE.agent.agentName" }

  • كلاهما: مزيج من السلاسل الثابتة والديناميكية. على سبيل المثال، مرحبًا جين دو، مرحبًا بك!

    "comp": "page-title", "attributes": { "pageTitle": "مرحبًا {$STORE.agent.agentName}!" }

    يجب عليك إحاطة الجزء الديناميكي من السلسلة بين الأقواس المجعدة المغلقة {} والبادئة بالهيكل $.

الصفحة > pageSubHeader

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

  • كتلة التعليمات البرمجية للعنوان الفرعي

    "useFlexLayout": صحيح، "pageSubHeader": { "comp": "div"، "attributes": { "style": "display: flex; float:right;margin:16px 0px 16px 16px" }، "children": [ { "comp": "div"، "children": [ { "comp": "md-label"، "textContent": "$I18N.pageSubHeader.queueName"، "attributes": { "style": "margin-bottom:8px;" }
  • كتلة التعليمات البرمجية للانتقال إلى المحلل في العنوان الفرعي

    { "comp": "div"، "children": [ { "comp": "agentx-more-actions-wrapper"، "properties": { "actionList": [ { "comp": "agentx-wc-goto-analyzer" } ] } }

التنقل (الصفحات المخصصة)

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

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

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

المثال:

{ "nav": { "label": "صفحة مخصصة"، "icon": "معلومات مخزنة"، "iconType": "momentum"، "navigateTo": "علامات تبويب ديناميكية"، "align": "top"، "isDefaultLandingPage": true }, "page": { "id": "my - custom - page"، "useFlexLayout": true، "widgets": { "comp1": { "comp": "md-tabs"، "children": [{ "comp": "md-tab"، "textContent": "مؤقت التحويل"، "attributes": { "slot": "tab" } }, { "comp": "md-tab-panel"، "attributes": { "slot": "panel" }, "children": [{ "comp": "my - custom - timer"، "source": http: //my-cdn.com/my-custom-timer.js "wrapper": { "title": "مؤقت التحويل"، "maximizeAreaName": "app-maximize-area" } }] }, { "comp": "md-tab", "textContent": "سوق الأسهم", "responsive": "false" "attributes": { "slot": "tab" }, }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "agentx-wc-iframe", "responsive": "false" "attributes": { "src": "https://widget-kad.s3.amazonaws.com/Trading.htm" }, "wrapper": { "title": "سوق الأسهم", "maximizeAreaName": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "Widget3", "attributes": { "slot": "tab" } }, { "comp": "md-tab-panel"، "textContent": "ثلاثة محتويات"، "attributes": { "slot": "panel" } } ] }، "comp2": { "comp": "my - google - maps - component"، "source": "https://my-cdn.com/my-google.maps.js "wrapper": { "title": "Google Map"، "maximizeAreaName": "app-maximize-area" } } }، "layout": { "areas": [ ["left", "right"] ]، "size": { "cols": [1, 1]، "rows": [1] } } } }،

يوضح الجدول التالي الملاحة و صفحة الخصائص مع خصائصها الفرعية:

الجدول 3. تفاصيل الملكية

ملكية

الوصف والرمز

الملاحة > ملصق

تشير هذه الخاصية إلى معرف التنقل في الصفحة. يقوم قارئ الشاشة بقراءة هذه الخاصية وتظهر في تلميح الأدوات.

هذه المعلمات ضرورية لعرض صفحتك المخصصة على شريط التنقل.

نوع Navigation.Item = {التسمية: سلسلة؛ نوع الرمز: "الزخم" | "أخرى"؛ الرمز: سلسلة؛ المحاذاة: "أعلى" | "أسفل"؛ التنقل إلى: سلسلة؛ حجم الرمز؟ : رقم؛ هل هو مستجيب؟ : منطقي؛

ال ملصق الخاصية هي عنوان الصفحة المخصصة.

التنقل > نوع الرمز

تمثل هذه الخاصية نوع الرمز الذي يظهر في شريط التنقل للصفحة المخصصة.

الأنواع التالية من الرموز متاحة:

  • الزخم: يمكنك اختيار أي أيقونات متوفرة في المجموعة: https://momentum.design/icons. تكمن ميزة استخدام Momentum في أنه يوفر عددًا قليلًا من الرموز بإصدار "نشط".

    حالة استخدام الإصدار النشط:

    على سبيل المثال، إذا اخترت نوع رمز الزخم إعلان، يمكنك رؤية الرمز الافتراضي على شريط التنقل. عند الانتقال إلى الصفحة المخصصة (المرتبطة بالرمز)، يتغير الرمز إلى إعلان نشط الإصدار تلقائيا. تأكد من التحقق مما إذا كان لديه نشيط إصدار من نفس الرمز في مكتبة الأيقونات.

  • أخرى: يمكنك توفير عنوان URL مخصص للصورة (مستضاف على شبكة توصيل المحتوى) يظهر على شريط التنقل. إذا كنت تستخدم رمزًا مخصصًا باللون الأسود أو الأبيض، فلن يكون الرمز مرئيًا عند التبديل بين الوضعين الفاتح والداكن.

أيقونة التنقل >

تمثل هذه الخاصية اسم الرمز في مكتبة Momentum أو عنوان URL لشبكة CDN.

نوع Navigation.Item = {رمز:"إعلان"; }; // أو // نوع Navigation.Item = {رمز:"https://my-cdn.com /my-navigation-icon.png"; };

nav > محاذاة

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

حاليًا، تسمح الخاصية بالمحاذاة العلوية فقط.

nav > isDefaultLandingPage

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

إذا لم يتم تعيين هذه الخاصية على true في أي صفحة شريط تنقل، فإن الصفحة الرئيسية تعمل كصفحة الوصول الافتراضية.

لا يمكنك تعيين تقارير إحصائيات أداء الوكيل كصفحة الوصول الافتراضية.

التنقل > انتقل إلى

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

يجب ألا يتضمن ملف navigateTo القيم التالية: الصور، والخطوط، وcss، وbuild_info، والمساعدة، والتطبيق، وi18n، والأيقونات، والصور-mfe-wc، والأصوات.

نوع Navigation.Item = { navigateTo: "my - custom - page"; };
الجدول 4. صفحة تفاصيل العقار

ملكية

الوصف والرمز

الصفحة > معرف

في صفحة الخاصية، يمكنك تحديد كائن الصفحة المخصصة (الأداة الديناميكية).

ال معرف تمثل الخاصية معرف صفحة فريدًا. على سبيل المثال، my-custom-page-1. لا يمكن للوكيل رؤية هذا المعرف على سطح المكتب.

نوع DynamicWidgets.Page = { معرف: سلسلة؛ الأدوات: سجل < سلسلة، DynamicWidget.خيارات >؛ التخطيط: التخطيط؛ };

الصفحة > استخدام FlexLayout

تخطيط Flex هو مكون ويب جديد. لا يتم تغيير الأدوات الموجودة. يستخدم تخطيط Flex الجديد نفس تنسيق تكوين التخطيط بطريقة مبسطة. إنه متوافق مع الإصدارات السابقة ولا يؤثر على الأدوات الموجودة. يجب عليك تكوين تخطيط JSON. لتكوين تخطيط JSON، قم بتوفير الارتفاع والعرض للأداة. يتم عرض الأداة بنفس التسلسل الذي تم تكوينها به داخل تخطيط JSON. تحتوي الأدوات على هامش افتراضي يبلغ 8 بكسل.

يعتمد تخطيط JSON على الأبعاد (العرض × الارتفاع) والإحداثيات (X وY وZ) للأدوات.

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

يتم قياس ارتفاع الأدوات الفردية بالبكسل. 1 وحدة ارتفاع = 40 بكسل. يعتمد عرض الأداة على عدد الأعمدة الموجودة في الحاوية وعدد الأعمدة التي تتغير استنادًا إلى عرض الحاوية.

يتم عرض الأدوات من اليسار إلى اليمين. يستخدم محرك التخطيط المتقدم منطقًا مخصصًا لتطبيق تعديل المساحة الأفقية والرأسية للأدوات. في البداية، يتم تحميل التخطيط أفقيًا. بعد التحميل أفقيًا، يتم تحميل الأداة عموديًا لضمان الاستخدام الأمثل للمساحة.

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

يوفر تخطيط Flex نقاط توقف قياسية مثل الكبيرة والمتوسطة والصغيرة والصغيرة جدًا.

  • تتمتع الأدوات الكبيرة بدقة 1360 بكسل أو أكثر. بالنسبة للأدوات الكبيرة، حدد قيمة العمود على أنها 12.

  • تتمتع عناصر واجهة المستخدم المتوسطة بدقة تتراوح من 1070 بكسل إلى 1360 بكسل. بالنسبة للأدوات المتوسطة، حدد قيمة العمود على أنها 10.

  • تتمتع الأدوات الصغيرة بدقة تتراوح بين 850 بكسل إلى 1070 بكسل. بالنسبة للأدوات الصغيرة، حدد قيمة العمود على أنها 6.

  • تتمتع الأدوات الصغيرة جدًا بدقة 500 بكسل. بالنسبة للأدوات الصغيرة جدًا، حدد قيمة العمود على أنها 4.

قد تختلف هذه البكسلات وفقًا لنظام التشغيل والمتصفح.

"الصفحة": { "المعرف": "الصفحة المقصودة"، "استخدام تخطيط Flex": صحيح، "الأدوات": { "comp1": { "comp": "div"، "العرض": 4، "الارتفاع": 4، "محتوى النص": "الأداة 1"، "السمات": { "النمط": "العرض: الحد الأقصى للمحتوى؛ الهامش: 80 بكسل 240 بكسل؛ اللون: أبيض؛" } }، "comp2": { "comp": "div"، "العرض": 4، "الارتفاع": 4، "محتوى النص": "الأداة 2"، "السمات": { "النمط": "العرض: الحد الأقصى للمحتوى؛ الهامش: 80 بكسل 240 بكسل؛ اللون: أبيض؛" } } 

صفحة > أدوات

صفحة > كومب

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

"الأدوات": { "comp1": { ... } "comp2": { ... } }

تمثل هذه الخاصية اسم عنصر HTML المخصص (المعروف باسم مكون الويب أو أي عنصر آخر - إذا كنت تريد استخدامه كغلاف). لمزيد من المعلومات، انظر أمثلة على حالات الاستخدام النموذجية. أدخل اسم العنصر المخصص هنا بدون أقواس زاوية ("<" أو ">"). على سبيل المثال، "my-custom-element".

يدعم كل إدخال ضمن قسم الأدوات التنسيق التالي:

نوع الخيارات = { comp: سلسلة؛ النص؟ :سلسلة؛ خصائص؟ : سجل <سلسلة، أي>؛ السمات؟ : سجل <سلسلة، سلسلة> ؛ أطفال؟ :الخيارات[]; textContent؟ :سلسلة؛ النمط؟ : جزئي <CSSStyleDeclaration> ؛ غلاف؟ : { العنوان: سلسلة؛ maximAreaName: سلسلة؛ }؛ }؛

صفحة > نص

(اختياري) هذه الخاصية مطلوبة فقط عند تحميل الأداة أو المكون من موقع بعيد مثل شبكة توصيل المحتوى (CDN).

"comp1": { "comp": "widget-one", "script": "http:/my-cdn.com / dynamic - widgets / widget - one.js ", }

لا تقم بتغيير عنوان URL للنص البرمجي لنفس المكون. إذا كنت بحاجة إلى تغيير عنوان URL للبرنامج النصي لنفس المكون، فقم بأحد الإجراءات التالية:

  • أبلغ الوكيل بمسح ذاكرة التخزين المؤقت للمتصفح وإعادة تحميل Agent Desktop.

  • الاحتفاظ بعنوان URL الحالي. استيراد عنوان URL للحزمة الجديدة بشكل ديناميكي باستخدام javascript المستضاف في عنوان URL الحالي.

    مثال:

    (دالة () { var script = document.createElement("script"); script.src = <عنوان URL لملف JS Script الخاص بك> script.type = "text/javascript"; script.async = true; document.getElementsByTagName ("head").item(0).appendchild(script); } ) ()

صفحة > ملكيات

يمكنك تحديد الخصائص التي يجب عليك تمريرها لمكون الويب.

"الخصائص": { "المستخدم": "المسؤول"، },

الصفحة > مستجيبة

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

قم بتكوين هذه الخاصية باستخدام إحدى القيم التالية:

  • صحيح: تمكين استجابة الأداة. بشكل افتراضي، تكون كافة عناصر واجهة المستخدم مستجيبة بناءً على أحجام الشاشة التدريجية، والاتجاه، ومساحات العرض للجهاز قيد الاستخدام.

  • خطأ: تعطيل استجابة الأداة. إذا كانت الأدوات لا تدعم العرض على أجهزة مختلفة، فقم بتمييزها على أنها غير مستجيبة.

{ "comp": "md-tab"، "responsive": صحيح، "attributes": { "slot": "tab"، "class": "widget-pane-tab" }، "children": [{ "comp": "slot"، "attributes": { "name": "SCREEN_POP_TAB" } }]، "visibility": "SCREEN_POP" }، { "comp": "md-tab-panel"، "responsive": خطأ، "attributes": { "slot": "panel"، "class": "widget-pane" }، "children": [{ "comp": "slot"، "attributes": { "name": "CALL_GUIDE" } }]، "visibility": "CALL_GUIDE" }،

لا يمكن للأدوات غير المستجيبة ضمان أفضل تجربة للمستخدم ولا يتم عرضها في العرض الأصغر. يتعين على الوكيل زيادة حجم نافذة المتصفح لعرض أي عناصر واجهة مستخدم تم تكوينها على أنها غير مستجيبة.

الصفحة > السمات

يمكنك تحديد سمات مكون الويب في هذا القسم.

"السمات": { "معطل": "خطأ"، },

الصفحة > الرؤية

يحدد ما إذا كانت عناصر واجهة المستخدم التي تقدمها Cisco المضافة في التخطيط المخصص على مستوى الصفحة أو التكوين مرئية أم لا.

الأدوات التي تقدمها شركة Cisco هي سجل الاتصال، ونسخة Cisco Webex Experience Management, IVR، ودليل معاينة مكالمة الحملة، والشاشة المنبثقة.

  • قيم خصائص visibility مضمنة ومحددة في ملف JSON الافتراضي لتخطيط سطح المكتب. لا يمكن للمسؤول تعديل قيم خصائص visibility الخاصية الخاصة بأدوات Cisco المقدمة.

  • قيمة الخاصية visibility NOT_RESPONSIVE قد تم إيقاف استخدامها. يمكنك الاستمرار في استخدامه فقط للتوافق مع الإصدارات السابقة. أي قيمة تم تعيينها على أنها NOT_RESPONSIVE سابقًا لا تتطلب أي تعديل، حيث تظل الوظيفة كما هي.

    لتعيين عنصر واجهة مستخدم تم إنشاؤه حديثًا على أنه مستجيب أو غير مستجيب، يجب عليك استخدام الخاصية مستجيب . لمزيد من المعلومات، راجع الخاصية المستجيبة.

الصفحة > الأطفال

تعتبر هذه الخاصية الجزء الأساسي من التخطيط. في أطفال يمكنك تضمين العديد من المستويات حسب الحاجة إذا كانت أداة Web Component-based تسمح لك بتمرير العناصر الفرعية. ولجعل ذلك ممكنًا، يجب على المطور التعامل برمجيًا مع مشقوق محتوى. لمزيد من المعلومات، راجع Cisco Webex Contact Center دليل مطور سطح المكتب.

لمعرفة كيفية تمرير قيم STORE كخصائص، راجع مشاركة البيانات من سطح المكتب إلى الأدوات.

"children": [{ "comp": "div"، "textContent": "Test" }، { "comp": "div"، "textContent": "Test" }، { "comp": "div"، "textContent": "Test" }، { "comp": "div"، "textContent": "اختبار" }، { "comp": "div"، "children": [{ "comp": "div"، "textContent": "اختبار" }، { "comp": "div"، "textContent": "اختبار" }، { "comp": "div"، "textContent": "اختبار" } ] } ]،

تتمثل ميزة قسم مجموعة "الأطفال" في أنه يمكنك استخدام مكونات الويب الموجودة في مواصفات التخطيط الخاصة بك، والتي تعد بالفعل جزءًا من مجموعة سطح المكتب. تتضمن بعض مكونات الويب الخاصة بحزمة سطح المكتب ما يلي:

  • agentx-wc-iframe: أداة تسمح لك بوضع أي صفحة ويب في iFrame كأداة.

  • منطقة ديناميكية: مكون يسمح لك بتمكين ميزة السحب والإفلات للوكلاء في مكان آخر غير الصفحات المخصصة. يمكن أن تتمتع الصفحات المخصصة أيضًا بهذه الإمكانية إذا قمت بتمكين السحب والإفلات بشكل افتراضي.

  • أي مكون في مكتبة Momentum-ui-web-component. لمزيد من المعلومات، راجع GitHub. على سبيل المثال:

    • md-tabs: غلاف حاوية علامات التبويب

    • md-tab: رأس علامة تبويب واحدة

    • md-tab-panel: محتوى علامة تبويب واحدة

لمزيد من المعلومات حول السمات الخاصة بعلامة التبويب الدائمة، راجع سمات علامات التبويب الدائمة.

الصفحة > محتوى النص

يساعدك على إضافة محتوى النص الخاص بك.

"textContent": "محتوى النص الخاص بي"،

نمط الصفحة >

يساعدك على تعيين نمط CSS معين لمكونك.

"النمط": { "لون الخلفية": "#CBD"، "التدفق": "التمرير" },

> غلاف الصفحة

يتيح لك غلاف الأداة إضافة شريط أدوات أعلى الأداة الخاصة بك. يمكن أن يحتوي شريط الأدوات على عنوان و أيقونة التكبير (تكبير) أعلى الأداة. عندما تشغل الأداة مساحة صغيرة على الصفحة، يسمح رمز التكبير للوكيل برؤية الأداة في مساحة العمل الكاملة.

تأكد من استخدام القيمة الافتراضية "app-maximize-area". حاليًا، القيمة الافتراضية فقط هي المتاحة.

"wrapper": { "title": عنوان عنصر واجهة المستخدم الخاص بي، "maximizeAreaName": "app-maximize-area" }

صفحة > الغلاف> المعرف

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

"wrapper": { "title": عنوان عنصر واجهة المستخدم الخاص بي، "id": "unique-id-to-update-title"، "maximizeAreaName": "app-maximize-area" } 

تأكد من استخدام نفس المعرف الفريد لـ JavaScript CustomEvent. لمزيد من المعلومات، راجع الأحداث غير المتزامنة قسم في وحدة اتصال الوكيل فصل من Cisco Webex Contact Center مطور سطح مكتب.

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

< نوع البرنامج النصي = "text/javascript" >var title = ""; window.addEventListener("update-title-event", function(e) { title = e.detail.title; }); document.querySelector('#customEvent').onclick = function() { const e = new CustomEvent("update-title-event", { bubble: true, detail: { title: "new title" } }); window.parent.dispatchEvent(e); }; < /script>< button id = "customEvent" > New Title< /button>< iframe src = "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" >< /iframe>

الصفحة > agentx-wc-iframe

يتيح لك تضمين صفحة ويب في iFrame تظهر كأداة على سطح المكتب. يمكنك استخدام أداة iFrame المسماة "agentx-wc-iframe".

"comp1": { "comp": "agentx-wc-iframe"، "attributes": { "src": "https://blog.logrocket.com / الدليل الشامل لإطارات iframe / " }، "wrapper": { "title": "AgentX iFrame"، "maximizeAreaName": "app-maximize-area" }،

تخطيط الصفحة

يسمح لك بترتيب الأدوات على الصفحة.

يمثل التنسيق التالي تخطيط الشبكة:

نوع التخطيط = { المساحات: سلسلة [] []؛ الحجم: { الصفوف: رقم []؛ الأعمدة: رقم []؛ }؛ }؛

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

يوضح المثال التالي كيفية تحديد تخطيط ثلاثة صفوف وثلاثة أعمدة:

"التخطيط": { "المناطق": [ [ "comp1", "comp1", "comp3" ], [ "comp2", "comp2", "comp3" ], [ "comp4", "comp4", "comp4" ] ], "الحجم": { "الأعمدة": [1, 1, 1], "الصفوف": [1, 1, 1] } }
التوزيع المتساوي لتخطيط 3 × 3
Equal distribution of a 3x3 layout for Webex contact Center Desktop layout configuration.

في قسم الحجم، تمثل الأرقام جزء المساحة التي يمكن أن تشغلها الأداة، نسبة إلى الأدوات الأخرى. تشغل الأعمدة الثلاثة جزءًا متساويًا من المساحة. مع عرض متاح بنسبة 100%، تشغل كل أداة 33.33% من المساحة الأفقية.

مع عرض عمود متساوي
Equal column width layout for Webex Contact Center Desktop layout configuration.

مثال آخر لحالة الاستخدام، إذا قمت بتعيين "الأعمدة": [1، 2، 2]، فهذا يعني أن المساحة الإجمالية مقسمة على 5 (1+2+2) وأن الأداة الأولى تشغل 20% من المساحة الأفقية. الأداة الثانية والثالثة تأخذ 40% لكل منهما. لمزيد من المعلومات، راجع المفاهيم الأساسية لتخطيط الشبكة.

Unequal column width layout for Webex Contact Center Desktop layout configuration.
بعد تغيير عرض العمود

الصفحة > الجذر

يُطلق على تعشيش التخطيطات اسم التخطيط الفرعي. في حالة وجود تخطيطات متداخلة في تكوين التخطيط الخاص بك، يجب أن يكون لديك كائن "ROOT" واحد كعنصر أساسي للتخطيطات الفرعية. بخلاف ذلك، يمكن أن يكون تكوين التخطيط الخاص بك مسطحًا إذا لم يكن التعشيش مطلوبًا.

يوفر هذا التخطيط الفرعي مزيدًا من التحكم في سلوك تغيير حجم التخطيط. يجب أن تكون خاصية تخطيط الصفحة من نوع Record<string, Layout>. تتيح لك خاصية التخطيط ترتيب الأدوات على الصفحة.

{ "id": "some-id", "widgets": { "c1": { "comp": "div", "textContent": "c1" }, "c2": { "comp": "div", "textContent": "c2" }, "c3": { "comp": "div", "textContent": "c3" }, "c4": { "comp": "div", "textContent": "c4" }, "c5": { "comp": "div", "textContent": "c5" } }, "layout": { "ROOT": { "areas": [ ["c1", "sub1"], ["c2", "sub2"], ], "size": { "cols": [1, 1], "rows": [1, 1] } }, "sub1": { "areas": [ ["c3", "c4"] ], "الحجم": { "الأعمدة": [1، 1]، "الصفوف": [1] } }, "الفرعي 2": { "المناطق": [ ["c1"]، ["c5"] ], "الحجم": { "الأعمدة": [1]، "الصفوف": [1، 1] } } }

يؤدي هذا الإعداد إلى إنشاء شبكة في تخطيط ROOT تحتوي على شبكتين فرعيتين يمكنك تغيير حجمهما بشكل مستقل.

Sub-layout appearance for Webex Contact Center Desktop layout configuration.
مظهر التخطيط الفرعي

يؤثر تغيير حجم أحد المكونات على المكونات الموجودة داخل هذا التخطيط الفرعي.

Sub-layout appearance, after resizing both sub-layouts, for Webex Contact Center Desktop layout configuration.
بعد تغيير حجم كلا التخطيطين الفرعيين

كن على علم بالحالات التالية:

حلقة لا نهائية: إذا قمت بتضمين تخطيط ROOT كتخطيط فرعي لـ ROOT، فسوف يتسبب ذلك في حدوث خطأ "تجاوز مكدس النداء" ويؤدي إلى حلقة لا نهائية.

{ "layout": { "ROOT": { "areas": [ ["c1", "c2"], ["c3", "ROOT"], ], "size": { "cols": [1, 1], "rows": [1, 1] } } }
Sub-layout appearance with infinite loop for Webex Contact Center Desktop layout configuration.
تخطيط فرعي مع حلقة لا نهائية

نفس التخطيط الفرعي (N) مرة: إذا قمت بتضمين التخطيط الفرعي في شبكتك أكثر من مرة بنفس الاسم، وإذا قمت بتغيير حجم أحدها، فسيتم تغيير حجم جميع التخطيطات الفرعية تلقائيًا.

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

{ "layout": { "ROOT": { "areas": [ ["c1", "sub1"], ["c2", "sub1"], ], "size": { "cols": [1, 1], "rows": [1, 1] } }, "sub1": { "areas": [ ["c3", "c4"] ], "size": { "cols": [1, 1], "rows": [1] } } }
Sub-layout appearance with N times for Webex Contact Center Desktop layout configuration.
تخطيط فرعي مع N مرة

سمات علامات التبويب الدائمة

لتعيين علامات التبويب في الصفحات المخصصة والأدوات المخصصة على أنها دائمة، أدخل السمات لـ md-tabs في التخطيط المخصص.

مثال: تعيين علامات التبويب كعلامات تبويب دائمة

{ "comp": "md-tabs"، "attributes": { "persist-selection": true، "tabs-id": "معرف فريد لجميع علامات التبويب معًا في الحاوية" }, }

ملكية

الوصف

استمرار التحديد

لتعيين md-tabs لكي تكون ثابتة. القيمة الافتراضية هي صحيح.

معرف علامات التبويب

تعريف فريد لجميع علامات التبويب معًا في الحاوية.

عندما تقوم بتعيين md-tabs ليكون ثابتًا (persist-selection: true)، يحتفظ Agent Desktop باختيار علامة التبويب حتى إذا قام أحد الوكلاء بالتبديل بين الصفحات أو الأدوات في سطح المكتب.

  • ال استمرار التحديد لا تنطبق الخاصية على علامات التبويب الموجودة في جزء المعلومات المساعدة وصفحة تقارير إحصائيات أداء العميل، لأن سلوك علامة التبويب الدائمة تم تعيينه بالفعل في سطح المكتب.
  • يتم إعادة تعيين اختيار علامة التبويب إلى علامة التبويب الافتراضية عند تسجيل الخروج من سطح المكتب، أو إعادة تحميل/تحديث المتصفح، أو مسح ذاكرة التخزين المؤقت للمتصفح.

تكوين أدوات واجهة المستخدم الثابتة

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

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

المثال:

"المنطقة": { "مستمر": [{ "comp": "md-tab", "attributes": { "slot": "tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "أداة صفحة مخصصة" } ] }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "dynamic-area", "properties": { "area": { "id": "dw-panel-two", "widgets": { "comp1": { "comp": "agentx-wc-iframe", "attributes": { "src": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" }, "wrapper": { "title": "AgentX iFrame، "maximizeAreaName": "app-maximize-area" } }، "comp2": { "comp": "uuip-widget-two"، "script": "./dynamic-widgets/widget-two.js"، "attributes": { "title": "محتوى الأداة 2" }، "wrapper": { "title": "عنوان الأداة 2"، "maximizeAreaName": "app-maximize-area" } } }، "layout": { "areas": [ ["comp1"، "comp2"] ]، "size": { "cols": [1, 1]، "rows": [1] } } } }] } ] }

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

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

  • إنشاء عنصر واجهة مستخدم مخصص.

يتم وصف متطلبات الأداة التقنية في وثائق تطوير أدوات سطح المكتب. باعتبارك محرر تخطيط، تأكد من أن لديك التفاصيل التالية:

  • ما هو اسم عنصر HTML المخصص (المعروف باسم مكون الويب)؟

  • ما هو عنوان URL لمصدر شبكة توصيل المحتوى (CDN) الذي يستضيف حزمة JavaScript؟

أدوات الرأس

يتم استخدام الرأس لعرض المعلومات المضمنة، وإضافة القوائم المنسدلة، وما إلى ذلك. نظرًا لأن حاوية الرأس تحتوي على مساحة رأسية محدودة، فإن الارتفاع الإجمالي للرأس هو 64 بكسل فقط. لمزيد من المعلومات حول محاذاة التخطيط، راجع قسم خصائص التخطيط .

المثال:

"الرأس":{ "المعرف": "الرأس"، "الأدوات":{ "الرأس1":{ "الرسم": "رأس-الأداة-واحد"، "النص": "https://my-cdn.com/dynamic-widgets/header-widget-one.js"، }، "الرأس2":{ "الرسم": "رأس-الأداة-اثنين"، "النص": "https://my-cdn.com/dynamic-widgets/header-widget-two.js"، }، "التخطيط":{ "المناطق":[[ "الرأس1"، "الرأس2" ]]، "الحجم": { "الأعمدة": [1، 1]، "الصفوف": [1] } } }

لإضافة تلميح أداة لعنصر واجهة المستخدم الرسومية، قم بتغليف المكون باستخدام md-tooltip. أدخل معلومات التلميح في خاصية الرسالة .

المثال:

"الرأس": { "المعرف": "رأس dw"، "الأدوات": { "الرأس1": { "comp": "md-tooltip"، "السمات": { "الرسالة": "Netlify" }، "الأطفال": [{ "comp": "agentx-wc-iframe"، "السمات": { "src": "https://keen-jackson-8d352f.netlify.app" } }] }, }, }

يجب عليك إضافة سمات النمط display و height لتكوين أي عناصر واجهة مستخدم من خلال iFrame في منطقة عناصر واجهة المستخدم القابلة للتخصيص في الرأس. القيمة الأفضل لسمة الارتفاع هي 64 بكسل.

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

المثال:

"head1": { "comp": "agentx-wc-iframe"، "attributes": { "src": "https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm"، "style": "height:64px;display:flex;" } },

نوصيك باستخدام صف واحد فقط مع عدة أعمدة للرأس لأن ارتفاع الرأس هو 64 بكسل فقط. لمزيد من المعلومات حول المحاذاة، راجع قسم خصائص التخطيط .

لوحة المعلومات المساعدة

يعرض جزء المعلومات المساعدة في سطح المكتب علامات التبويب التي تتضمن عناصر واجهة المستخدم الرسومية (الافتراضية) وعناصر واجهة المستخدم الرسومية المخصصة التي تقدمها Cisco. تظهر أدوات واجهة المستخدم التالية المقدمة من Cisco في علامات التبويب المحددة مسبقًا:

  • سجل الاتصال

  • IVR نص

  • رحلة تجربة العملاء

  • سكرين بوب

يمكنك استخدام جزء المعلومات المساعدة للقيام بما يلي:

  • إضافة علامات التبويب

  • تغيير ترتيب علامات التبويب

  • إزالة علامات التبويب المحددة مسبقًا

  • قم بتمييز علامات التبويب المخصصة على أنها قابلة للسحب

  • إضافة تلميحات الأدوات إلى علامات التبويب المخصصة

  • أضف خيار إعادة تعيين ترتيب علامات التبويب

المثال:

"لوحة": { "comp": "md-tabs"، "attributes": { "class": "widget-tabs" }، "children": [{ "comp": "md-tab"، "attributes": { "slot": "tab"، "class": "widget-pane-tab" }، "children": [{ "comp": "slot"، "attributes": { "name": "CONTACT_HISTORY_TAB" } }] }، { "comp": "md-tab-panel"، "attributes": { "slot": "panel"، "class": "widget-pane" }، "children": [{ "comp": "slot"، "attributes": { "name": "CONTACT_HISTORY" } }] }، { "comp": "md-tab"، "attributes": { "slot": "tab"، "class": "widget-pane-tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "pop-out_16" } }, { "comp": "span", "textContent": "Screen Pop" } ], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "#SCREEN_POP" }], }, { "comp": "md-tab", "attributes": { "slot": "tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "Custom أداة" } ] }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "dynamic-area", "properties": { "area": { "id": "dw-panel-two", "widgets": { "comp1": { "comp": "agentx-wc-iframe", "attributes": { "src": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" }, "wrapper": { "title": "AgentX iFrame", "maximizeAreaName": "app-maximize-area" } }, "comp2": { "comp": "widget-one", "script": "https://my-cdn.com/dynamic-widgets/widget-one.js", "wrapper": { "title": "Widget title", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "المناطق": [ ["comp1"]، ["comp2"] ]، "الحجم": { "الأعمدة": [1]، "الصفوف": [1، 1] } } } } }] } ] },

بإمكانك تكوين أداة رحلة تجربة العميل بعد تمكين مقاييس إدارة تجربة العميل على بوابة الإدارة.

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

وفيما يلي أمثلة محددة لتخصيص رؤوس علامات التبويب الخاصة بك:

مثال لوضع الأيقونات والعلامات في خاصية الأطفال

{ "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "transcript_16" } }, { "comp": "span", "textContent": "علامة تبويب أدواتي" } ], },

مثال لوضع الصورة (باستخدام CSS) والعلامات في خاصية الأطفال

{ "comp": "md-tab", "attributes": { "slot": "tab" }, "children": [{ "comp": "span", "attributes": { "style": "align-items: center; display: flex;" }, "children": [{ "comp": "img", "attributes": { "src": "http: //my-cdn.com/icon.svg", "width": 16, "height": 16, "style": "margin-right: 0.5rem;" } }, { "comp": "span", "textContent": "علامة تبويب أدواتي" } ] }], },

ال المزيد من علامات التبويب تظهر القائمة المنسدلة تلقائيًا عندما تحتوي لوحة المعلومات المساعدة على علامات تبويب متعددة.

يجب عليك إضافة تلميح علامة تبويب مخصص لسهولة القراءة وإمكانية الوصول. لإضافة تلميح أداة لعلامة تبويب مخصصة، قم بتغليف المكون بـ تلميح أداة md. أدخل معلومات تلميح الأدوات في رسالة الممتلكات وتطبيقها أسلوب قيم الخصائص كما هو موضح في المثال التالي.

"comp": "md-tooltip"، "attributes": { "class": "widget-tabs"، "message": "نموذج علامة تبويب 1"، "style": "الحد الأقصى للعرض: 252 بكسل؛ الحد الأدنى للعرض: 110 بكسل؛ تجاوز السعة: مخفي؛ تجاوز النص: علامات الحذف؛ المسافة الفارغة: nowrap؛ العرض: كتلة مضمنة؛ الهامش السفلي: -10 بكسل؛" },

بالنسبة لعلامة التبويب المخصصة، نوصي بعرض أقصى يبلغ 252 بكسل وعرض أدنى يبلغ 110 بكسل.

لتفعيل ميزة السحب والإفلات داخل علامة التبويب المخصصة، أضف الخاصية التالية داخل صفات:

"comp": "md-tabs"، "attributes": { "class": "widget-tabs"، "draggable": صحيح، "comp-unique-id": "sample-dynamic-custom-tabs" },
  • قابلة للسحب :ضبط قابلة للسحب قيمة الممتلكات إلى حقيقي.

  • معرف فريد للشركة :أدخل قيمة فريدة لتحديد المكون.

    المثال:

    "comp-unique-id": "عينة من علامات التبويب الديناميكية المخصصة" 

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

"comp": "agentx-wc-more-actions-widget"، "attributes": { "slot": "settings"، "class": "widget-pane"، "tabs-unique-id": "sample-dynamic-custom-tabs" },
  • أداة agentx-wc-more-actions :أدخل المكون الذي يتم عرضه كـ المزيد من الإجراءات (أيقونة المزيد من الإجراءات) الرمز في جزء المعلومات المساعدة.

  • slot="settings": أدخل سمة داخل المكون الذي يتم عرضه كخيار إعادة تعيين ترتيب علامات التبويب في القائمة المنسدلة مزيد من الإجراءات . يمكن للوكلاء إعادة تعيين علامات التبويب في جزء المعلومات الإضافية إلى الترتيب الافتراضي بالنقر فوق أيقونة مزيد من الإجراءات > إعادة تعيين ترتيب علامات التبويب.

  • tabs-unique-id: أدخل نفس القيمة الفريدة المحددة لخاصية comp-unique-id لتعيين مكونات md-tabs وإعادة تعيينها .

يستخدم نموذج التعليمات البرمجية التالي الدالتين مزيد من الإجراءات وإعادة تعيين ترتيب علامات التبويب.

"comp": "agentx-wc-more-actions-widget"، "السمات": { "فتحة": "إعدادات"، "فئة": "جزء عنصر واجهة المستخدم"، "علامات تبويب فريدة من نوعها": "عينة-ديناميكية-مخصصة-علامات تبويب" }، "تابعون": [{ "شركات": "div"، "سمات": { "textContent": "إجراء مخصص"، "فتحة": "إجراء مخصص" }، "أطفال": [{ "شركات": "agentx-wc-notes-header-widget" }، { "شركات": "agentx-wc-menu-notification" } ] }]، }
Webex Contact Center more actions menu example, showing the 'Reset Tab Order' option.

بشكل افتراضي، يتم تعريف تلميح الأداة وأيقونة علامة القطع وإعادة تعيين ترتيب علامات التبويب لعلامات التبويب المعرفة مسبقا.

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

"comp": "md-tooltip" ، "السمات": { "الفئة": "علامات تبويب عنصر واجهة المستخدم" ، "الرسالة": "عنصر العينة" ، "النمط": "الحد الأقصى للعرض: 252 بكسل ؛ الحد الأدنى للعرض: 110 بكسل ؛ الفائض: مخفي. تجاوز النص: علامة القطع. مساحة بيضاء: nowrap ؛ عرض: كتلة مضمنة. الهامش السفلي: -10 بكسل ؛" } ،
Webex Contact Center more actions menu example, showing additional, custom options that can be added after the 'Reset Tab Order' option.

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

الحاجيات مقطوعة الرأس

في قسم مقطوعة الرأس ، يمكنك إضافة عناصر واجهة مستخدم مخفية ولا تظهر على Agent Desktop. تستخدم هذه الأدوات لتنفيذ المنطق في الخلفية. يفيد هذا القسم في تشغيل الأحداث التي تحدث على سطح المكتب وتنفيذ المنطق الخاص بعنصر واجهة المستخدم. على سبيل المثال ، فتح CRM Screen Pop مخصص للحصول على SMS عند وصوله.

المثال:

"مقطوعة الرأس":{ "id":"مقطوعة الرأس", "widgets":{ "comp1":{ "comp":"مقطوعة الرأس-widget-one", "script":"https://my-cdn.com/dynamic-widgets/headless-widget-one.js", }, "comp2":{ "comp":"مقطوعة الرأس-اثنان", "script":"https://my-cdn.com/dynamic-widgets/headless-widget-two.js", } }, "layout":{ "المناطق":[[ "comp1", comp2"]], "الحجم": { "cols": [1, 1], "الصفوف": [1] } } }

مشاركة البيانات من سطح المكتب إلى الأدوات

لتلقي بيانات في الوقت الفعلي من خلال الخصائص أو السمات داخل عنصر واجهة مستخدم مخصص، قم بتعيين قيم STORE المناسبة في تكوين JSON للتخطيط.

بالإضافة إلى ذلك ، للوصول إلى البيانات من خلال مشتركي JavaScript SDK ، يمكنك أيضا تمرير البيانات من خلال الخصائص أو السمات. إذا تم تصميم المكون الخاص بك للتفاعل مع تغييرات الخاصية أو السمة، فستحصل على تحديثات البيانات في الوقت الفعلي من Agent Desktop، وهو ما يسمى موفر البيانات.

حاليا ، لدينا مزود بيانات واحد تحت متجر رئيسي. لمزيد من المعلومات، راجع موفر البيانات - قسم خصائص وسمات عنصر واجهة المستخدم في Cisco Webex Contact Center دليل مطور سطح المكتب.

معاينة مكالمة الحملة

يقوم المسؤول بإنشاء الحملات، وتكوين وضع الطلب (معاينة)، وتعيين الحملات إلى الفرق. إذا كان أحد الوكلاء جزءا من الفريق الذي تم تعيين الحملات إليه، فيمكن للوكيل إجراء مكالمة حملة معاينة صادرة. لمزيد من المعلومات، راجع تكوين أوضاع الحملة الصادرة الصوتية في مركز اتصال Webex.

يقوم المسؤول بتكوين ما يلي في التخطيط المخصص لتمكين معاينة جهة اتصال الحملة لأحد الوكلاء.

جهة اتصال الحملة

يضيف المسؤول عنصر واجهة مستخدم جهة اتصال الحملة في حاوية رأس التخطيط المخصص. تعرض جهة اتصال الحملة معلومات الاتصال الخاصة بالعميل استنادا إلى الخصائص المحددة. لمزيد من المعلومات حول محاذاة التخطيط، راجع صف خاصية التخطيط في الصفحة جدول تفاصيل الخاصية.

المثال:

 "advancedHeader": [ { "comp": "agentx-preview-campaign", "properties": { "isCampaignManagementEnabled": "$STORE.agent.isCampaignManagementEnabled", "agentDbId": "$STORE.agent.acqueonAgentId", "lcmUrl": "$STORE.agent.lcmUrl", "isCallInProgress": "$STORE.agentContact.isActiveCall", "outdialEntryPointId": "$STORE.agent.outDialEp", "teamId": "$STORE.agent.getAcqueonTeamId", "campaignManagerAdditionalInfo": "$STORE.agent.campaignManagerAdditionalInfo", "orgId": "$STORE.agent.orgId", "dialerProxyHost": "$STORE.envVariables.serviceUrls.dialerProxyHost", "isProgressiveCampaignEnabled": "$STORE.app.featuresFlags.isProgressiveCampaignEnabled" } }, { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-notification" }, { "comp": "agentx-state-selector" } ] 

دليل المكالمات

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

المثال:

"لوحة":{ "comp":"md-tabs", "سمات":{ "class":"widget-tabs" }, "children":[ { "comp":"md-tab", "attributes":{ "slot":"tab", "class":"widget-pane-tab" }, "children":[ { "comp":"md-icon", "attributes":{ "name":"icon-note_16" } }, { "comp":"span", "textContent":"Call Guide" } ], "visibility":"CALL_GUIDE" }, { "comp":"md-tab-panel", "attributes":{ "slot":"panel", "class":"widget-pane" }, "children":[ { comp": "acqueon-call-guide", "script": "http://localhost:5555//index.js", // include CDN link here " wrapper":{ "title":"Call Guide", "maximizeAreaName":"app-maximize-area" }, "properties":{ "lcmKey":"$STORE.agentContact.getCallGuideProps.LCMKey", "agentDbId":"$STORE.agent.acqueonAgentId", "lcmUrl":"$STORE.agent.lcmUrl", "campaignManagerAdditionalInfo":"$STORE.agent.campaignManagerAdditionalInfo" "orgId": "$STORE.agent.orgId", "dialerProxyHost": "$STORE.envVaribles.serviceUrls.dialerProxyHost", "isProgressiveCampaignEnabled": "$STORE.app.featureFlags.isProgressiveCampaignEnabled" } } ], "الرؤية":"CALL_GUIDE" } ] }
  • تم تغيير مراجع خصائص comp التالية . يتم استبدال AgentX في قيمة العقار ب acqueon:
    • تمت إعادة تسمية AgentX-preview-campaign إلى Acqueon-Preview-campaign
    • تمت إعادة تسمية AgentX-Call-Guide إلى Acqueon-Call-Guide
  • يجب عليك استضافة القائمة ومدير الحملة (LCM) على CDN ثم تحديد عنوان URL في خاصية البرنامج النصي .

انبثاق الشاشة

في "تخطيط سطح المكتب"، يمكنك تكوين "الشاشة المنبثقة" بإحدى الطرق التالية:

  • كصفحة مخصصة

  • كأحد الأدوات في الصفحة المخصصة

  • كعلامة تبويب في جزء المعلومات الإضافية

يتم عرض نافذة الشاشة المنبثقة على سطح المكتب بناء على العوامل التالية:

بالنسبة للقناة الصوتية:

  • التكوين المحدد في "تخطيط سطح المكتب"

  • نشاط الشاشة المنبثقة المحدد في مصمم التدفق

بالنسبة للقنوات الرقمية الجديدة:

  • التكوين المحدد في "تخطيط سطح المكتب"

  • عقدة الشاشة المنبثقة المحددة في Connect Flow Builder

لمزيد من المعلومات حول تكوين الشاشة المنبثقة، راجع الشاشة المنبثقة.

تكوين الشاشة المنبثقة في شريط التنقل

يمكنك تكوين Screen Pop كصفحة مخصصة، أو كأحد عناصر واجهة المستخدم في صفحة مخصصة. للوصول إلى صفحة Screen Pop المخصصة، انقر فوق رمز Screen Pop على شريط التنقل. للوصول إلى عنصر واجهة مستخدم Screen Pop في الصفحة المخصصة، انقر فوق الرمز المخصص على شريط التنقل. لمزيد من المعلومات حول خصائص التنقل ، راجع التنقل (الصفحات المخصصة).

مثال: انبثاق الشاشة كصفحة مخصصة

{ "التنقل": { "التسمية": "الشاشة المنبثقة"، "الأيقونة": "المنبثقة"، "iconType": "الزخم"، "navigateTo": "/screenpop"، "المحاذاة": "top" }، "الصفحة": { "id": "agentx-wc-screen-pop"، "عناصر واجهة المستخدم": { "comp1": { "comp": "agentx-wc-screen-pop"، "properties": { "screenPopUrl": "$STORE.session.screenpop.screenPopSelector" } } }، "layout": { "المناطق": [ ["comp1"] ]، "الحجم": { "cols": [1]، "الصفوف": [1] } }، "الرؤية": "SCREEN_POP" }

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

"comp1": { "comp": "agentx-wc-screen-pop", "properties": { "screenPopUrl": "$STORE.session.screenpop.screenPopSelector" }

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

تكوين الشاشة المنبثقة في جزء المعلومات الإضافية

يمكنك تكوين الشاشة المنبثقة لتظهر كعلامة تبويب في جزء المعلومات المساعدة.

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

أضف السمة التالية في قسم اللوحة لتضمين Screen Pop كعلامة تبويب في جزء المعلومات المساعدة. لمزيد من المعلومات حول تفاصيل اللوحة ، راجع جزء المعلومات الإضافية.

مثال: نافذة الشاشة المنبثقة كعلامة تبويب في جزء المعلومات الإضافية

 { "comp":"md-tab", "attributes":{ "slot":"tab", "class":"widget-pane-tab" }, "Children":[ { "comp": "md-icon", "attributes": { "name": "pop-out_16" }}, { "comp": "span", "textContent": "Screen Pop" }], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "attributes": { "slot": "panel", "class": "widget-pane" }, "children": [{ "comp": "#SCREEN_POP" } ], }

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

على سبيل المثال، ضع في اعتبارك أنك قمت بتكوين إعدادات Screen Pop التالية:

  • مصمم التدفق—عرض الإعدادات كما في علامة تبويب المتصفح الجديدة
  • تخطيط سطح المكتب—كعلامة تبويب في جزء المعلومات الإضافية

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

أمثلة على حالات الاستخدام النموذجية

تقدم الأقسام التالية بعض الأمثلة للرجوع إليها:

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

المثال:

{ "التنقل": { "التسمية": "مقاييس إدارة تجربة العملاء"، "الأيقونة": "/التطبيق/الصور/wxm.bcd45cc3.svg"، "iconType": "أخرى"، "navigateTo": "wxm-metrics"، "المحاذاة": "top" }، "الصفحة": { "id": "wxm-metrics"، "عناصر واجهة المستخدم": { "comp1": { "comp": "agentx-wc-cloudcherry-widget"، "السمات": { "المقاييس": true }، "خصائص": { "userModel": "$STORE.app.userModel"، "spaceId": ""، "metricsId": ""، "teamId": "$STORE.agent.teamName"، "ani": "$STORE.agentContact.taskSelected.ani"، "isDarkMode": "$STORE.app. darkMode" }, "wrapper": { "title": "Customer Experience Journey", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1"] ], "size": { "cols": [1], "rows": [1] } } } },

للحصول على معرف المسافة ومعرف المقاييس، راجع Webex Experience Management الوثائق.

استخدام علامات التبويب في الصفحة المخصصة

المثال:

{ "التنقل": { "التسمية": "علامات التبويب الديناميكية"، "الرمز": "المعلومات المخزنة"، "iconType": "الزخم"، "التنقل إلى": "علامات التبويب الديناميكية"، "المحاذاة": "أعلى" }، "الصفحة": { "id": "page-id-tabs"، "عناصر واجهة المستخدم": { "comp1": { "comp": "md-tabs"، "الأطفال": [{ "comp": "md-tab"، "textContent": : "واحد"، "سمات": { "فتحة": "علامة التبويب" } }، { "شركات": "md-tab-panel"، "سمات": { "فتحة": "لوحة" }، "أطفال": [{ "شركات": "عنصر واجهة المستخدم اثنان"، "البرنامج النصي": "http:/my-cdn.com/dynamic-widgets/widget-two.js" }] }، { "شركات": "md-tab"، "textContent": "اثنان"، "سمات": { "فتحة": "علامة تبويب" } }, { "comp": "md-tab-panel", "textContent": "Two Content", "attributes": { "slot": "panel" } } ] }, "comp2": { "comp": "widget-two", "script": " http:/my-cdn.com/dynamic-widgets/widget-two.js" } }, "layout": { "areas": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "rows": [1] } } } }

جزء المعلومات الإضافية الافتراضي مع محفوظات جهات الاتصال والشاشة المنبثقة

المثال:

"اللوحة": { "شركات": "علامات تبويب md"، "السمات": { "الفئة": "علامات تبويب عنصر واجهة المستخدم" }، "الأطفال": [{ "شركات": "MD-tab"، "السمات": { "فتحة": "علامة التبويب"، "الفئة": "علامة تبويب جزء واجهة المستخدم" }، "الأطفال": [{ "شركات": "فتحة"، "سمات": { "الاسم": "CONTACT_HISTORY_TAB" }] }، { "شركات": "md-tab-panel"، "السمات": { "فتحة": "لوحة"، "فئة": "جزء عنصر واجهة المستخدم" }، "الأطفال": [{ "شركات": "فتحة"، "سمات": { "الاسم": "CONTACT_HISTORY" } }] }، ] }، { "شركات": "MD-tab"، "السمات": { "فتحة": "علامة التبويب"، "الفئة": "جزء عنصر واجهة المستخدم" }, { "comp": "md-tab", "السمات": { "فتحة": "tab", "class": "widget-pane-tab" }, "الأطفال": [{ "comp": "فتحة", "السمات": { "name": "SCREEN_POP_TAB" } }], "الرؤية": "SCREEN_POP" }, { "comp": "md-tab-panel"، "السمات": { "فتحة": "لوحة"، "فئة": "جزء واجهة المستخدم" }، "الأطفال": [{ "شركات": "فتحة"، "سمات": { "الاسم": "SCREEN_POP" } }]، "الرؤية": "SCREEN_POP" } }،

جزء المعلومات الإضافية مع عنصر واجهة مستخدم رحلة تجربة العملاء

المثال:

"اللوحة": { "comp": "md-tabs" ، "السمات": { "الفئة": "علامات تبويب عنصر واجهة المستخدم" } ، "الأطفال": [{ "comp": "md-tab" ، "السمات": { "فتحة": "علامة التبويب" } ، "الأطفال": [{ "comp": "فتحة" ، "السمات": { "الاسم": "WXM_JOURNEY_TAB" }] ، "الرؤية": "WXM_JOURNEY" } ، { "comp": "md-tab-panel" ، "السمات": { "فتحة": "لوحة" ، "فئة": "جزء عنصر واجهة المستخدم" } ، "الأطفال": [{ "comp": "agentx-wc-cloudcherry-widget" ، "خصائص": { "userModel": "$STORE.app.userModel" ، "spaceId": "" ، "metricsId": "" ، "teamId": "$STORE.agent. teamName", "ani": "$STORE.agentContact.taskSelected.ani", "isDarkMode": "$STORE.app.darkMode" }, "wrapper": { "title": "Customer Experience Journey", "maximizeAreaName": "app-maximize-area" } }], { "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, "Children": { "comp": "md-tab", "attributes": { "slot": "tab", "class": "widget-pane-tab" }, "Children": [{ "comp": "slot", "attributes": { "name": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "attributes": { "فتحة": "لوحة"، "فئة": "جزء عنصر واجهة المستخدم" }، "أطفال": [{ "شركات": "فتحة"، "سمات": { "الاسم": "CONTACT_HISTORY" } }] }، { "شركات": "MD-tab"، "السمات": { "فتحة": "علامة التبويب"، "الفئة": "عنصر واجهة المستخدم-جزء-علامة التبويب" }، "الأطفال": [{ "شركات": "فتحة"، "سمات": { "الاسم": "SCREEN_POP_TAB" } }]، "الرؤية": "SCREEN_POP" }، { "شركات": "MD-tab-panel"، "السمات": { "فتحة": "لوحة"، "فئة": "جزء عنصر واجهة المستخدم" }، "الأطفال": [{ "شركات": "فتحة"، "سمات": { "الاسم": "SCREEN_POP" } }]، "الرؤية": "SCREEN_POP" } "الرؤية": "SCREEN_POP" }, },

الترجمه

تدعم واجهة مستخدم سطح المكتب الترجمة ب 29 لغة.

فيما يلي اللغات المدعومة:

البلغارية والكاتالونية والصينية (الصين) والصينية (تايوان) والكرواتية والتشيكية والدنماركية والهولندية والإنجليزية (المملكة المتحدة) والإنجليزية (الولايات المتحدة) والفنلندية والفرنسية والألمانية والمجرية والإيطالية واليابانية والكورية والنرويجية والبولندية والبرتغالية (البرازيل) والبرتغالية (البرتغال) والرومانية والروسية والصربية والسلوفاكية والسلوفينية والإسبانية والسويدية والتركية.

تعتمد لغة واجهة مستخدم سطح المكتب على إعدادات تفضيلات اللغة في المستعرض الخاص بك. على سبيل المثال ، دعنا نعتبر أنك حددت اللغة المفضلة كلغة فرنسية على متصفح Firefox. عند تشغيل سطح المكتب في متصفح Firefox ، تظهر واجهة مستخدم سطح المكتب باللغة الفرنسية (الفرنسية). ومع ذلك، لا يتم ترجمة الرأس الأفقي وشريط التنقل والمكونات الأخرى المضافة في "تخطيط سطح المكتب" استنادا إلى إعدادات تفضيلات اللغة في المستعرض الخاص بك.

توطين مكونات سطح المكتب

لترجمة مكونات سطح المكتب،

  • استخدم مفاتيح الترجمة الموجودة المعينة في ملف app.json . إذا لم يتم تعيين مفاتيح الترجمة، يتم استخدام اللغة الافتراضية الإنجليزية (الولايات المتحدة). يمكنك إرسال طلب خدمة إلى فريق دعم Cisco لإضافة مفتاح ترجمة إلى ملف app.json .

    مثال: مفتاح الترجمة

    { "مشترك": { "buttonTitle": "إيقاف المؤقت" } }
  • أدخل الخاصية التالية حساسة لحالة الأحرف في ملف JSON لتخطيط سطح المكتب لترجمة مكون:

    "محتوى النص": "$I 18N.<مفتاح>" ، 

    where <key> يشير إلى مفتاح الترجمة المقابل في ملف app.json .

مثال: ترجمة مكون الرأس

"header": { "id": "header"، "widgets": { "head1": { "comp": "md-button"، "attributes": { "slot": "menu-trigger"، "style": "height: 64px" }، "children": [{ "comp": "span"، "textContent": "$I 18N.common.buttonTitle", } }, }, }

مثال: ترجمة مكون علامة التبويب في جزء المعلومات الإضافية

"لوحة": { "شركات": "md-tab", "السمات": { "فتحة": "tab" }, "الأطفال": [{ "comp": "span", "textContent": "$I 18N.panelTwo.screenPopTitle" }] }