إنشاء تخطيط مخصص لسطح المكتب

نظرة عامة

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

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

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

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

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

الوكيل
مشرف
مشرف ووكيل

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

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

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

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

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

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

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

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

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

نموذج واجهة مستخدم سطح المكتب للصوت

نموذج واجهة مستخدم سطح المكتب للقنوات الرقمية الجديدة

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

ادوار

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

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

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

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

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

{ "الوكيل": { "الإصدار": "0.1.0" ، "appTitle": "Webex Contact Center" ، "الشعار": "" ، "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": { ... } ، "لوحة": { ... } ، "الملاحة": { ... } ، "مستمر": { ... } ، "مقطوعة الرأس": { ... } }, }, "المشرف": { "الإصدار": "0.1.0", "appTitle": "Webex Contact Center", "الشعار": """, "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": { ... } ، "لوحة": { ... } ، "الملاحة": { ... } ، "مستمر": { ... } ، "مقطوعة الرأس": { ... } }, } },

عنوان التطبيق
الشعار
taskPageIllustration
إيقافنافيجيتأونقبولالمهمة
السحب دروب ممكن
مؤقت الإخطار
الحد الأقصىعدد الإشعارات
المتصفحNotificationTimer
wxmConfigure
desktopChatApp
منطقة
رأس متقدم.

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

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

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

مثال:

"appTitle": "Webex Contact Center"

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

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

يمكنك إما استخدام عناوين 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.

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

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

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

مثال:

"dragDropEnabled": خطأ

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

مؤقت الإخطار

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

مثال:

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

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

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

مثال:

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

المتصفحNotificationTimer

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

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

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

مثال:

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

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

wxmConfigure

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

مثال:

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

desktopChatApp

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

webexConfigure

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

يدير مسؤول الموقع مستخدمي اجتماع Webex ويعين الامتيازات فقط إذا كان لدى المستخدمين 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 لأدوار العامل والمشرف والوكيل المشرف إلا إذا قمت بتعيين قيمة خاصية webexConfigure إلى true لكل دور من هذه الأدوار. لا يمكن للوكيل أو المشرف أو وكيل المشرف تسجيل الخروج من تطبيق Webex.

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

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

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

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

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

headerالإجراءات

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

(Webex)
(مكالمة خارجية)
(مركز الإشعارات)

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

اسم الرمز	headerActions قيمة الخاصية
تطبيق Webex	webex
مكالمة طلب صادر	الاتصال الخارجي
مركز الإعلام	إعلام

مثال:

"headerActions": ["Webex"، "خارجي"، "إعلام"]،

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

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

المثال:

"headerActions": ["إشعار" ، "خارجية" ، "Webex"] ،

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

منطقة

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

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

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

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

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

رأس متقدم.

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

(Webex)
(مكالمة خارجية)
(مركز الإشعارات)
(محدد حالة العامل)

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

اسم الرمز	headerActions قيمة الخاصية
تطبيق Webex	AgentX-WebEx
مكالمة طلب صادر	agentx-outdial
مركز الإعلام	إعلام AgentX
محدد حالة العامل	AgentX-state-selector

مثال:

"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 App إلى جزء المعلومات الإضافية أو صفحة مخصصة، أو كعنصر واجهة مستخدم مخصص، فلا يزال بإمكان العامل الوصول إلى تطبيق Webex على الرغم من عدم توفر تطبيق Webex في الرأس الأفقي لسطح المكتب.
إذا أضفت عنصر واجهة مستخدم بتسمية طويلة، عرض اسم تسمية مقطوع وفقا للمساحة المتاحة.

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

مثال:
```
{ "شركات": "الموقت-القطعة"، "السمات": { "المدة": "08:00:00" }، "textContent": "مؤقت العد التنازلي للتحول الحالي"، "البرنامج النصي": "https://wxcc-demo.s3.amazonaws.com/widgets/timer-widget.js" }
```
سيتم اقتطاع التسمية "مؤقت العد التنازلي للتحول الحالي" وعرضها وفقا للمساحة المتاحة.
- تجنب إضافة عناصر واجهة مستخدم ذات تسمية طويلة.
- عندما تتدفق عنصر واجهة مستخدم إلى القائمة المنسدلة، لا يمكن النقر إلا على أيقونة عنصر واجهة المستخدم.
إذا تم تعيين قيمة خاصية webexConfigure على أنها false، فلن يتم عرض رمز التطبيق Webex على الرأس الأفقي لسطح المكتب، حتى إذا تمت إضافة قيمة Webex في خاصية advancedHeader . لمزيد من المعلومات، راجع webexConfigured.

Home صفحة

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

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

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

أدوات المحلل

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

Home تكوين تخطيط الصفحة

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

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

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

الجدول 2. تخطيط الصفحة Home الديناميكي—خصائص الصفحة
مال	الوصف والكود
الصفحة > useFlexLayout	التخطيط المرن هو مكون ويب جديد. لا يغير الأدوات الموجودة. يستخدم التخطيط المرن الجديد نفس تنسيق تكوين التخطيط بطريقة مبسطة. إنه متوافق مع الإصدارات السابقة ولا يؤثر على الأدوات الموجودة. تحتاج إلى تكوين تخطيط JSON. لتكوين تخطيط JSON، قم بتوفير ارتفاع عنصر واجهة المستخدم وعرضه. يتم عرض عنصر واجهة المستخدم بنفس التسلسل الذي تم تكوينه به داخل تخطيط JSON. الأدوات لها هامش افتراضي يبلغ 8 بكسل. يعتمد تخطيط JSON على الأبعاد (العرض × الارتفاع) والإحداثيات (X وY وZ) للأدوات. يدعم التخطيط المرن إمكانات مثل تغيير حجم عنصر واجهة المستخدم الفردي وتكبير عناصر واجهة المستخدم وما إلى ذلك. يتم قياس ارتفاع عناصر واجهة المستخدم الفردية بالبكسل. 1 وحدة ارتفاع = 40 بكسل. يعتمد عرض عنصر واجهة المستخدم على عدد الأعمدة في الحاوية وعدد الأعمدة التي تتغير بناء على عرض الحاوية. يتم عرض الأدوات من اليسار إلى اليمين. يستخدم محرك التخطيط المتقدم منطقا مخصصا لتطبيق كل من ضبط المساحة الأفقية والرأسية للأدوات. في البداية ، يتم تحميل التخطيط أفقيا. بعد التحميل أفقيا ، يتم تحميل الأداة عموديا وتضمن أن استخدام المساحة هو الأمثل. قم بتكوين الأدوات بناء على حجم الشاشة. يمكنك إما زيادة أو تقليل عرض الأدوات ، بناء على حجم الشاشة. هذا يجعل الأدوات أكثر قابلية للقراءة والاستخدام. يوفر التخطيط المرن نقاط توقف قياسية مثل الكبيرة والمتوسطة والصغيرة والصغيرة جدا. تبلغ دقة عناصر واجهة المستخدم الكبيرة 1360 بكسل أو أكثر. بالنسبة إلى عناصر واجهة المستخدم الكبيرة، حدد قيمة العمود ك 12. تبلغ دقة الأدوات المتوسطة من 1070 بكسل إلى 1360 بكسل. بالنسبة إلى عناصر واجهة المستخدم المتوسطة، حدد قيمة العمود ك 10. الأدوات الصغيرة لها دقة من 850 بكسل إلى 1070 بكسل. بالنسبة إلى عناصر واجهة المستخدم الصغيرة، حدد قيمة العمود ك 6. الحاجيات الصغيرة جدا لها دقة 500 بكسل. بالنسبة إلى عناصر واجهة المستخدم الصغيرة جدا، حدد قيمة العمود ك 4. قد تختلف وحدات البكسل هذه بناء على نظام التشغيل والمتصفح. "الصفحة": { "id": "الهبوط" ، "useFlexLayout": true ، "عناصر واجهة المستخدم": { "comp1": { "comp": "div" ، "العرض": 4 ، "الارتفاع": 4 ، "textContent": "القطعة 1" ، "السمات": { "النمط": "العرض: الحد الأقصى للمحتوى ؛ الهامش: 80 بكسل 240 بكسل ؛ اللون: أبيض؛" } }, "comp2": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 2", "attributes": { "style": "width: max-content; الهامش: 80 بكسل 240 بكسل ؛ اللون: أبيض؛" } } }
الصفحة > شركات	تأكد من توفير مكون مخصص فريد. `"شركات": "عنوان الصفحة" ،` `يمثل مكون عنوان` الصفحة عنوان `المستوى الثاني<h2>` لعنصر HTML المخصص.
الصفحة > الصفحةرأس الصفحة	تأكد من تحديد سلسلة عنوان يمكن أن تكون ثابتة أو ديناميكية أو كليهما. `يمثل مكون عنوان` الصفحة عنوان `المستوى الثاني<h2>` في عنصر HTML المخصص. سلسلة ثابتة: على سبيل المثال ، مرحبا ، مرحبا! `"comp": "عنوان الصفحة" ، "السمات": { "pageTitle": "مرحبا ، مرحبا!" }` سلسلة ديناميكية: لجلب القيمة من `المتجر`. على سبيل المثال ، جين دو. `"comp": "عنوان الصفحة"، "السمات": { "pageTitle": "$STORE.agent.agentName" }` كلاهما: مزيج من السلاسل الثابتة والديناميكية. على سبيل المثال ، مرحبا جين دو ، مرحبا! `"شركات": "عنوان الصفحة" ، "السمات": { "pageTitle": "مرحبا {$STORE.agent.agentName} ، مرحبا!" }` يجب أن تحيط بالجزء الديناميكي من السلسلة داخل الأقواس المتعرجة المغلقة {} والبادئة بالهيكل $.
الصفحة > الصفحةالعنوان الفرعي	تأكد من إضافة العنوان الفرعي الذي يتم عرضه على سطح المكتب. يمكن للمستخدم إضافة الانتقال إلى المحلل في العنوان الفرعي. كتلة التعليمات البرمجية للرأس الفرعي `"useFlexLayout": true ، "pageSubHeader": { "comp": "div" ، "السمات": { "style": "display: flex; تعويم: يمين ؛ الهامش: 16 بكسل 0 بكسل 16 بكسل 16 بكسل" }، "الأطفال": [ { "شركات": "div"، "الأطفال": [ { "شركات": "md-label"، "textContent": "$I 18N.pageSubHeader.queueName"، "السمات": { "النمط": "الهامش السفلي: 8 بكسل؛" }` كتلة التعليمات البرمجية للانتقال إلى المحلل في الرأس الفرعي `{ "comp": "div" ، "الأطفال": [ { "شركات": "agentx-more-actions-wrapper" ، "خصائص": { "actionList": [ { "comp": "agentx-wc-goto-analyzer" } ] } }`

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

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

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

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

المثال:

{ "التنقل": { "التسمية": "صفحة مخصصة"، "أيقونة": "معلومات مخزنة"، "iconType": "الزخم"، "navigateTo": "علامات التبويب الديناميكية"، "محاذاة": "أعلى"، "isDefaultLandingPage": true }، "page": { "id": "my - custom - page"، "useFlexLayout": true، "tools": { " comp1": { "comp": "md-tabs"، "children": [{ "comp": "md-tab"، "textContent": "Shift Timer"، "السمات": { "slot": "Tab" } }، { "comp": "md-tab-panel"، "السمات": { "فتحة": "لوحة" }، "أطفال": [{ "شركات": "بلدي - مخصص - مؤقت"، "المصدر": http: my-cdn.com/my-custom-timer.js "wrapper": { "title": "Shift Timer", "maximizeAreaName": "app-maximize-area" } }] }, { "comp": "md-tab", "textContent": "سوق الأوراق المالية", "متجاوب": "خطأ" "سمات": { "فتحة": "Tab" }, }, { "شركات": "md-tab-panel", "سمات": { "فتحة": "لوحة" }, "أطفال": [{ "شركات": "agentx-wc-iframe", "متجاوب": "خطأ" "سمات": { "src": "https://widget-kad.s3.amazonaws.com/Trading.htm" }, "غلاف": { "title": "سوق الأوراق المالية", "maximizeAreaName": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "Widget3"، "السمات": { "فتحة": "Tab" } }، { "comp": "md-tab-panel"، "textContent": "ثلاثة محتوى"، "سمات": { "فتحة": "لوحة" } } ] }، "comp2": { "شركات": "بلدي - جوجل - خرائط - مكون"، "المصدر": "https://my-cdn.com/my-google.maps.js "غلاف": { "العنوان": "خريطة جوجل"، "maximizeAreaName": "التطبيق-تكبير-منطقة" } } }، "تخطيط": { "المناطق": [ ["يسار"، "يمين"] ]، "الحجم": { "cols": [1، 1]، "الصفوف": [1] } } } }،

يصف الجدول التالي خصائص التنقل والصفحة بالإضافة إلى خصائصها التابعة:

الجدول 3. nav تفاصيل اوضح
مال	الوصف والكود
تسمية التنقل >	تشير هذه الخاصية إلى معرف التنقل في الصفحة. يقرأ قارئ الشاشة هذه الخاصية وتظهر في تلميح الأداة. هذه المعلمات ضرورية لعرض صفحتك المخصصة على شريط التنقل. `type Navigation.Item = { التسمية: سلسلة؛ نوع الأيقونة: "الزخم" \| "أخرى" ؛ رمز: سلسلة. محاذاة: "أعلى" \| "أسفل". التنقل إلى: سلسلة; حجم الأيقونة؟ :رقم; هل هو متجاوب؟ :منطقيه; };` خاصية التسمية هي عنوان الصفحة المخصصة.
التنقل > نوع الرمز	تمثل هذه الخاصية نوع الرمز الذي يتم عرضه في شريط التنقل للصفحة المخصصة. تتوفر أنواع الرموز التالية: الزخم: يمكنك اختيار أي رموز متاحة في المجموعة: https://momentum.design/icons. تتمثل ميزة استخدام Momentum في أنه يوفر بعض الرموز بإصدار "نشط". حالة استخدام إصدار نشط: على سبيل المثال، إذا اخترت نوع رمز الزخم إعلان، يمكنك رؤية الرمز الافتراضي على شريط التنقل. عند الانتقال إلى الصفحة المخصصة (المرتبطة بالرمز)، يتغير الرمز إلى إعلان نشط الإصدار تلقائيا. تأكد من التحقق مما إذا كان يحتوي على نشط إصدار هذا الرمز نفسه في مكتبة الأيقونات. أخرى: يمكنك توفير عنوان URL مخصص للصورة (مستضاف على شبكة CDN) يظهر على شريط التنقل. إذا كنت تستخدم رمزا مخصصا بالأبيض والأسود، فلن يكون الرمز مرئيا عند التبديل بين الوضعين الفاتح والداكن.
رمز التنقل >	تمثل هذه الخاصية اسم الرمز في مكتبة الزخم أو عنوان URL لشبكة CDN. `اكتب Navigation.Item ={ icon:"إعلان"; }; أو // اكتب Navigation.Item ={ icon:"https://my-cdn.com /my-navigation-icon.png"; };`
التنقل > محاذاة	تساعدك هذه الخاصية على محاذاة الرمز إلى أعلى شريط التنقل أو أسفله. في الوقت الحالي، تسمح الخاصية بالمحاذاة العلوية فقط.
nav > isDefaultLandingPage	تحدد هذه الخاصية الصفحة المقصودة الافتراضية للوكلاء في Agent Desktop. قم بتعيين هذه الخاصية إلى true لجعل صفحة شريط التنقل هي الصفحة المقصودة الافتراضية التي تظهر للوكلاء بعد تسجيل الدخول إلى Agent Desktop. إذا تم تعيين هذه الخاصية على "صواب" لأكثر من صفحة شريط تنقل واحدة، فسيعتبر النظام أن صفحة شريط التنقل الأولى هي الصفحة المقصودة الافتراضية. إذا لم يتم تعيين هذه الخاصية على صفحة شريط التنقل إلى true، تعمل الصفحة Home كصفحة مقصودة افتراضية. لا يمكنك تعيين تقارير إحصاءات أداء الوكيل كصفحة مقصودة افتراضية.
التنقل > التنقل إلى	تحدد هذه الخاصية اسم الصفحة المخصصة. يظهر هذا الاسم في شريط العناوين عندما يتنقل العامل. يجب ألا يتضمن navigateTo القيم التالية: الصور والخطوط وcss build_info والتعليمات والتطبيق وi18n والرموز والصور-mfe-wc والأصوات. `اكتب Navigation.Item = { navigateTo: "صفحتي - مخصصة - صفحة"; };`

الجدول 4. صفحة تفاصيل اوضح
مال	الوصف والكود
معرف الصفحة >	في صفحة الخاصية، يمكنك تحديد كائن الصفحة المخصصة (عنصر واجهة المستخدم الديناميكي). ال معرف تمثل الخاصية معرف صفحة فريدا. على سبيل المثال ، صفحتي المخصصة 1. يتعذر على العامل رؤية هذا المعرف على سطح المكتب. `type DynamicWidgets.Page = { id: string; widgets: Record < string, DynamicWidget.Options >; layout: Layout; };`
صفحة > استخدام فليكسوبوتينغ	التخطيط المرن هو مكون ويب جديد. لا يغير الأدوات الموجودة. يستخدم التخطيط المرن الجديد نفس تنسيق تكوين التخطيط بطريقة مبسطة. إنه متوافق مع الإصدارات السابقة ولا يؤثر على الأدوات الموجودة. تحتاج إلى تكوين تخطيط JSON. لتكوين تخطيط JSON، قم بتوفير ارتفاع عنصر واجهة المستخدم وعرضه. يتم عرض عنصر واجهة المستخدم بنفس التسلسل الذي تم تكوينه به داخل تخطيط JSON. الأدوات لها هامش افتراضي يبلغ 8 بكسل. يعتمد تخطيط JSON على الأبعاد (العرض × الارتفاع) والإحداثيات (X وY وZ) للأدوات. يدعم التخطيط المرن إمكانات مثل تغيير حجم عنصر واجهة المستخدم الفردي وتكبير عناصر واجهة المستخدم وما إلى ذلك. يتم قياس ارتفاع عناصر واجهة المستخدم الفردية بالبكسل. 1 وحدة ارتفاع = 40 بكسل. يعتمد عرض عنصر واجهة المستخدم على عدد الأعمدة في الحاوية وعدد الأعمدة التي تتغير بناء على عرض الحاوية. يتم عرض الأدوات من اليسار إلى اليمين. يستخدم محرك التخطيط المتقدم منطقا مخصصا لتطبيق كل من ضبط المساحة الأفقية والرأسية للأدوات. في البداية ، يتم تحميل التخطيط أفقيا. بعد التحميل أفقيا ، يتم تحميل الأداة عموديا وتضمن أن استخدام المساحة هو الأمثل. قم بتكوين الأدوات بناء على حجم الشاشة. يمكنك إما زيادة أو تقليل عرض الأدوات ، بناء على حجم الشاشة. هذا يجعل الأدوات أكثر قابلية للقراءة والاستخدام. يوفر التخطيط المرن نقاط توقف قياسية مثل الكبيرة والمتوسطة والصغيرة والصغيرة جدا. تبلغ دقة عناصر واجهة المستخدم الكبيرة 1360 بكسل أو أكثر. بالنسبة إلى عناصر واجهة المستخدم الكبيرة، حدد قيمة العمود ك 12. تبلغ دقة الأدوات المتوسطة من 1070 بكسل إلى 1360 بكسل. بالنسبة إلى عناصر واجهة المستخدم المتوسطة، حدد قيمة العمود ك 10. الأدوات الصغيرة لها دقة من 850 بكسل إلى 1070 بكسل. بالنسبة إلى عناصر واجهة المستخدم الصغيرة، حدد قيمة العمود ك 6. الحاجيات الصغيرة جدا لها دقة 500 بكسل. بالنسبة إلى عناصر واجهة المستخدم الصغيرة جدا، حدد قيمة العمود ك 4. قد تختلف وحدات البكسل هذه بناء على نظام التشغيل والمتصفح. "الصفحة": { "id": "الهبوط" ، "useFlexLayout": true ، "عناصر واجهة المستخدم": { "comp1": { "comp": "div" ، "العرض": 4 ، "الارتفاع": 4 ، "textContent": "القطعة 1" ، "السمات": { "النمط": "العرض: الحد الأقصى للمحتوى ؛ الهامش: 80 بكسل 240 بكسل ؛ اللون: أبيض؛" } }, "comp2": { "comp": "div", "width": 4, "height": 4, "textContent": "Widget 2", "attributes": { "style": "width: max-content; الهامش: 80 بكسل 240 بكسل ؛ اللون: أبيض؛" } } }
صفحة > عناصر واجهة المستخدم صفحة > شركات	يساعدك على تحديد عناصر واجهة المستخدم المخصصة الخاصة بك. لوضع عناصر واجهة مستخدم متعددة، حدد خيارات عنصر واجهة المستخدم بالتسلسل. تأكد من إعطاء كل عنصر واجهة مستخدم اسما فريدا للمنطقة. استخدمه في قسم التخطيط لاحقا. `"الحاجيات": { "comp1": { ... } "comp2": { ... } }` تمثل هذه الخاصية اسم عنصر HTML المخصص (المعروف باسم مكون ويب أو أي عنصر آخر - إذا كنت تريد استخدامه كغلاف). لمزيد من المعلومات، راجع أمثلة حالة الاستخدام. أدخل اسم العنصر المخصص هنا بدون أقواس زاوية ("<" أو ">"). على سبيل المثال ، "العنصر المخصص الخاص بي". يدعم كل إدخال ضمن قسم عناصر واجهة المستخدم التنسيق التالي: `خيارات النوع = { شركات: سلسلة؛ برنامج نصي؟ :خيط; خصائص؟ سجل سلسلة < ، أي > ؛ سمات؟ سجل سلسلة < ، سلسلة > ؛ أطفال؟ خيارات[]؛ محتوى النص؟ :خيط; نمط؟ < جزئي CSSStyleإعلان > ؛ المجمع؟ : { العنوان: سلسلة; maximizeAreaName: سلسلة; }; };`
صفحة > نص برمجي	(اختياري) هذه الخاصية مطلوبة فقط عند تحميل عنصر واجهة المستخدم أو المكون من موقع بعيد مثل CDN. `"comp1": { "comp": "widget-one"، "script": "http:/my-cdn.com / dynamic - widgets / widget - one.js ", }` لا تغير عنوان URL للبرنامج النصي للمكون نفسه. إذا كنت بحاجة إلى تغيير عنوان URL للبرنامج النصي لنفس المكون، فقم بأحد الإجراءات التالية: قم بإعلام العامل لمسح ذاكرة التخزين المؤقت للمتصفح وإعادة تحميل Agent Desktop. احتفظ بعنوان URL الحالي. استيراد عنوان URL للحزمة الجديدة ديناميكيا باستخدام جافا سكريبت المستضافة في عنوان URL الحالي. مثال: `(function() { var script = document.createElement("script"); script.src = <عنوان URL للبرنامج النصي JS الخاص بك> script.type = "text/javascript"; script.async = true; document.getElementsByTagName ("head").item(0).appendchild(script); } ) ()`
صفحة > خصائص	يمكنك تحديد الخصائص التي يجب تمريرها لمكون ويب. `"خصائص": { "المستخدم": "المسؤول", },`
صفحة > متجاوب	يحدد ما إذا كان مكون الويب أو عنصر واجهة المستخدم المستند إلى iFrame الذي تمت إضافته في التخطيط المخصص على `مستوى الصفحة` أو `مستوى التركيب` مستجيبا أم لا. تجعل مكونات الويب سريعة الاستجابة صفحة الويب الخاصة بك جذابة بصريا على جميع الأجهزة وسهلة الاستخدام. يجب عليك استخدام عناصر واجهة مستخدم iFrame سريعة الاستجابة. قم بتكوين هذه الخاصية بإحدى القيم التالية: صواب: لتمكين استجابة الأداة. بشكل افتراضي ، تستجيب جميع الأدوات بناء على أحجام الشاشة التقدمية والاتجاه ومناطق العرض للجهاز المستخدم. خطأ: لتعطيل استجابة الأداة. إذا كانت الأدوات لا تدعم العرض على أجهزة مختلفة، فقم بتمييزها على أنها غير مستجيبة. { "comp": "md-tab" ، "responsive": true ، "السمات": { "فتحة": "Tab" ، "الفئة": "عنصر واجهة المستخدم - جزء التبويب" } ، "الأطفال": [{ "comp": "فتحة" ، "سمات": { "الاسم": "SCREEN_POP_TAB" } }] ، "الرؤية": "SCREEN_POP" } ، { "comp": "md-tab-panel" ، "الاستجابة": false ، "السمات": { "فتحة": "لوحة" ، "فئة": "جزء عنصر واجهة المستخدم" } ، "الأطفال": [{ "شركات": "فتحة" ، "سمات": { "الاسم": "CALL_GUIDE" } }] ، "الرؤية": "CALL_GUIDE" } ، لا يمكن أن تضمن عناصر واجهة المستخدم غير المستجيبة أفضل تجربة للمستخدم ولا يتم عرضها في العرض الأصغر. يجب على العامل زيادة حجم نافذة المستعرض لعرض أي عناصر واجهة مستخدم تم تكوينها على أنها غير مستجيبة.
الصفحات > السمات	يمكنك تحديد سمات مكون ويب في هذا القسم. `"السمات": { "معطل": "خطأ", },`
الصفحة > الرؤية	يحدد ما إذا كانت عناصر واجهة المستخدم المعروضة من Cisco المضافة في التخطيط المخصص على `مستوى الصفحة` أو `مستوى التركيبات` مرئية أم لا. عناصر واجهة المستخدم التي تقدمها Cisco هي سجل جهات الاتصال، وCisco Webex Experience Management, IVR Transcript، ودليل مكالمة حملة المعاينة، والشاشة المنبثقة. يتم تضمين قيم خاصية الرؤية وتعريفها في ملف JSON الافتراضي لتخطيط سطح المكتب. لا يمكن للمسؤول تعديل قيم خاصية الرؤية للعناصر واجهة المستخدم المعروضة من Cisco. تم إهمال NOT_RESPONSIVE قيمة خاصية الرؤية . يمكنك الاستمرار في استخدامه فقط للتوافق مع الإصدارات السابقة. لا تتطلب أي قيمة تم تعيينها كما NOT_RESPONSIVE سابقا تعديلا ، حيث تظل الوظيفة كما هي. لتعيين عنصر واجهة مستخدم تم إنشاؤه حديثا على أنه متجاوب أو غير مستجيب، يجب عليك استخدام الخاصية المتجاوبة . لمزيد من المعلومات، راجع خاصية الاستجابة.
صفحة > أطفال	هذه الخاصية هي الجزء الأساسي من التخطيط. في المربع أطفال ، يمكنك تداخل العديد من المستويات كما هو مطلوب إذا كانت الأداة المستندة إلى مكون الويب تسمح لك بتمرير الأطفال. لجعل ذلك ممكنا ، يجب على المطور التعامل برمجيا مع قسرا محتوى. لمزيد من المعلومات، راجع Cisco Webex Contact Center دليل مطوري سطح المكتب. للتعرف على كيفية تمرير قيم STORE كخصائص، راجع مشاركة البيانات من سطح المكتب إلى عناصر واجهة المستخدم. `"الأطفال": [{ "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" }, { "comp": "div", "children": [{ "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" }, { "comp": "div", "textContent": "Test" } ] } ],` تتمثل ميزة قسم الصفيف "التابع" في أنه يمكنك استخدام مكونات الويب الموجودة في مواصفات التخطيط الخاصة بك ، والتي تعد بالفعل جزءا من حزمة سطح المكتب. تتضمن بعض مكونات ويب حزمة سطح المكتب ما يلي: agentx-wc-iframe: عنصر واجهة مستخدم يسمح لك بوضع أي صفحة ويب في iFrame كعنصر واجهة مستخدم. المنطقة الديناميكية: مكون يسمح لك بتمكين ميزة السحب والإفلات للوكلاء في مكان آخر غير الصفحات المخصصة. يمكن أن تتمتع الصفحات المخصصة أيضا بهذه الإمكانية إذا قمت بتمكين السحب والإفلات افتراضيا. أي مكون في مكتبة مكونات الويب الخاصة بواجهة مستخدم الزخم. لمزيد من المعلومات، راجع GitHub. على سبيل المثال: علامات تبويب md: غلاف حاوية علامات التبويب md-tab: رأس واحد Tab md-tab-panel: محتوى واحد Tab لمزيد من المعلومات حول سمات Tab الثابتة، راجع سمات علامات التبويب الثابتة.
صفحة > نص المحتوى	يساعدك على إضافة محتوى النص الخاص بك. `"textContent": "محتوى النص الخاص بي" ،`
نمط > الصفحة	يساعدك على تعيين نمط CSS معين للمكون الخاص بك. `"نمط": { "backgroundColor": "#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 Desktop Developer. لتحديث عنوان عنصر واجهة المستخدم المستند إلى iFrame، استخدم محتوى iFrame من نفس المجال. فيما يلي مثال نموذجي: < نوع البرنامج النصي = "نص / جافا سكريبت" > 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", { bubbles: true, detail: { title: "new title" } }); window.parent.dispatchEvent(e); }; < /script> < معرف الزر = "customEvent" > عنوان جديد < /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", "السمات": { "src": "https://blog.logrocket.com / الدليل النهائي - إلى - iframes / " }, "الغلاف": { "العنوان": "AgentX iFrame", "maximizeAreaName": "app-maximize-area" } },`
صفحة > تخطيط	يتيح لك ترتيب عناصر واجهة المستخدم على صفحة. يمثل التنسيق التالي تخطيط شبكة: `اكتب تخطيط = { المناطق: سلسلة[][]; الحجم: { صفوف: عدد[]; أعمدة: رقم[]; }; };` هنا يمكنك تحديد الشبكة بأسماء المناطق التي حددتها في قسم الأدوات . يوضح المثال التالي كيفية تحديد تخطيط ثلاثة صفوف وثلاثة أعمدة: `"التخطيط": { "المناطق": [ [ "comp1" ، "comp1" ، "comp3" ] ، [ "comp2" ، "comp2" ، "comp3" ] ، [ "comp4" ، "comp4" ، "comp4" ] ] ، "الحجم": { "cols": [1 ، 1 ، 1] ، "الصفوف": [1 ، 1 ، 1] } }` *التوزيع المتساوي لتخطيط 3 × 3* في قسم الحجم، تمثل الأرقام جزء المساحة الذي يمكن أن تشغله الأداة، بالنسبة إلى عناصر واجهة المستخدم الأخرى. جميع الأعمدة الثلاثة تشغل 1 جزء متساو من المساحة. مع 100٪ كعرض متاح ، تشغل كل عنصر واجهة مستخدم 33.33٪ من المساحة الأفقية. *مع عرض عمود متساو* مثال آخر على حالة الاستخدام ، إذا قمت بتعيينه ك "cols": [1 ، 2 ، 2] ، فهذا يعني أن المساحة الإجمالية مقسمة على 5 (1 + 2 + 2) وأن الأداة الأولى تشغل 20٪ من المساحة الأفقية. تأخذ الأدوات الثانية والثالثة 40٪ لكل منهما. لمزيد من المعلومات، راجع المفاهيم الأساسية لتخطيط الشبكة. *بعد تغيير عرض العمود*
صفحة > الجذر	يسمى تداخل التخطيطات تخطيطا فرعيا. في حالة وجود تخطيطات متداخلة في تكوين التخطيط الخاص بك ، يجب أن يكون لديك كائن "ROOT" واحد كأصل للتخطيطات الفرعية. وإلا، يمكن أن يكون تكوين التخطيط مسطحا إذا لم يكن التداخل مطلوبا. يوفر هذا التخطيط الفرعي مزيدا من التحكم في سلوك تغيير حجم التخطيط. يجب أن تكون خاصية تخطيط الصفحة من النوع سجل<سلسلة، تخطيط>. تسمح لك خاصية التخطيط بترتيب عناصر واجهة المستخدم على صفحة. { "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" } } ، "تخطيط": { "ROOT": { "المناطق": [ ["c1"، "sub1"]، ["c2"، "sub2"]، ]، "الحجم": { "cols": [1، 1]، "الصفوف": [1، 1] } }، "sub1": { "المناطق": [ ["c3"، "c4"] ]، "الحجم": { "cols": [1، 1]، "الصفوف": [1] } }، "sub2": { "المناطق": [ ["c1"]، ["c5"] ]، "الحجم": { "cols": [1] ، "الصفوف": [1 ، 1] } } } } يقوم هذا الإعداد بإنشاء شبكة في تخطيط ROOT مع شبكتين فرعيتين يمكنك تغيير حجمهما بشكل مستقل. *مظهر التخطيط الفرعي* يؤثر تغيير حجم أحد المكونات على المكونات الموجودة داخل ذلك التخطيط الفرعي. *بعد تغيير حجم كلا التخطيطين الفرعيين* كن على علم بالحالات التالية: حلقة لا نهائية: إذا قمت بتضمين تخطيط ROOT كتخطيط فرعي ل ROOT ، فإنه يتسبب في خطأ "تجاوز مكدس المكالمات" ويمتد إلى حلقة لا نهائية. `{ "تخطيط": { "ROOT": { "المناطق": [ ["c1"، "c2"]، ["c3"، "ROOT"]، ]، "الحجم": { "cols": [1، 1]، "الصفوف": [1، 1] } } }` *تخطيط فرعي مع حلقة لانهائية* أوقات التخطيط الفرعي نفسه (N): إذا قمت بتضمين التخطيط الفرعي في شبكتك أكثر من مرة بنفس الاسم ، وإذا قمت بتغيير حجم أحدها ، تغيير حجم جميع التخطيطات الفرعية تلقائيا. إذا لم يكن هذا هو السلوك المطلوب ، فأعد تسمية كل من التخطيطات الفرعية باسم فريد. `{ "تخطيط": { "ROOT": { "المناطق": [ ["c1"، "sub1"]، ["c2"، "sub1"]، ]، "الحجم": { "cols": [1، 1]، "الصفوف": [1، 1] } }، "sub1": { "المناطق": [ ["c3"، "c4"] ]، "الحجم": { "cols": [1، 1]، "الصفوف": [1] } } } }` *تخطيط فرعي مع N مرات*

سمات علامات التبويب الثابتة

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

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

{ "comp": "علامات تبويب md"، "السمات": { "استمرار التحديد": صواب، "معرف علامات التبويب": "معرف فريد لجميع علامات التبويب معا في الحاوية" }، }

مال	الوصف
اختيار الاستمرار	لتعيين `علامات تبويب` md لتكون ثابتة. القيمة الافتراضية هي صواب.
معرف علامات التبويب	تعريف فريد لجميع علامات التبويب معا في الحاوية.

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

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

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

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

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

المثال:

"المنطقة": { "ثابت": [{ "comp": "md-tab"، "السمات": { "فتحة": "Tab" }، "الأطفال": [{ "شركات": "أيقونة md"، "السمات": { "الاسم": "emoticons_16" } }، { "comp": "span"، "textContent": "عنصر واجهة مستخدم الصفحة المخصصة" }] }، { "comp": "md-tab-panel"، "السمات": { "فتحة": "لوحة" }، "أطفال": [{ "شركات": "منطقة ديناميكية"، "خصائص": { "المنطقة": { "المعرف": "dw-panel-two"، "عناصر واجهة المستخدم": { "comp1": { "comp": "agentx-wc-iframe"، "السمات": { "src": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" }، "الغلاف": { "العنوان": "AgentX iFrame", "maximizeAreaName": "app-maximize-area" } }, "comp2": { "comp": "uuip-widget-two", "script": "./dynamic-widgets/widget-two.js", "attributes": { "title": "WIDGET 2 content" }, "wrapper": { "title": "عنوان عنصر واجهة المستخدم 2"، "maximizeAreaName": "app-maximize-area" } } }، "layout": { "المناطق": [ ["comp1"، "comp2"] ]، "الحجم": { "cols": [1، 1]، "الصفوف": [1] } } } }] } ] }

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

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

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

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

أدوات الرأس

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

المثال:

"header":{ "id":"header", "widgets":{ "head1":{ "comp":"header-widget-one", "script":"https://my-cdn.com/dynamic-widgets/header-widget-one.js", }, "head2":{ "comp":"header-widget-two", "script":"https://my-cdn.com/dynamic-widgets/header-widget-two.js", } }, "layout":{ "areas":[[ "head1", "head2"]], "size": { "cols": [1, 1], "rows": [1] } } }

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

المثال:

"header": { "id": "dw-header"، "عناصر واجهة المستخدم": { "head1": { "comp": "md-tooltip"، "السمات": { "الرسالة": "Netlify" }، "الأطفال": [{ "comp": "agentx-wc-iframe"، "السمات": { "src": "https://keen-jackson-8d352f.netlify.app" } }] }، }، }

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

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

المثال:

"head1": { "comp": "agentx-wc-iframe", "السمات": { "src": "https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm", "style": "الارتفاع:64px; عرض:فليكس؛" } },

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

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

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

سجل جهات الاتصال
IVR نسخة طبق الأصل
رحلة تجربة العملاء
انبثاق الشاشة

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

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

المثال:

"اللوحة": { "comp": "علامات تبويب md"، "السمات": { "الفئة": "علامات تبويب عنصر واجهة المستخدم" }، "الأطفال": [{ "شركات": "MD-tab"، "السمات": { "فتحة": "Tab"، "الفئة": "علامة تبويب جزء واجهة المستخدم" }، "الأطفال": [{ "شركات": "فتحة"، "السمات": { "الاسم": "CONTACT_HISTORY_TAB" } }] }، { "شركات": "md-tab-panel"، "السمات": { "فتحة": "لوحة"، "فئة": "جزء عنصر واجهة المستخدم" }، "الأطفال": [{ "شركات": "فتحة"، "سمات": { "الاسم": "CONTACT_HISTORY" } }] }، { "شركات": "MD-tab"، "السمات": { "فتحة": "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": "عنصر واجهة مستخدم مخصص" } ] }, { "comp": "md-tab-panel"، "سمات": { "فتحة": "لوحة" }، "أطفال": [{ "شركات": "منطقة ديناميكية"، "خصائص": { "منطقة": { "معرف": "dw-panel-two"، "عناصر واجهة المستخدم": { "comp1": { "comp": "agentx-wc-iframe"، "السمات": { "src": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" }، "غلاف": { "title": "AgentX iFrame"، "maximizeAreaName": "app-maximize-area" } }، "comp2": { "comp": "عنصر واجهة المستخدم واحد"، "البرنامج النصي": "https://my-cdn.com/dynamic-widgets/widget-one.js"، "المجمع": { "title": "عنوان عنصر واجهة المستخدم"، "maximizeAreaName": "app-maximize-area" } } }، "تخطيط": { "المناطق": [ ["comp1"]، ["comp2"] ]، "الحجم": { "cols": [1]، "الصفوف": [1، 1] } } } } }] } }،

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

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

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

مثال لوضع الرموز والتسميات في الخاصية التابعة

{ "comp": "md-tab", "السمات": { "فتحة": "Tab", "class": "widget-pane-tab" }, "Children": [{ "comp": "md-icon", "attributes": { "name": "transcript_16" } }, { "comp": "span", "textContent": "My Widget Tab" } ], },

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

{ "comp": "md-tab" ، "السمات": { "فتحة": "Tab" } ، "الأطفال": [{ "comp": "span" ، "السمات": { "النمط": "محاذاة العناصر: المركز ؛ عرض: فليكس؛" }، "الأطفال": [{ "شركات": "IMG"، "السمات": { "src": "http: //my-cdn.com/icon.svg"، "العرض": 16، "الارتفاع": 16، "النمط": "الهامش الأيمن: 0.5rem;" } }، { "comp": "span"، "textContent": "My Widget Tab" } ] }]، }،

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

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

"comp": "md-tooltip" ، "السمات": { "الفئة": "علامات تبويب عنصر واجهة المستخدم" ، "الرسالة": "نموذج Tab 1" ، "النمط": "الحد الأقصى للعرض: 252 بكسل ؛ الحد الأدنى للعرض: 110 بكسل ؛ الفائض: مخفي. تجاوز النص: علامة القطع. مساحة بيضاء: nowrap ؛ عرض: كتلة مضمنة. الهامش السفلي: -10 بكسل ؛" } ،

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

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

"comp": "علامات تبويب md" ، "السمات": { "الفئة": "علامات تبويب عنصر واجهة المستخدم" ، "قابل للسحب": صحيح ، "معرف فريد من نوعه": "عينة ديناميكية مخصصة علامات التبويب" } ،

قابل للسحب: قم بتعيين قيمة الخاصية القابلة للسحب إلى صواب.

comp-unique-id: أدخل قيمة فريدة لتعريف المكون.

المثال:

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

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

"شركات": "AgentX-WC-more-actions-widget", "السمات": { "فتحة": "إعدادات", "فئة": "جزء عنصر واجهة المستخدم", "علامات تبويب فريدة من نوعها": "عينة-ديناميكية-مخصصة-علامات تبويب" },

agentx-wc-more-actions-widget: أدخل المكون الذي يتم عرضه على أنه مزيد من الإجراءات () في جزء "المعلومات المساعدة".
slot="settings": أدخل سمة داخل المكون الذي يتم عرضه كخيار إعادة تعيين Tab Order في القائمة المنسدلة مزيد من الإجراءات . يمكن للوكلاء إعادة تعيين علامات التبويب في جزء المعلومات الإضافية إلى الترتيب الافتراضي بالنقر فوق > إعادة تعيين Tab النظام.
tabs-unique-id: أدخل نفس القيمة الفريدة المحددة لخاصية comp-unique-id لتعيين مكونات md-tabs وإعادة تعيينها .

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

"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.

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

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

"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 Contact Center.

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

جهة اتصال الحملة
دليل المكالمات

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

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

المثال:

 "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.envVaribles.serviceUrls.dialerProxyHost", "isProgressiveCampaignEnabled": "$STORE.app.featuresFlags.isProgressiveCampaignEnabled" } }, { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-notification" }, { "comp": "agentx-state-selector" } ]

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

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

المثال:

"لوحة":{ "comp":"md-tabs", "attributes":{ "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-bit" }, "children":[ { "comp": "acqueon-call-guide", "script": "http://localhost:5555//index.js", // include CDN الرابط هنا "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 في خاصية البرنامج النصي .

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

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

كصفحة مخصصة
كأحد الأدوات في الصفحة المخصصة
ك Tab في جزء المعلومات الإضافية

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

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

التكوين المحدد في "تخطيط سطح المكتب"
نشاط الشاشة المنبثقة المحدد في مصمم التدفق

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

التكوين المحدد في "تخطيط سطح المكتب"
عقدة الشاشة المنبثقة المحددة في 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" }

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

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

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

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

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

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

 { "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 التالية:

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

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

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

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

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

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

المثال:

{ "التنقل": { "التسمية": "مقاييس إدارة تجربة العملاء"، "الأيقونة": "/التطبيق/الصور/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": "One"، "السمات": { "slot": "Tab" } }، { "comp": "md-tab-panel"، "السمات": { "فتحة": "لوحة" }، "أطفال": [{ "comp": "widget-two"، "script": "http:/my-cdn.com/dynamic-widgets/widget-two.js" }] }، { "comp": "md-tab"، "textContent": "اثنان"، "سمات": { "slot": "Tab" } }, { "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"، "السمات": { "فتحة": "Tab"، "الفئة": "عنصر واجهة المستخدم-جزء-علامة التبويب" }، { "شركات": "علامة تبويب md"، "السمات": { "فتحة": "Tab"، "الفئة": "جزء عنصر واجهة المستخدم-علامة التبويب" }، "الأطفال": [{ "شركات": "فتحة"، "سمات": { "الاسم": "SCREEN_POP_TAB" } }]، "الرؤية": "SCREEN_POP" }، { "شركات": "md-tab-panel"، "السمات": { "فتحة": "لوحة"، "فئة": "جزء عنصر واجهة المستخدم" }، "الأطفال": [{ "شركات": "فتحة"، "سمات": { "الاسم": "SCREEN_POP" } }]، "الرؤية": "SCREEN_POP" } }،

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

المثال:

"اللوحة": { "comp": "md-tabs" ، "السمات": { "الفئة": "علامات تبويب عنصر واجهة المستخدم" } ، "الأطفال": [{ "comp": "md-tab" ، "السمات": { "فتحة": "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" ، "السمات": { "فتحة": "لوحة" ، "فئة": "جزء عنصر واجهة المستخدم" } ، "الأطفال": [{ "شركات": "فتحة" ، "سمات": { "الاسم": "CONTACT_HISTORY" } }] } ، { "comp": "md-tab" ، "السمات": { "فتحة": "Tab" ، "الفئة": "عنصر واجهة المستخدم - جزء التبويب" } ، "الأطفال": [{ "شركات": "فتحة" ، "سمات": { "الاسم": "SCREEN_POP_TAB" } }] ، "الرؤية": "SCREEN_POP" } ، { "comp": "md-tab-panel" ، "السمات": { "فتحة": "لوحة" ، "فئة": "جزء عنصر واجهة المستخدم" } ، "الأطفال": [{ "شركات": "فتحة" ، "سمات": { "الاسم": "SCREEN_POP" } }]، "الرؤية": "SCREEN_POP" } "الرؤية": "SCREEN_POP" }، }،

الترجمه

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

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

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

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

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

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

استخدم مفاتيح الترجمة الموجودة المعينة في ملف app.json . إذا لم يتم تعيين مفاتيح الترجمة، يتم استخدام اللغة الافتراضية الإنجليزية (الولايات المتحدة). يمكنك إرسال طلب خدمة إلى Cisco Support لإضافة مفتاح ترجمة إلى ملف 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", } }, }, }

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

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

شكرًا على ملاحظاتك.

إنشاء تخطيط مخصص لسطح المكتب

نظرة عامة

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

ادوار

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

الشعار

taskPageIllustration

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

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

مؤقت الإخطار

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

المتصفحNotificationTimer

wxmConfigure

desktopChatApp

headerالإجراءات

منطقة

رأس متقدم.

Home صفحة

أدوات المحلل

Home تكوين تخطيط الصفحة

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

سمات علامات التبويب الثابتة

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

أدوات الرأس

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

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

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

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

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

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

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

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

الترجمه

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

الشركات صغيرة الحجم

المؤسسة

الأجهزة

حلول لـ

الموارد

الشركة