Genel Bakış

Masaüstü Yerleşimi özelliği, Webex Contact Center Masaüstünü iş gereksinimlerinize göre yapılandırmanıza olanak sağlar. Logo, başlık ve araçlar gibi öğeleri özelleştirebilirsiniz. Bir masaüstü yerleşimi oluşturabilir ve bir eki kişiye atayabilirsiniz. Bu yerleşim, bu ekibin parçası olarak oturum açan tüm temsilciler için masaüstünde temsilci deneyimini oluşturur.

İki tür yerleşim vardır:

  • Genel Yerleşim: Bu yerleşim, bir ekip oluşturduğunuzda varsayılan olarak atanan, sistem tarafından oluşturulan bir yerleşimdir. Daha fazla bilgi için, bkz . Ekipleri yönetme. Bir ekip oluşturduğunuzda, Genel Yerleşim otomatik olarak ekibin masaüstü yerleşimi olarak ayarlanır. Bu yerleşimi silemezsiniz.

  • Özel Yerleşim: Özelleştirilmiş bir masaüstü deneyimi sağlayan bir yerleşim. Bir veya daha fazla ekip için özel bir yerleşim oluşturabilirsiniz.

Bir temsilci oturum açtığında yeni bir masaüstü yerleşimi atarsanız, temsilcinin yeni yerleşimi görmek için sayfayı yeniden yüklemesi gerekir.

Webex Contact Center Masaüstü üç kişiyi destekler:

  • Temsilci

  • Gözetmen

  • Gözetmen ve Bir Temsilci

JSON yerleşim dosyası, her kişi için ayrı bölümlere sahiptir. Yöneticinin JSON yerleşim dosyasının ilgili bölümünde her kişi için ayarları yapılandırması gerekir. Örnek JSON yerleşim dosyası hakkında daha fazla bilgi için bkz . JSON Yerleşimi Üst Düzey Özellikler.

Cisco Masaüstü Yerleşimine yeni bir özellik eklediğinde, değiştirilmemiş düzen yeni özelliklerle otomatik olarak güncellenir. Güncellenen masaüstü yerleşimi, değiştirilmemiş masaüstü yerleşimini kullanan mevcut ekipler tarafından otomatik olarak kullanılabilir. Değiştirilmemiş masaüstü yerleşimini kullanan Masaüstü kullanıcıları, tarayıcıya oturum açtıklarında veya yeniden yükledikleri zaman yeni yerleşim tabanlı özellikleri alır.

Varsayılan Masaüstü Layout.json dosyasını herhangi bir değişiklik yapmadan kullanıyorsanız , değiştirilmemiş bir yerleşim olarak kabul edilir. Ancak, Varsayılan Masaüstü Layout.json dosyasını indirip yeniden karşıya yüklerseniz, dosya içeriği veya dosya adı değiştirilmese bile değiştirilmiş bir yerleşim sayılır.

Özel masaüstü yerleşimi kullanan ekiplerin, yeni özellikleri içermesi için yöneticilerin yerleşim tanımını düzenli olarak yenilemesi gerekir. Yöneticiler değiştirilmemiş bir yerleşimi veya değiştirilmemiş yerleşimi kullanan bir ekibi görüntülediğinde, yeni Masaüstü özelliklerinin otomatik olarak uygulandığını belirten bir mesaj görüntülenir.

Masaüstünde, iki tür araç vardır: iframe tabanlı ve web bileşeni tabanlı. Üstbilgi, gezinme (özel sayfa), kalıcı alan, başsız alan ve aux paneli Bir Masaüstünde özelleştirilebilir alandır. Bunlar araç değil.

Aşağıdaki listede yapılandırabileceğiniz boşluklar ayrıntılı olarak açıklanabilir. Resimler Masaüstünün düzenini gösterir:

  1. Başlık ve Logo alanı: Bu alan ekranınızın sol üst köşesinde Webex Contact Center logosu ve adını (varsayılan) görüntüler.

  2. Yatay Üstbilgi alanı: Bu alanın özel araçlarla doldurulan yapılandırılabilir bir alanı vardır. Bu araçlar, örneğin satır içi bilgileri ve açılır menüleri görüntüleyebilir. Bu üstbilginin yüksekliği yalnızca 64 piksel olduğundan, araç yüksekliği üstbilgi yüksekliğini geçemez.

  3. Çalışma alanı: Bu alan gezinti çubuğundaki veya bir temsilci müşterilerle etkileşime girdiğinde yapılan seçime göre değişir. Bir temsilci bir çağrıdayken, bu alan etkileşim kontrolü ve yardımcı bilgi panosunu (özel araçlar ve kalıcı araçlar içeren) görüntüler. Bir temsilci e-posta, sohbet veya sosyal kanallarda etkileşimde bulunduğunda, bu alan çalışma alanı ve yardımcı bilgi panosunu (kalıcı araç alanını içeren) görüntüler.

    Özel Sayfa , çalışma alanı bölmesindeki Masaüstü arabiriminde görüntülenir. Özel sayfaya, gezinti çubuğundaki simgeler aracılığıyla erişebilirsiniz. Her özel sayfa bir veya daha fazla özel araç içerebilir.

    Özel Araç , JSON yerleşiminde yapılandırılan üçüncü taraf bir uygulamadır. Özel aracı özel sayfaya, özel Tab (Yardımcı Bilgiler bölmesi) veya Masaüstünün yatay üstbilgisine yerleştirebilirsiniz.

  4. Gezinti Çubuğu alanı: Özel sayfalara erişmek üzere gezinti öğeleri eklemek için bu alanı kullanın.

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.
Ses için Örnek Masaüstü UI
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.
Yeni Dijital Kanallara Yönelik Örnek Masaüstü Ui

JSON Yerleşimi Üst Düzey Özellikler

Roller

Varsayılan JSON yerleşimi aşağıdaki üç rollere sahiptir.

  • temsilci—Bir temsilci temsilci etkinliklerini işlemek üzere Webex Contact Center Desktop uygulamasında oturum açtığınızda görüntülenecek Masaüstü Yerleşimi'ni ayarlamak için.

  • gözetmen—Bir gözetmen yalnızca gözetmen kabiliyetlerini işlemek üzere Webex Contact Center Desktop uygulamasında oturum açtığınızda görüntülenecek Masaüstü Yerleşimi'ni ayarlamak için.

    Bir gözetmen Masaüstünde oturum açtığınızda, birincil ekip için belirtilen masaüstü yerleşimi uygulanır. Birincil ekip sağlamazsanız, genel düzen uygulanır. Varsayılan olarak, APS raporları devre dışıdır.

  • gözetmenTemsilci—Bir gözetmen hem gözetmen kabiliyetlerini hem de temsilci etkinliklerini işlemek üzere Webex Contact Center Desktop uygulamasında oturum açtığınızda görüntülenecek Masaüstü Yerleşimini ayarlamak için.

İlgili JSON yerleşim dosyasının ilgili kişisindeki her rol için araçlar ekleyebilir veya değiştirebilirsiniz.

JSON yerleşimi için rolü temel alan üst düzey özellikler şunlardır:

{ "temsilci": { "sürüm": "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", "bildirim"], "alan": { "advancedHeader": { ... }, "panel": { ... }, "navigasyon": { ... }, "kalıcı": { ... }, "kafasız": { ... } }, }, "gözetmen": { "sürüm": "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", "bildirim"], "alan": { "advancedHeader": { ... }, "panel": { ... }, "navigasyon": { ... }, "kalıcı": { ... }, "kafasız": { ... }, "homePage": { ... } }, } "SupervisorAgent": { "sürüm": "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", "bildirim"], "alan": { "advancedHeader": { ... }, "panel": { ... }, "navigasyon": { ... }, "kalıcı": { ... }, "kafasız": { ... } }, } },
  • JSON yerleşimi özelliklerinde yapılan değişiklikler Masaüstü tarayıcısı yenilendiğinde etkinleşir.
  • JSON yerleşiminde etkinleştirdiğiniz bir özellik Masaüstünde kullanılamıyorsa, özelliği etkinleştirmek için Cisco Desteğine başvurun.
  • JSON yerleşimindeki tüm özellikler büyük/küçük harfe duyarlıdır.

appTitle

Masaüstünün yatay üstbilgisinde bir başlık belirtmek için. Varsayılan başlık Webex Contact Center'dir .

Örnek:

"appTitle": "Webex Contact Center"

Varsayılan appTitle, Contact Center Desktop uygulamasından Webex Contact Center olarak değiştirilir. Eski varsayılan appTitle (Contact Center Desktop) kullanan mevcut özel yerleşimler üzerinde herhangi bir etkisi yoktur. Yeni appTitle'ı kullanmak için özel yerleşimi değiştirmeniz gerekir. Ancak, yeni genel düzen varsayılan appTitle as Webex Contact Center kullanır.

Başlık metin, resim veya boş dize olabilir. Başlık metni iki satır halinde görünür. Metin ikinci satırı aşıyorsa, bir üç nokta simgesi görüntülenir ve araç ipucu başlığın tamamını görüntüler. Başlıklara stiller uygulanamaz.

Veri URI'lerini (Tekdüzen Kaynak Tanımlayıcısı) kullanabilir ya da bir içerik iletim ağı (CDN), Amazon Web Services (AWS) Basit Depolama Hizmeti (S3) demetinde veya benzer bir barındırma hizmeti üzerinde özel bir başlık resmi barındırabilir ve ardından barındırılan görüntünün URL'sini belirtebilirsiniz. Desteklenen başlık resmi biçimleri PNG, JPG, JPEG, GIF, SVG ve WebP'tir. Desteklenen başlık resmi boyutu 184 x 32 pikseldir (genişlik x yükseklik).

logo

Şirket logosu için bir URL belirtmek için. URL vermezseniz varsayılan olarak Webex Contact Center logosu görünür.

Örnek:

"logo": "https://my-cdn.com/logo.png"

Bir CDN, Amazon Web Services (AWS) Basit Depolama Hizmeti (S3) demetinde veya benzer bir barındırma hizmetinde özel bir logo görüntüsü barındırabilir ve ardından barındırılan görüntüye URL'yi belirtebilirsiniz. Desteklenen logo görüntü biçimleri PNG, JPG, JPEG, GIF, SVG ve WebP'tir. Desteklenen logo resmi boyutu 96 x 32 pikseldir (genişlik x yükseklik).

Tablo 1. Masaüstü Yerleşim Yapılandırmasına Dayalı olarak appTitle ve logo için Ekran Matrisi
Koşul Örnek appTitle logo
appTitle ve logo yapılandırılmamışsa 
"appTitle": "", "logo": "",
Başlık yok Varsayılan logo
appTitle ve logo yapılandırılmışsa 
"appTitle": "ABC Company", "logo": "https://my-cdn.com/abclogo.png",
Yapılandırılan metin Yapılandırılmış logo
appTitle yapılandırılmış ve logo yapılandırılmamışsa 
"appTitle": "ABC Company", "logo": "",
Yapılandırılan metin Varsayılan logo

appTitle yapılandırılmamış ve logo yapılandırılmışsa

 
"appTitle": "", "logo": "https://my-cdn.com/abclogo.png",
Başlık yok Yapılandırılmış logo
appTitle yapılandırılmışsa ve logo tercih edilmezse 
"appTitle": "ABC Company", "logo": "no-logo",
Yapılandırılan metin Logo yok

appTitle yapılandırılmamışsa ve logo tercih edilmezse

 
"appTitle": "", "logo": "no-logo",
Başlık yok Logo yok
appTitle resim olarak eklenirse ve logo yapılandırılırsa 
"appTitle": "https://my-cdn.com/abccompanylogo.png ", "logo": "https://my-cdn.com/abclogo.png",
Yapılandırılan resim Yapılandırılmış logo

appTitle resim olarak eklenirse ve logo yapılandırılmamışsa

 
"appTitle": "https://my-cdn.com/abccompanylogo.png ", "logo": """,
Yapılandırılan resim Varsayılan logo

appTitle resim olarak eklenirse ve logo tercih edilmezse 

"appTitle": "https://my-cdn.com/abccompanylogo.png ", "logo": "no-logo",
Yapılandırılan resim Logo yok
  • Özel görüntü boyutu en boy oranına göre ayarlanır. Daha önce yapılandırılan özel başlık metni artık Masaüstünde iki satır halinde görünebilir. Bunu önlemek için özel başlık metnini değiştirebilirsiniz.
  • Masaüstü'ün yatay üstbilgisinde başlık ve logo yapılandırılmamışsa, bu alan üstbilgi araçları tarafından kullanılır. Başlık ve logo alanını kullanmak için üstbilgi araçları doğru şekilde yapılandırılmalıdır.
  • Başlık ve logo birlikte maksimum 304 piksel genişliğini (doldurma dahil) aşamaz. Logo genişliği 96 pikselden daha azsa, başlık için kalan genişlik kullanılabilir.
  • Özel görüntü boyutu desteklenen boyuttan daha yüksekse, görüntü boyutu yatay başlıktaki en boy oranına göre ayarlanır. Özel görüntü boyutu desteklenen boyuttan daha düşükse, gerçek görüntü boyutu yatay üstbilgide tutulur.

görevSaygınlığı

Kuruluş tercihlerine ve marka hizalamasına dayalı olarak görev sayfası için özel bir şekil belirtmek için. Bir temsilci oturum açtığında, görev sayfasında yapılandırılan şekil arka plan olarak görüntülenir. Varsayılan olarak görev sayfası şekilsiz olarak görünür.

Örnek:

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

Veri URI'lerini kullanabilir ya da bir içerik dağıtım ağı (CDN), Amazon Web Services (AWS) Simple Storage Service (S3) demetinde veya benzer bir barındırma hizmeti üzerinde özel bir şekil barındırabilir ve ardından barındırılan çizime URL'yi belirtebilirsiniz. Şekil, yerleşim tanımına dayalı olarak genel veya ekip düzeyinde yapılandırılabilir. Bozuk görüntünün Masaüstünde görüntülenmesini önlemek için doğru URL'yi yapılandırdığından emin olun.

Desteklenen görev sayfası şekil biçimleri PNG, JPG, JPEG, GIF, SVG ve WebP'tir. Önerilen şekil boyutu 400 x 400 pikseldir (genişlik x yükseklik). Özel şekil boyutu önerilen boyuttan büyükse, şekil boyutu görev sayfasındaki en boy oranına göre ayarlanır. Özel şekil boyutu önerilen boyuttan daha küçükse, asıl şekil boyutu görev sayfasında tutulur.

Webex Contact Center interface example of a custom illustration retraining the actual size.
Gerçek boyutu muhafaza eden özel bir şekil için örnek
Webex Contact Center interface example of a custom illustration adjusted based on the aspect ratio.
En boy oranına göre ayarlanmış özel bir şekil için örnek örnek

stopNavigateOnAcceptTask

Temsilci önceki bir görev üzerinde çalışırken yeni görevi kabul ettiğinde, odağın yeni kabul edilen bir göreve kaydırılıp kaydırmayacağını belirlemek için. Varsayılan değer false'tur .

Örnek:

"stopNavigateOnAcceptTask": false

Değer doğru olarakayarlanırsa, kullanıcı Masaüstünde yeni bir görevi kabul ettiğinde, odağa önceki görev korunur ve yeni kabul edilen göreve kaymaz. Bu ayar, kullanıcının yeni bir isteği kabul ederken verilerini kaybetmesini önler.

Örneğin, Temsilci 1'in Müşteri 1 ile sohbette ve aynı anda Müşteri 2 ile sesli çağrıda olduğunu dikkate alın. Sesli çağrı sırasında, Temsilci 1 Etkileşim Denetimi bölmesinde Müşteri 2'nin ayrıntılarını günceller. Şu anda Temsilci 1'in Görev Listesi bölmesinde iki etkin görevi vardır ve odağa Etkileşim Denetimi bölmesi odaklanmıştır. Temsilci 1, Müşteri 3'ten gelen yeni bir sohbet isteğini kabul ettiğinde, odak Müşteri 2 ile Etkileşim Denetimi bölmesinde kalır ve yeni kabul edilen sohbet isteğine kaymaz.

Önceki göreve odaklanmak için ve yeni kabul edilen göreve geçmek için değil, stopNavigateOnAcceptTask özellik değeri true olarak ayarlanmış özel yerleşimi seçin.

JSON yerleşimine stopNavigateOnAcceptTask özellik değeri girilmezse, Masaüstü odağı yeni kabul edilen göreve kaydırır. Bu davranış, stopNavigateOnAcceptTask özellik değeri false olarak ayarlandığında benzer.

  • Bu ayar, görev, konferans, danışma veya aktarma gibi Masaüstünde gerçekleştirilen tüm görevler (sesli ve dijital kanal) ve dış aramalar, giden kampanya aramaları, otomatik toparlama vb. için geçerlidir.
  • Masaüstü kullanıcısı Home sayfasında görev Listesi bölmesinde etkin bir görev olmadan varsa bu ayar uygulanmaz. Böyle bir durumda, yeni bir görev kabul edildiğinde, odağınız Home sayfasından yeni kabul edilen göreve kaydırılır.

sürükleDropEnabled

Özel sayfalardaki araçlarda sürükle bırak ve yeniden boyutlandırmayı etkinleştirmek için değeri doğru olarak ayarlayın. Varsayılan değer false'tur .

Örnek:

"dragDropEnabled": false

Yardımcı Bilgiler bölmesindeki sekmeler için sürükle bırak özelliğini etkinleştirme hakkında daha fazla bilgi için, bkz . Yardımcı Bilgi Panosu.

bildirimYtimer

Masaüstündeki bildirimlerin otomatik olarak kapatıldığı süreyi (saniye olarak) ayarlamak için. Bildirim, Masaüstünün sağ üst köşesinde görünür. Varsayılan zaman aşımı değeri 8 saniyedir. Zaman aşımı değerleri için geçerli aralık 1-10 saniyedir. Zaman aşımı değişikliklerinin etkin olması için, değişiklikler yapıldıktan sonra tarayıcının yenilenmesi gerekir.

Örnek:

"notificationTimer": 8

maximumNotificationCount

Masaüstünde bir seferde görüntülenecek masaüstü bildirimlerinin sayısını ayarlamak için. Varsayılan değer 3'dür. Masaüstü bildirimlerinin aralığı 1-10'dir. Masaüstü bildirimleri yığılı. Çok sayıda bildirim varsa, bildirimHata ayarlarına bağlı olarak hafif bir gecikmeyle görünürler.

Örnek:

"maximumNotificationCount": 3

tarayıcıNotificationTimer

Masaüstündeki tarayıcı tost makinesi bildirimlerinin otomatik olarak kapatıldığı süreyi (saniye olarak) ayarlamak için. Tost makinesi, yalnızca Masaüstü etkin tarayıcı penceresi veya Tab değilse görünen yerel bir tarayıcı bildirimidir. Masaüstü tarayıcı penceresi veya Tab etkin değilse

  • Diğer tarayıcı pencereleri veya sekmeleri üzerinde çalışıyorsanız.

  • Diğer uygulamalar üzerinde çalışıyorsanız.

  • Masaüstü tarayıcı penceresini simge durumuna küçültmüşseniz.

Bildirim, Masaüstünün sağ üst köşesinde görünür. Varsayılan zaman aşımı değeri 8 saniyedir. Zaman aşımı değerleri için önerilen aralık 5-15 saniyedir. Zaman aşımı değişikliklerinin etkin olması için, değişiklikler yapıldıktan sonra tarayıcının yenilenmesi gerekir.

Örnek:

"browserNotificationTimer": 8

Tarayıcı bildirimleri için yapılandırılan zaman aşımı işletim sistemi ve tarayıcı ayarlarına bağlıdır. Zaman aşımı değeri, Windows işletim sistemi, Chrome OS ve macOS genelinde Chrome tarayıcısında dikkate alınır. Ancak desteklenen diğer tarayıcılar, yapılandırılmış bildirim zaman aşımı değerini tutarlı bir şekilde dikkate almaz.

wxm Yapılandırıldı

(İsteğe bağlı) Webex Experience Management yapılandırmak için , değeri doğru olarak ayarlayın. Varsayılan değer false'tur .

Örnek:

"wxmConfigured": true

desktopChatApp

Webex Uygulaması gibi, Cisco tarafından sunulan birden çok sohbet uygulamasını yapılandırmak için.

webexConfigured

Webex Uygulaması ile birlikte mesajlaşma ve toplantı işlevleri Masaüstünde yapılandırılabilir. Bu yapılandırma, temsilcilerin Masaüstünden uzağa gitmeden kuruluşlarındaki diğer temsilciler, gözetmenler ve konu uzmanlarıyla (KOBİ'ler) işbirliği yapmasına olanak sağlar.

  • Site yöneticisi Webex Toplantı kullanıcılarını yönetir ve yalnızca kullanıcıların Webex Enterprise Edition'a sahip olması durumunda ayrıcalıklar atar. Daha fazla bilgi için bkz . Webex Meetings Cisco Webex Control Hub Kullanıcıları Yönetme.
  • Gözetmenler ve KOBİ'lerin Webex İstemcisi'ni kendi sistemlerinde (kişisel cihaz) indirmesi veya Webex Web için Uygulama ( https://web.webex.com/) kullanarak Webex Uygulamasına erişmesi gerekir. Daha fazla bilgi için bkz . Uygulama İndirme.
  • Kuruluşunuzun diğer temsilcileri, gözetmenleri ve konu uzmanlarıyla (KOBİ' ler) Agent Desktop uzağa gitmeden iş birliği yapmak için Agent Desktop içinde Webex Uygulamasına erişebilirsiniz. Arama denetimi özelliği kullanılamıyor. Arama almak ve arama yapmak için harici, katıştırılmamış Webex Uygulaması gerekir. Daha fazla bilgi için bkz. Çağrı Uygulamaları.

Masaüstünde Webex Uygulamasını yapılandırmak için:

  • Cisco Webex Control Hub'nde, bir kullanıcı için hizmet eklerken, Gelişmiş Mesajlaşma onay kutusunu ( Kullanıcılar >Yarım Kullanıcıları >Hizmetleri> Messaging ) seçin . Daha fazla bilgi için bkz . Cisco Webex Site Yönetiminde Kullanıcı Hesaplarını Yönetme.

  • Özel Masaüstü Yerleşiminde, webexConfigured özellik değerini doğru olarak ayarlayın.

    Örnek:

    "desktopChatApp": { "webexConfigured": doğru },

    webexConfigured özelliğinin varsayılan değeri yanlıştır .

    Webex Uygulaması yalnızca webexConfigured özellik değerini bu rollerin her biri için doğru olarak ayarlarsanız temsilci, gözetmen ve gözetmenTemsilci rolleri için kullanılabilir. Temsilci, gözetmen veya gözetmenTemsilen Webex Uygulamasında oturumunu kapatamaz.

    'nı görüntülemek için Webex simgesi Masaüstünün yatay üstbilgisindeki (Webex) simgesi, headerActions özelliğine value Webex girin. Daha fazla bilgi için bkz . headerActions.

    Belirli bir ekip için Webex Uygulamasını etkinleştirmek için, webexConfigured özellik değeri true olarak ayarlanmış özel yerleşimi seçin. Daha fazla bilgi için bkz . Ekip oluşturma.

Ek Bilgiler bölmesinde, özel sayfada ve özel araçta Webex Uygulamasını yapılandırabilirsiniz. Daha fazla bilgi için, bkz . Yardımcı Bilgi Panosu.

Webex Uygulama Bildirimi

Bildirim zamanlayıcı için notificationTimer ve browserNotificationTimer özellikleri kullanılarak belirtilen değerler Webex Uygulaması için geçerlidir. Varsayılan zaman aşımı değeri bu özellikler için 8 saniyedir. Daha fazla bilgi için bkz . notificationTimer ve browserNotificationTimer.

headerActions

Masaüstünün yatay başlığındaki simgelerin sırasını değiştirmek için. Varsayılan sıra aşağıdaki gibidir:

  1. Webex simgesi (Webex)

  2. Ses göstergesi için telefon kullanma (Giden Arama)

  3. Bildirim simgesi. (Bildirim Merkezi)

headerActions özelliğinin değerini aşağıdaki gibi ayarlayın:

Simge Adı

headerActions Özellik Değeri

Webex Uygulaması

webex

Dış Arama Çağrısı

Dış arama

Bildirim Merkezi

bildirim

Örnek:

"headerActions": ["Webex", "dış arama", "bildirim"],

headerActions özellik değeri büyük/küçük harfe duyarlıdır.

Simgelerin varsayılan sırasını değiştirmek için, headerActions özelliğini ve özel yerleşimdeki değerleri buna göre girin .

Örnek:

"headerActions": ["bildirim", "dış arama", "Webex"],
  • Özel yerleşime headerActions özelliğini ve değerlerini girmezseniz, simgeler varsayılan sırada görüntülenir.
  • Üstbilgi simgelerini ve ilişkili işlevleri Masaüstünden kaldırmak için, headerActions özelliği için boş bir değer ayarlayın ( "headerActions": []). Ancak, Yardımcı Bilgiler bölmesine veya özel bir sayfaya Webex Uygulaması eklediyseniz veya özel bir araç olarak, temsilci Webex Uygulamasına erişmeye devam edebilir; ancak Masaüstünün yatay üstbilgisinde Webex Uygulaması kullanılamaz.
  • webexConfigured özellik değeri false olarakayarlanırsa, headerActions özelliğine Webex değeri eklenmiş olsa bile, Masaüstünün yatay üstbilgisinde Webex Uygulama simgesi görüntülenmez. Daha fazla bilgi için bkz . webexConfigured.

alan

Alan özelliği Masaüstü Yerleşimi'nin ana bölümüdür. Yerleşimi alana göre tanımlayabilirsiniz. 

"area": { "üstbilgi": { ... }, "advancedHeader: { { "comp": "araç-1", "nitelikler": { ... }, "komut dosyası": .... } }, "panel": { ... }, "navigasyon": { ... }, "kalıcı": { ... }, "kafasız": { ... } },

Aşağıdaki alan nesnelerini yapılandırabilirsiniz:

  • Panel: Yardımcı Bilgiler bölmesindeki ikinci paneli veya en sağ paneli temsil eder.

  • Gezinti: Özel sayfaları ve sayfayla ilgili gezinti öğelerini temsil eder.

  • Kalıcı: Kalıcı olan ve Masaüstünün tüm sayfalarında görüntülenen sayfa düzeyindeki araçları temsil eder.

  • Kafasız: Görsel bir arabirimi olmayan, ancak arka planda mantık yürüten araçları temsil eder.

advancedHeader özelliği yapılandırılmışsa, üstbilgi ve headerActions özellikleri kaldırılmalıdır.

advancedHeader

Masaüstünün yatay başlığındaki simgelerin görünürlüğünü özelleştirmek ve sırasını değiştirmek için. Varsayılan sıra aşağıdaki gibidir:

  1. Webex simgesi (Webex)

  2. Ses göstergesi için telefon kullanma (Giden Arama)

  3. Bildirim simgesi. (Bildirim Merkezi)

  4. Webex Contact Center temsilci durumu seçici. (Temsilci Durumu Seçici)

advancedHeader özelliğinin değerini aşağıdaki gibi ayarlayın:

Simge Adı

headerActions Özellik Değeri

Webex Uygulaması

agentx-webex

Dış Arama Çağrısı

Temsilci dışı arama

Bildirim Merkezi

Agentx bildirimi

Temsilci Durumu Seçici

agentx-durum seçici

Örnek:

"advancedHeader": [ { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-bildirim" }, { "comp": "agentx-state-selector" } { "comp": "widget-1", "nitelikler": { ... }, "komut dosyası": .... } ]

advancedHeader özellik değeri büyük/küçük harfe duyarlıdır.

Simgelerin varsayılan sırasını değiştirmek için, advancedHeader özelliğini ve özel yerleşimdeki değerleri buna göre girin .

Araçlar açılır menüye soldan sağa akıyor.

  • Özel yerleşime advancedHeader özelliğini girmezseniz, varsayılan üstbilgi görüntülenir.

  • Gelişmiş üstbilgi etkinleştirildiğinde, örnek olarak araçlarınızı yeni gelen üstbilgiden gelişmiş üstbilgiye taşımanız gerekir.

  • Gelişmiş üstbilgi etkinleştirildiğinde, eski üstbilgi görüntülenmez.

  • Her araç simgesi, CSS ile tanımlanan ve masaüstü üzerinden özelleştirilemeyen varsayılan bir doldurma ve kenar boşluğuna sahiptir.

  • Logo, başlık ve profil simgelerinin konumu sabittir ve özelleştirilemez.

  • Üstbilgi simgelerini ve ilişkili işlevleri Masaüstünden kaldırmak için, advancedHeader özelliğinde ilişkili bileşen için boş bir değer ayarlayın ( "advancedHeader": []).

    Yardımcı Bilgiler bölmesine veya özel bir sayfaya Webex Uygulaması eklediyseniz veya özel bir araç olarak, temsilci Webex Uygulamasına erişmeye devam edebilir, ancak Masaüstünün yatay üstbilgisinde Webex Uygulaması kullanılamaz.

  • Uzun etiketli bir araç eklerseniz, kullanılabilir alana göre kesilmiş bir etiket adı görüntülenir.

    Bir pencere öğesine etiket eklemek için metinKontent özniteliğini kullanabilirsiniz.

    Örnek:

    { "comp": "zamanlayıcı aracı", "nitelikler": { "süre": "08:00:00" }, "textContent": "Geçerli Shift için Geri Say Zamanlayıcı", "komut dosyası": "https://wxcc-demo.s3.amazonaws.com/widgets/timer-widget.js" }

    "Geçerli Shift için Geri Sayım Zamanlayıcı" etiketi kırpılır ve mevcut alana göre görüntülenir.

    • Uzun etiketli araçlar eklemekten kaçının.

    • Bir araç açılır pencereye aktığında, yalnızca araç simgesi tıklanabilir.

  • webexConfigured özellik değeri false olarakayarlanırsa, AdvancedHeader özelliğine Webex değeri eklenmiş olsa bile, Masaüstünün yatay üstbilgisinde Webex Uygulama simgesi görüntülenmez. Daha fazla bilgi için bkz . webexConfigured.

Home Sayfası

Masaüstünde oturum açtığınızda, Home Sayfasında açılırsınız.

Home Sayfası yalnızca Gözetmenler ve GözetmenTemsilen kişiliği için geçerlidir.

Aşağıdaki araçları Home Sayfasında görüntüleyebilirsiniz. Çözümleyici araçları varsayılan olarak sağlanır, ancak yönetici Kalıcı ve Özel araçları da yapılandırabilir. Daha fazla bilgi için bkz . JSON Yerleşimi Üst Düzey Özellikler.

Çözümleyici Araçları

Varsayılan olarak Çözümleyici aracı Masaüstü Home Sayfasında görüntülenir.

Home Sayfa Yerleşimi Yapılandırması

Masaüstünün Home Sayfasını, kuruluş tercihlerinize ve marka hizalamanıza göre düzeni görüntüleyecek şekilde yapılandırabilirsiniz. Home sayfasını yapılandırmak için Ana Sayfa alanını düzenleyin. Bir kullanıcı Masaüstünde oturum açtığınızda Home Sayfasında görüntülenecek şekilde aşağıdaki bileşenleri yapılandırabilirsiniz:

  • Hoş geldiniz mesajı

  • Görev bölmesine gitmek için Gezinti çubuğunda görev simgesi. Görev simgesi, çağrı izleme özelliği etkinleştirilmiş olarak Gözetmen ve Gözetmen & Temsilci rolü için görüntülenir. Görev panosu, gelen müşteri isteklerini, etkin ve geçmiş müşteri etkileşimlerini ve etkin izleme isteklerini görüntüler.

  • Kuyruk Adı , Kanal Türü veYönetilen Ekipler gibi bölümleri filtreleyin.

Aşağıdaki tabloda, Home Sayfasını yapılandırmak için gereken sayfa özellikleri anlatılmaktadır :

Tablo 2. Dinamik Home Sayfa Yerleşimi—sayfa Özellikleri

Mülk

Açıklama ve Kod

Sayfa > KullanFlexLayout

Esnek yerleşimi yeni bir web bileşenidir. Varolan araçları değiştirmez. Yeni esnek yerleşimi, aynı yerleşim yapılandırma biçimini basit bir şekilde kullanır. Geriye dönük uyumludur ve mevcut araçları etkilemez. JSON yerleşimini yapılandırmanız gerekir. JSON yerleşimini yapılandırmak için, araç yüksekliğini ve genişliğini sağlayın. Araç, JSON yerleşimi içinde yapılandırıldığı sırada işlenir. Araçlar varsayılan olarak 8 px kenar boşluğuna sahiptir.

JSON yerleşimi, araçlardaki boyutlara (genişlik x yükseklik) ve koordinatlara (X, Y ve Z) bağlıdır.

Esnek yerleşim, tek tek araç yeniden boyutlandırma, araçları en üst düzeye çıkarma vb. gibi özellikleri destekler.

Tek tek widget'ların yüksekliği piksel olarak ölçülür. 1 birim yükseklik = 40 piksel. Araç genişliği, kapsayıcıdaki sütunların sayısına ve kapsayıcı genişliğine bağlı olarak değişen sütunların sayısına bağlıdır.

Araçlar soldan sağa doğru görüntülenir. Gelişmiş yerleşim motoru, araçlara hem yatay hem de dikey boşluk ayarlaması uygulamak için özel mantık kullanır. Başlangıçta yerleşim yatay olarak yüklenir. Araç yatay olarak yüklendikten sonra dikey olarak yüklenir ve alan kullanımının optimum olmasını sağlar.

Pencere öğesini ekran boyutuna göre yapılandırın. Ekran boyutuna bağlı olarak araç genişliğini artırabilir veya azaltabilirsiniz. Bu, araçları daha okunur ve kullanılabilir hale getirir.

Esnek düzen, büyük, orta, küçük ve ekstra küçük gibi standart kesme noktaları sağlar.

  • Büyük araçlar 1360 px veya daha fazla çözünürlüğe sahiptir. Büyük araçlar için sütun değerini 12 olarak belirtin.

  • Orta araçlar 1070 px ila 1360 px çözünürlüğe sahiptir. Orta düzey araçlar için sütun değerini 10 olarak belirtin.

  • Küçük araçlar 850 px ila 1070 px çözünürlüğe sahiptir. Küçük araçlar için sütun değerini 6 olarak belirtin.

  • Ekstra küçük araçlar 500 px çözünürlüğe sahiptir. Ek küçük araçlar için sütun değerini 4 olarak belirtin.

Bu pikseller işletim sistemine ve tarayıcıya bağlı olarak değişiklik gösterebilir.

"sayfa": { "id": "çıkarma", "useFlexLayout": true, "araçlar": { "comp1": { "comp": "div", "genişlik": 4, "yükseklik": 4, "textContent": "Araç 1", "nitelikler": { "stil": "genişlik: maksimum içerik; kenar boşluğu: 80 piksel 240 piksel; renk: beyaz;" } }, "comp2": { "comp": "div", "genişlik": 4, "yükseklik": 4, "textContent": "Araç 2", "nitelikler": { "stil": "genişlik: maks-içerik; kenar boşluğu: 80 piksel 240 piksel; renk: beyaz;" } } }

Sayfa > comp

Benzersiz bir özel bileşen sağladığınıza emin olun.

"comp": "sayfa başlığı",

Sayfa başlığı bileşeni, özel HTML öğesinin seviye 2 başlığını <h2> temsil eder.

Sayfa > pageHeader

Statik, dinamik veya her ikisine birden sahip olacak bir başlık dizesi belirttiğinizden emin olun.

Sayfa başlığı bileşeni, özel HTML öğesinde seviye 2 başlığı <h2> temsil eder.

  • Statik dize: Örneğin, Hey, Hoş geldiniz!

    "comp": "sayfa başlığı", "nitelikler": { "pageTitle": "Selam, Hoş geldiniz!" }

  • Dinamik dize: DEĞERI STORE'dan almak için. Örneğin, Jane Doe.

    "comp": "sayfa başlığı", "nitelikler": { "pageTitle": "$STORE.agent.agentName" }

  • Her ikisi de: Statik ve dinamik dizelerin birleşimi. Örneğin, Selam Jane Doe, Hoş geldiniz!

    "comp": "sayfa başlığı", "nitelikler": { "pageTitle": "Hey {$STORE.agent.agentName}, Hoş geldiniz!" }

    Dizenin dinamik kısmını kapalı küme parantezleri {} içinde ve öneki de yapısı $ile kapsamanız gerekir.

Sayfa > pageSubHeader

Masaüstünde görüntülenen Alt Başlığı eklediğinizden emin olun. Kullanıcı, Alt Üstbilgide Çözümleyiciye Git'i ekleyebilir .

  • Alt Üstbilgi için kod bloğu

    "useFlexLayout": true, "pageSubHeader": { "comp": "div", "nitelikler": { "stil": "ekran: flex; kayan nokta:sağ; kenar boşluğu:16 piksel 16 piksel 16 piksel" }, "alt": [ { "comp": "div", "alt": [ { "comp": "md-label", "textContent": "$I 18N.pageSubHeader.queueName", "nitelikler": { "stil": "kenar boşluğu:8 piksel;" }

  • Alt Üstbilgide Çözümleyiciye Git için kod bloğu

    { "comp": "div", "children": [ { "comp": "agentx-more-actions-kaplayıcı", "özellikler": { "actionList": [ {"comp": "agentx-wc-goto-analyzer" } } }

Gezinti (Özel Sayfalar)

Bu bölümde, sol gezinti çubuğunda görünen sayfaları ekleyebilirsiniz. Gezinti çubuğunda görünecek bir gezinme simgesi ve araç için benzersiz bir URL belirtebilirsiniz. Çakışmaları önlemek için URL için belirli bir önek kullanmanızı öneririz. Daha fazla bilgi için nav özelliği bölümüne bakın .

Ayrıca bu sayfada görüntülenebilecek bir araç koleksiyonunuz da olabilir. Sayfada ekranda görünen tek bir araç veya kılavuzdaki bir araç koleksiyonu olabilir. Kılavuz düzenlemesi hakkında daha fazla bilgi için yerleşim özellik bölümüne bakın .

Pencere öğesi ağacına dinamik alanlı bir koruyucu eklemenize gerek yoktur. Bu, bu seçeneği etkinleştirdiğinizde araçları özel sayfalarda sürükleyip bırakabileceğiniz ve yeniden boyutlandırabileceğiniz anlamına gelir.

Örnek: 

{ "nav": { "etiket": "Özel Sayfa", "simge": "saklı bilgi", "iconType": "momentum", "navigateTo": "dynamic-tabs", "align": "top", "isDefaultLandingPage": true }, "page": { "id": "my - custom - page", "useFlexLayout": true, true, "araçlar": { " comp1": { "comp": "md-tabs", "alt": [{ "comp": "md-tab", "textContent": "Shift Timer", "nitelikler": { "yuva": "Tab" } }, { "comp": "md-tab-panel", "nitelikler": { "yuva": "panel" }, "alt": [{ "comp": "benim - özel - zamanlayıcı", "kaynak": http: my-cdn.com/my-custom-timer.js "koruyucu": { "başlık": "Shift Zamanlayıcı", "maximizeAreaName": "app-maximize-area" } }] }, { "comp": "md-tab", "textContent": "Stock Market", "responsive": "false" "nitelikler": { "yuva": "Tab" }, }, { "comp": "md-tab-panel", "nitelikler": { "yuva": "panel" }, "children": [{ "comp": "agentx-wc-iframe", "responsive": "false" "attributes": { "src": "https://widget-kad.s3.amazonaws.com/Trading.htm" }, "maximizer": { "title": "Stock Market", "maximizeAreaName": "app-maximize-area" } }], }, { "comp": "md-tab", "textContent": "Widget3", "nitelikler": { "yuva": "Tab" } }, { "comp": "md-tab-panel", "textContent": "Three Content", "attributes": { "slot": "panel" } } ] }, "comp2": { "comp": "my - google - maps - component", "kaynak": "https://my-cdn.com/my-google.maps.js "koruyucu": { "başlık": "Google Map", "maximizeAreaName": "app-maximize-area" } } }, "yerleşim": { "alanlar": [ ["sol", "sağ"] ], "boyut": { "sütun": [1, 1], "satır": [1] } } } }, },

Aşağıdaki tabloda, nav ve sayfa özellikleri ile bunların alt özellikleri anlatılmaktadır :

Tablo 3. nav Özellik Ayrıntıları

Mülk

Açıklama ve Kod

nav > label

Bu özellik, sayfa gezinti tanımlayıcısını gösterir. Ekran okuyucu bu özelliği okur ve araç ipucunda görünür.

Bu parametreler, gezinti çubuğunda özel sayfanızı görüntülemek için gereklidir. 

type Navigation.Item = { etiket: dize; iconType: "momentum" | "diğer"; simge: dize; hizalama: "üst" | "alt"; navigateTo: dize; iconSize? :sayı; yanıt vermiyor mu? :Boolean; };

Etiket özelliği özel sayfanın başlığıdır.

nav > iconType

Bu özellik, özel sayfanın gezinti çubuğunda görüntülenen simge türünü temsil eder.

Aşağıdaki simge türleri kullanılabilir:

  • Momentum: Koleksiyondaki kullanılabilir simgeleri seçebilirsiniz: https://momentum.design/icons. Momentum kullanmanın avantajı, "aktif" bir sürüm ile birkaç simge sağlamasıdır.

    Etkin sürüm söz konusu olduğunda:

    Örneğin, bir Momentum simgesi türü seçerseniz Duyuru, gezinti çubuğunda varsayılan simgeyi görebilirsiniz. Özel sayfaya gittiğinizde (simgeye bağlı), simge Duyuru etkin Otomatik olarak kullanılabilir. Bir etkin Simgesi kitaplığındaki aynı simgenin sürümü.

  • Diğer: Gezinti çubuğunda görünen özel bir görüntü URL'si (bir CDN'de barındırılabilir) sağlayabilirsiniz. Siyah veya beyaz özel simge kullanıyorsanız, açık ve karanlık modlar arasında geçiş yaptığınızda simge görüntülenmez.

nav > icon

Bu özellik Momentum kitaplığındaki veya CDN URL'sindeki simgenin adını temsil eder.

type Navigation.Item ={ icon:"duyuru"; }; VEYA // type Navigation.Item ={ icon:"https://my-cdn.com /my-navigation-icon.png"; };

nav > yyn

Bu özellik, simgeyi gezinti çubuğunun üstüne veya altına hizalamanıza yardımcı olur.

Şu anda özellik yalnızca üst hizalamaya izin verir.

nav > isDefaultLandingPage

Bu özellik, temsilciler için Agent Desktop varsayılan açılış sayfasını belirtir. Gezinti çubuğu sayfasını, Agent Desktop oturumu açtıktan sonra temsilciler için görünen varsayılan Açılış sayfası yapmak için bu özelliği true olarak ayarlayın. Bu özellik, birden fazla gezinti çubuğu sayfasında true olarak ayarlanmışsa, sistem ilk gezinti çubuğu sayfasını varsayılan Açılış sayfası olarak kabul eder.

Hiçbir gezinti çubuğu sayfasında bu özellik true olarak ayarlanmamışsa, Home sayfası varsayılan Açılış sayfası görevi görür.

Temsilci Performans İstatistikleri raporlarını varsayılan açılış sayfası olarak ayarlayamazsınız.

nav > navigateTo

Bu özellik özel sayfanın adını belirtir. Bu ad, temsilci gezindiğinde adres çubuğunda görünür.

NavigateTo şu değerleri içermemelidir: resimler, yazı tipleri, css, build_info, yardım, uygulama, i18n, simgeler, images-mfe-wc ve sesler.

type Navigation.Item = { navigateTo: "my - özel - sayfa"; };
Tablo 4. sayfa Özellik Ayrıntıları

Mülk

Açıklama ve Kod

sayfa >kimdi

Gelen sayfa özelliğinde, özel sayfa (dinamik araç) nesnesini belirtirsiniz.

- kimlik özelliği benzersiz bir sayfa tanımlayıcıyı temsil eder. Örneğin, özel sayfam-1. Temsilci bu tanımlayıcıyı Masaüstünde göremez.

tür DynamicWidgets.Page = { kimlik: dize; araçlar: Kayıt < dizesi, DynamicWidget.Options > ; yerleşim: Yerleşim; };

sayfa > UseFlexLayout

Esnek yerleşimi yeni bir web bileşenidir. Varolan araçları değiştirmez. Yeni esnek yerleşimi, aynı yerleşim yapılandırma biçimini basit bir şekilde kullanır. Geriye dönük uyumludur ve mevcut araçları etkilemez. JSON yerleşimini yapılandırmanız gerekir. JSON yerleşimini yapılandırmak için, araç yüksekliğini ve genişliğini sağlayın. Araç, JSON yerleşimi içinde yapılandırıldığı sırada işlenir. Araçlar varsayılan olarak 8 px kenar boşluğuna sahiptir.

JSON yerleşimi, araçlardaki boyutlara (genişlik x yükseklik) ve koordinatlara (X, Y ve Z) bağlıdır.

Esnek yerleşim, tek tek araç yeniden boyutlandırma, araçları en üst düzeye çıkarma vb. gibi özellikleri destekler.

Tek tek widget'ların yüksekliği piksel olarak ölçülür. 1 birim yükseklik = 40 piksel. Araç genişliği, kapsayıcıdaki sütunların sayısına ve kapsayıcı genişliğine bağlı olarak değişen sütunların sayısına bağlıdır.

Araçlar soldan sağa doğru görüntülenir. Gelişmiş yerleşim motoru, araçlara hem yatay hem de dikey boşluk ayarlaması uygulamak için özel mantık kullanır. Başlangıçta yerleşim yatay olarak yüklenir. Araç yatay olarak yüklendikten sonra dikey olarak yüklenir ve alan kullanımının optimum olmasını sağlar.

Pencere öğesini ekran boyutuna göre yapılandırın. Ekran boyutuna bağlı olarak araç genişliğini artırabilir veya azaltabilirsiniz. Bu, araçları daha okunur ve kullanılabilir hale getirir.

Esnek düzen, büyük, orta, küçük ve ekstra küçük gibi standart kesme noktaları sağlar.

  • Büyük araçlar 1360 px veya daha fazla çözünürlüğe sahiptir. Büyük araçlar için sütun değerini 12 olarak belirtin.

  • Orta araçlar 1070 px ila 1360 px çözünürlüğe sahiptir. Orta düzey araçlar için sütun değerini 10 olarak belirtin.

  • Küçük araçlar 850 px ila 1070 px çözünürlüğe sahiptir. Küçük araçlar için sütun değerini 6 olarak belirtin.

  • Ekstra küçük araçlar 500 px çözünürlüğe sahiptir. Ek küçük araçlar için sütun değerini 4 olarak belirtin.

Bu pikseller işletim sistemine ve tarayıcıya bağlı olarak değişiklik gösterebilir.

"sayfa": { "id": "çıkarma", "useFlexLayout": true, "araçlar": { "comp1": { "comp": "div", "genişlik": 4, "yükseklik": 4, "textContent": "Araç 1", "nitelikler": { "stil": "genişlik: maksimum içerik; kenar boşluğu: 80 piksel 240 piksel; renk: beyaz;" } }, "comp2": { "comp": "div", "genişlik": 4, "yükseklik": 4, "textContent": "Araç 2", "nitelikler": { "stil": "genişlik: maks-içerik; kenar boşluğu: 80 piksel 240 piksel; renk: beyaz;" } } }

sayfa > dgets

sayfa > comp

Özel araçlarınızı tanımlamanıza yardımcı olur. Birden çok araç yerleştirmek için, araç seçeneklerini sırayla belirtin. Her araç için benzersiz bir alan adı verilmesini sağlayın. Daha sonra yerleşim bölümünde kullanın.

"araçlar": { "comp1": { ... } "comp2": { ... } }

Bu özellik özel HTML öğesinin (Web Bileşeni veya başka bir öğe olarak da bilinir) adını temsil eder (bunu bir koruyucu olarak kullanmak istiyorsanız). Daha fazla bilgi için bkz . Örnek Kullanım Örneği Örnekleri. Özel öğe adınızı köşeli parantez ("<" veya ">") olmadan buraya girin. Örneğin, "özel öğem."

Araçlar bölümünün altındaki her giriş aşağıdaki biçimi destekler:

type Options = { comp: string; komut dosyası? :dizgi; Özellikler? : < dizeyi, herhangi bir >; Öznitelik? : Kayıt < dizesi, dize >; çocuklar? : Seçenekler[]; metinKontent? :dizgi; üslup? : Kısmi < CSSStyleDeclaration >; Sarıcı? : { başlık: dize; maximizeAreaName: string; }; };

sayfa > script

(İsteğe bağlı) Bu özellik yalnızca, araç veya bileşeni CDN gibi uzak bir konumdan yüklediğinizde gereklidir. 

"comp1": { "comp": "araç-bir", "komut dosyası": "http:/my-cdn.com / dinamik - araçlar / araç - one.js ", }

Aynı bileşenin komut dosyası URL'sini değiştirmeyin. Aynı bileşen için komut dosyası URL'sini değiştirmeniz gerekirse, aşağıdakilerden birini yapın:

  • Temsilciye tarayıcı önbelleğini temizlemesini ve Agent Desktop yeniden yüklemesini bildirin.

  • Mevcut URL'yi koruyun. Mevcut URL'de barındırılan javascript'i kullanarak yeni paket URL'yi dinamik olarak içe aktarın.

    Örnek:

    (function() { var script = document.createScript("script"); script.src = <Your JS Komut Dosyası URL> script.type = "metin/javascript"; script.async = true; document.getScriptsByTagName ("head").item(0).appendchild(komut dosyası); } ) ()

sayfa > properties

Web bileşeni için geçirmeniz gereken özellikleri belirtebilirsiniz. 

"özellikler": { "kullanıcı": "admin", },

sayfa > yanıt verme

Bir web bileşeninin veya özel yerleşime sayfa düzeyinde ya da comp düzeyinde eklenen iFrame tabanlı bir araç duyarlı olup olmadığını belirler. Duyarlı web bileşenleri web sayfanızı tüm cihazlarda görsel olarak çekici hale getirir ve kullanımı kolaydır. Duyarlı iFrame araçları kullanmanız gerekir.

Bu özelliği aşağıdaki değerlerden biriyle yapılandırın:

  • True: Mini uygulamanın yanıt verme işlevini etkinleştirir. Varsayılan olarak, tüm araçlar kullanımdaki cihazın aşamalı ekran boyutlarına, yönüne ve görüntüleme alanlarına bağlı olarak duyarlıdır.

  • False: Mini uygulamanın yanıt verme işlevini devre dışı bırakır. Araçlar farklı aygıtlarda görüntülemeyi desteklemiyorsa, onları yanıt vermeyen olarak işaretleyin.

{ "comp": "md-tab", "responsive": true, "nitelikler": { "yuva": "Tab", "sınıf": "araç-bölme-sekme" }, "alt öğeler": [{ "comp": "yuva", "nitelikler": { "ad": "SCREEN_POP_TAB" } }], "görünürlük": "SCREEN_POP" }, { "comp": "md-tab-panel", "responsive": false, "nitelikler": { "yuva": "panel", "sınıf": "araç-bölme" }, "alt": [{ "comp": "yuva", "nitelikler": { "ad": "CALL_GUIDE" } }], "görünürlük": "CALL_GUIDE" },

Yanıt vermeyen araçlar en iyi kullanıcı deneyimini sağlayamaz ve küçük görünümde görüntülenmez. Temsilcinin yanıt vermeyen olarak yapılandırılmış tüm araçları görüntülemek için tarayıcı penceresinin boyutunu artırması gerekir.

sayfa > ayrılar

Bu bölümde Web bileşeni özniteliklerini belirtebilirsiniz. 

"Nitelikler": { "devre dışı": "yanlış", },

sayfa > görebilinebilirlik

Sayfa düzeyinde veya comp düzeyinde özel yerleşime eklenen Cisco tarafından sunulan widget'ların görünür olup olmadığını belirtir.

Cisco tarafından teklif edilen araçlar İletişim Geçmişi, Cisco Webex Experience Management, IVR Dökümü, Önizleme Kampanya Arama Kılavuzu ve Ekran Pop'tır.

  • Görünürlük özellik değerleri Masaüstü Yerleşimi'nin varsayılan JSON dosyasında oluşturulur ve tanımlanır. Yönetici, Cisco tarafından sunulan araçlar için görünürlük özellik değerlerini değiştiremez .

  • görünürlük özellik değeri NOT_RESPONSIVE kullanımdan kaldırılmıştır. Yalnızca geriye dönük uyumluluk için kullanmaya devam edebilirsiniz. İşlev aynı kaldığı için, daha önce NOT_RESPONSIVE olarak ayarlanan herhangi bir değer değişikliği gerektirmez.

    Yeni oluşturulan bir aracı duyarlı veya duyarlı değil olarak ayarlamak için, duyarlı özelliğini kullanmanız gerekir. Daha fazla bilgi için, bkz . duyarlı özellik.

sayfa > çocuklar

Bu özellik, yerleşimin temel bölümüdür. İçinde çocuklar Bölümünde, Web Bileşeni tabanlı araç alt öğeleri geçirmenize izin veriyorsa gerektiği kadar iç içe yuvalayabilirsiniz. Bunu mümkün kılmak için, geliştiricinin programlı olarak Oluklu içerik. Daha fazla bilgi için bkz . Cisco Webex Contact Center Masaüstü Geliştirici Kılavuzu.

STORE değerlerini özellik olarak aktarma hakkında bilgi için bkz . Masaüstünden Araçlar'a Veri Paylaşma. 

"children": [{ "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" } ] } ],

"Alt" dizi bölümünün avantajı, Masaüstü paketinin zaten bir parçası olan yerleşim teknik özelliklerinizde mevcut Web Bileşenlerini kullanabilmenizdir. Masaüstü paketi Web Bileşenlerinden birkaçı şunları içerir:

  • agentx-wc-iframe: Herhangi bir web sayfasını bir iFrame'e araç olarak yerleştirmenize olanak sağlayan bir araç.

  • Dinamik alan: Özel sayfalar dışında bir yerde Temsilciler için sürükle bırak özelliğini etkinleştirmenize olanak sağlayan bir bileşen. Varsayılan olarak sürükle bırak özelliğini etkinleştirirseniz özel sayfalar da bu özelliğe sahip olabilir.

  • Momentum-ui-web-component kitaplığındaki herhangi bir bileşen. Daha fazla bilgi için bkz . Git0. Örnek:

    • md-tabs: Tırnak kap kap kaplayıcı

    • md-tab: Tek Tab üstbilgisi

    • md-tab-panel: Tek Tab içeriği

Kalıcı Tab öznitelikleri hakkında daha fazla bilgi için bkz . Kalıcı Sekme nitelikleri.

sayfa > textContent

Metin içeriğinizi eklemenize yardımcı olur. 

"textContent": "Metin İçeriğim",

sayfa > stili

Bileşeninize belirli bir CSS stili atamanıza yardımcı olur.

"stil": { "backgroundColor": "#CBD", "taşma": "kaydırma" },

sayfa > wrapper

Araç koruyucu, aracınızın üstüne bir araç çubuğu eklemenize olanak sağlar. Araç çubuğu bir başlık ve Ekranı kapla simgesi Araç üzerindeki (Ekranı Kapla) simgesi. Araç sayfada küçük bir yer kapladığında, ekranı kapla simgesi temsilcinin aracı tam çalışma alanında görmesine olanak sağlar.

Varsayılan değeri "uygulama en üst düzeye çıkarma alanı" olarak kullandığınızdan emin olun. Şu anda yalnızca varsayılan değer kullanılabilir. 

"koruyucu": { "başlık": Araç Başlığım ", "maximizeAreaName": "uygulama ekranı kapla" }

sayfa > wrapper> id

(İsteğe bağlı) Web bileşeni araç koruyucu, benzersiz bir tanımlayıcı kullanarak dinamik araç başlığını güncellemenize olanak sağlar. Araç koruyucu id özellik değerini benzersiz-id-güncel-unvan olarakgirin. 

"koruyucu": { "başlık": Araç Başlığım ", "id": "unique-id-to-update-title", "maximizeAreaName": "app-maximize-area" }

JavaScript CustomEvent için aynı benzersiz tanımlayıcıyı kullandığınızdan emin olun. Daha fazla bilgi için, Cisco Webex Contact Center Masaüstü Geliştiricisi'nin Temsilci İletişim Modülü bölümünde bulunan EşZamansız Olaylar bölümüne bakın .

iFrame tabanlı araç başlığını güncellemek için aynı etki alanına ait iFrame içeriğini kullanın. Aşağıdaki örnek bir örnektir:

< komut dosyası türü = "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", { kabarcıklar: doğru, ayrıntı: { başlık: "yeni başlık" } }); window.parent.dispatchEvent(e); }; < /script> < button id = "customEvent" > Yeni Başlık < /button> < iframe src = "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" > < /iframe>

sayfa > agentx-wc-iframe

Masaüstünde bir araç olarak görünen bir web sayfasını iFrame'e katıştırmanıza olanak sağlar. "agentx-wc-iframe" adlı iFrame aracını kullanabilirsiniz. 

"comp1": { "comp": "agentx-wc-iframe", "nitelikler": { "src": "https://blog.logrocket.com / the - ultimate - kılavuz - to - iframes / " }, ", ", "kaplayıcı": { "başlık": "AgentX iFrame", "maximizeAreaName": "uygulama en üst düzeye çıkar" } },

sayfa > layout

Bir sayfadaki araçları düzenlemenize olanak sağlar.

Aşağıdaki biçim kılavuz yerleşimini temsil eder:

tür Yerleşim = { alanlar: dize[][]; boyut: { satır: sayı[]; sütun: sayı[]; };

Burada kılavuzu, araçlar bölümünde tanımladığınız alan adlarıyla tanımlayabilirsiniz.

Aşağıdaki örnekte, üç satır ve üç sütunun düzeninin nasıl belirtildiği gösterilmektedir: 

"yerleşim": { "alanlar": [ "comp1", "comp1", "comp3" ], [ "comp2", "comp2", "comp3" ], [ "comp4", "comp4", "comp4" ] ], "boyut": { "sütun": [1, 1, 1], "satır": [1, 1, 1] } }
3x3 Yerleşiminin Eşit Dağılımı
Equal distribution of a 3x3 layout for Webex contact Center Desktop layout configuration.

Boyut bölümünde, sayılar bir aracı diğer araçlara göreli olarak kaplayabilir. Üç sütun da alanın 1 kısmını kaplar. Uygun genişlikte %100 ile her araç yatay alanın %33,33'unu kaplar.

Eşit Sütun Genişliğiyle
Equal column width layout for Webex Contact Center Desktop layout configuration.

Başka bir kullanım örneği, "sütun" olarak ayarlarsanız: [1, 2, 2], genel alanın 5'e (1+2+2) bölündüğü ve ilk araç yatay alanın %20'sini kapladığı anlamına gelir. İkinci ve üçüncü araçlar her birinden %40 alır. Daha fazla bilgi için bkz . Kılavuz Yerleşimi Temel Kavramları.

Unequal column width layout for Webex Contact Center Desktop layout configuration.
Sütun Genişliğini Değiştirdikten Sonra

sayfa > ROOT

Yerleşimlerin iç içe yerlerine alt yerleşim denir. Yerleşim yapılandırmanızda iç içe yerleşimler varsa, alt yerleşimler için üst olarak tek bir "ROOT" nesneniz olmalıdır. Aksi takdirde, iç içe yerleştirme gerekmiyorsa yerleşim yapılandırmanız düz olabilir.

Bu alt katman yerleşim yeniden boyutlandırma davranışı üzerinde daha fazla denetim sağlar. Sayfa yerleşimi özelliği Kayıt<string, Yerleşim> türünde olmalıdır. Yerleşim özelliği, bir sayfadaki araçları düzenlemenize olanak sağlar.

{ "id": "some-id", "widget": { "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": { "alanlar": [ ["c1", "sub1"], ["c2", "alt2",], "boyut": { "sütun": [1, 1], "satır": [1, 1] } }, "alt1": { "alanlar": [ ["c3", "c4"] ], "boyut": { "sütun": [1, 1], "satır": [1] } }, "alt2": { "alanlar": [ "c1"], ["c5"] ], "boyut": { "sütun": [1], "satır": [1, 1] } } } }

Bu kurulum KÖK yerleşiminde bağımsız olarak yeniden boyutlandırabileceğiniz iki alt alan içeren bir kılavuz oluşturur.

Sub-layout appearance for Webex Contact Center Desktop layout configuration.
Alt düzen Görünümü

Bir bileşeni yeniden boyutlandırmak o alt katmandaki bileşenleri etkiler.

Sub-layout appearance, after resizing both sub-layouts, for Webex Contact Center Desktop layout configuration.
Her iki Alt Yerleşimi Yeniden Boyutlandırdıktan Sonra

Aşağıdaki durumlardan haberdar olun:

Sonsuz döngü: KÖK yerleşimini ROOT'un alt yerleşimi olarak eklerseniz, "çağrı yığını aşıldı" hatasına neden olur ve sonsuz bir döngüye girer.

{ "yerleşim": { "KÖK": { "alanlar": [ ["c1", "c2"], ["c3", "ROOT"], ], "boyut": { "sütun": [1, 1], "satır": [1, 1] } }
Sub-layout appearance with infinite loop for Webex Contact Center Desktop layout configuration.
Sonsuz Döngülü Alt Düzen

Aynı Alt Yerleşim (N) süreleri: Alt yerleşimi aynı ada sahip bir kılavuzunuza birden çok kez eklerseniz ve bunlardan birini yeniden boyutlandırırsanız, tüm alt yerleşimler otomatik olarak yeniden boyutlandırılır.

İstenilen davranış bu değilse, alt yerleşimlerin her birini benzersiz bir adla yeniden adlandırın.

{ "yerleşim": { "KÖK": { "alanlar": [ ["c1", "sub1", ["c2", "alt1"], ], "boyut": { "sütun": [1, 1], "satır": [1, 1] } } }, "alt1": { "alanlar": [ ["c3", "c4"] ], "boyut": { "sütun": [1, 1], "satır": [1] } }
Sub-layout appearance with N times for Webex Contact Center Desktop layout configuration.
N defalı alt düzen

Kalıcı Sekmelerin Öznitelikleri

Özel sayfalarda ve özel araçlardaki sekmeleri kalıcı olarak ayarlamak için , özel yerleşime md sekmelerinin özniteliklerini girin.

Örnek: Sekmeleri Kalıcı Olarak Ayarlama

{ "comp": "md-tabs", "nitelikler": { "kalıcı seçim": true, "tabs-id": "kapsayıcıda birlikte tüm sekmeler için benzersiz kimlik" }, }

Mülk

Açıklama

Kalıcı seçim

Md-sekmelerini kalıcı olacak şekilde ayarlamak için. Varsayılan değer doğrudur.

sekmeler-kimlik

Kapsayıcıda birlikte tüm sekmeler için benzersiz kimlik.

md-sekmelerini kalıcı olarak ayarladığınızda (kalıcı seçim: doğru), Bir temsilci Masaüstündeki sayfalar veya araçlar arasında geçiş olsa bile Agent Desktop Tab seçimini korur.

  • Kalıcı Tab davranışı Masaüstünde zaten ayarlı olduğundan, kalıcı seçim özelliği Yardımcı Bilgiler panosundaki ve Temsilci Performans İstatistikleri raporları sayfasındaki sekmeler için geçerli değildir.
  • Masaüstü oturumunu kapattığınızda, tarayıcıyı yeniden açtığınızda/yenilediğinizde veya tarayıcı önbelleğini sildiğinizde, Tab seçimi varsayılan Tab olarak sıfırlanır.

Kalıcı Araçlar Yapılandırması

Herhangi bir özel aracı kalıcı olacak şekilde yapılandırabilirsiniz. Kalıcı araçlar Masaüstünün tüm sayfalarında görüntülenir. Kalıcı araçlar, yalnızca etkin bir iletişim isteğiniz veya konuşmanız olduğunda Yardımcı Bilgiler bölmesinde yeni bir Tab olarak görüntülenir. Örneğin, Örnek Kalıcı araç.

Kalıcı araçlar Home sayfasında diğer sayfalarda görüntüledikleri şekilde görüntülenmez. Ancak, etkin bir etkileşiminiz varsa, kalıcı araçlar Yardımcı Bilgiler bölmesinin parçası olarak Home sayfasında görüntülenir. Örneğin, bir aramayı yanıtladığınızda, Etkileşim Denetimi bölmesi görüntülenir ve Örnek Kalıcı araç Yardımcı Bilgiler bölmesinin parçası olarak görüntülenir.

Örnek: 

"area": { "kalıcı": [{ "comp": "md-tab", "nitelikler": { "yuva": "Tab" }, "alt": [{ "comp": "md-icon", "attributes": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "Özel Sayfa Aracı" } ] }, { "comp": "md-tab-panel", "Nitelikler": { "yuva": "panel" }, "alt": [{ "comp": "dynamic-area", "properties": { "area": { "id": "dw-panel-two", ""araçlar": { "comp1": { "comp": "agentx-wc-iframe", "nitelikler": { "src": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" }, "kapsıyor": { "başlık": "AgentX iFrame", "maximizeAreaName": "app-maximize-area" } }, "comp2": { "comp": "uuip-widget-two", "komut dosyası": "./dynamic-widgets/widget-two.js", "nitelikler": { "başlık": "WIDGET 2 içerik" }, "koruyucu": { "başlık": "Araç 2 başlığı", "maximizeAreaName": "app-maximize-area" } } }, "yerleşim": { "alanlar": [ ["comp1", "comp2"] ], "boyut": { "sütun": [1, 1], "satır": [1] } } } } } } }

Bir aracı özelleştirdiğinizde, aşağıdaki seçeneklerden birini belirleyebilirsiniz:

  • Bir iframe içine katıştırılabilen bir web sayfasında bir uygulamayı ana bilgisayar.

  • Özel bir araç oluşturun.

Teknik araç gereksinimleri Masaüstü Aracı Geliştirme Belgelerinde açıklanmıştır. Bir yerleşim düzenleyicisi olarak, aşağıdaki ayrıntılara sahip olduğunuzdan emin olun:

  • Özel HTML öğesinin (Web Bileşeni olarak bilinir) adı nedir?

  • JavaScript paketini barındıran içerik iletim ağı (CDN) kaynağının URL'si nedir?

Üstbilgi Araçları

Üstbilgi, satır içi bilgileri görüntülemek, açılır menü eklemek vb. için kullanılır. Üstbilgi kapsayıcısı sınırlı dikey alana sahip olduğundan, genel başlık yüksekliği yalnızca 64 pikseldir. Yerleşim hizalama hakkında daha fazla bilgi için yerleşim özellik bölümüne bakın .

Örnek: 

"üstbilgi":{ "id":"üstbilgi", "araçlar":{ "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": { "sütun": [1, 1], "satır": [1] } } }

Üstbilgi aracı için araç ipucu eklemek için, bileşeni md-araç ipucu ile sarın. Mesaj özelliğine araç ipucu bilgilerini girin.

Örnek: 

"üstbilgi": { "id": "dw-header", "araçlar": { "head1": { "comp": "md-tooltip", "nitelikler": { "mesaj": "Netlify" }, "children": [{ "comp": "agentx-wc-iframe", "nitelikler": { "src": "https://keen-jackson-8d352f.netlify.app" } }] }, }, }, }

Üstbilgideki özelleştirilebilir araç alanında herhangi bir aracı iFrame üzerinden yapılandırmak için stil nitelikleri ekranı ve yüksekliğini eklemeniz gerekir. Yükseklik özniteliğinin en uygun değeri 64 pikseldir.

Stil niteliklerini, iFrame içinde beklendiği gibi yüklenmeleri için varolan üstbilgi araçlarına eklediğinizden emin olun.

Örnek: 

"head1": { "comp": "agentx-wc-iframe", "nitelikler": { "src": "https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm", "stil": "yükseklik:64 piksel; ekran:flex;" } },

Başlık yüksekliği yalnızca 64 piksel olduğundan, üstbilgi için birden çok sütunlu tek bir satır kullanmanızı öneririz. Hizalama hakkında daha fazla bilgi için yerleşim özellik bölümüne bakın .

Yardımcı Bilgiler Bölmesi

Masaüstünün Yardımcı Bilgiler panosu, Cisco tarafından sunulan (varsayılan) araçları ve özel araçları içeren sekmeleri görüntüler. Ön tanımlı sekmelerde aşağıdaki Cisco tarafından sunulan araçlar görüntülenir:

  • İletişim Geçmişi

  • IVR Dökümü

  • Müşteri Deneyimi Yolculuğu

  • Ekran Açılır Öğesi

Yardımcı Bilgiler bölmesini şunları yapmak için kullanabilirsiniz:

  • Sekme ekleme

  • Tab sırasını değiştirme

  • Önceden tanımlanmış sekmeleri kaldırma

  • Özel sekmeleri sürüklenebilir olarak işaretleme

  • Özel sekmelere araç ipuçları ekleme

  • Sıralamayı Tab Sıfırla seçeneğini ekleme

Örnek: 

"panel": { "comp": "md-tabs", "nitelikler": { "sınıf": "araç-sekmeler" }, "alt öğeler": [{ "comp": "md-tab", "nitelikler": { "yuva": "Tab", "sınıf": "araç-bölme-sekme" }, "alt öğeler": [{ "comp": "yuva", "nitelikler": { "ad": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "nitelikler": { "yuva": "panel", "sınıf": "araç bölmesi" }, "alt öğeler": [{ "comp": "yuva", "nitelikler": { "ad": "CONTACT_HISTORY" } }] }, { "comp": "md-tab", "nitelikler": { "yuva": "Tab", "sınıf": "araç-bölme-sekme" }, "alt öğeler": [{ "comp": "md-icon", "nitelikler": { "ad": "pop-out_16" } }, { "comp": "span", "textContent": "Screen Pop" } ], "visibility": "SCREEN_POP" }, { "comp": "md-tab-panel", "nitelikler": { "yuva": "panel", "sınıf": "araç-bölme" }, "children": [{ "comp": "#SCREEN_POP" }], }, { "comp": "md-tab", "attributes": { "yuva": "Tab" }, "children": [{ "comp": "md-icon", "attributes": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "Özel Araç" } ] }, { "comp": "md-tab-panel", "nitelikler": { "yuva": "panel" }, "alt": [{ "comp": "dynamic-area", "properties": { "area": { "id": "dw-panel-two", "widget": { "comp1": { "comp": "agentx-wc-iframe", "nitelikler": { "src": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" }, }, "koruyucu": { "başlık": "AgentX iFrame", "maximizeAreaName": "app-maximize-area" } }, "comp2": { "comp": "widget-one", "script": "https://my-cdn.com/dynamic-widgets/widget-one.js", "" "kaplayıcı": { "title": "Araç başlığı", "maximizeAreaName": "app-maximize-area" } } }, }, "yerleşim": { "alanlar": [ "comp1"], ["comp2"] ], "size": { "sütun": [1], "satır": [1, 1] } } } } }} ] },

Management Portal'da Müşteri Deneyimi Yönetimi Metriklerini etkinleştirdikten sonra Müşteri Deneyimi Yolculuğu aracı yapılandırabilirsiniz.

Ek Bilgiler bölmesinde, özel araçlarınızı yerleştirmek için yeni sekmeler ekleyin. Burada hiçbir özel kural uygulanmaz ve bileşen iç içe yuvalama, alt kısımda beklendiği ve açıklandığı şekildedir. Daha fazla bilgi için sayfanın Çocuk özelliğine bakın .

AşağıdaTab başlıklarınızı özelleştirmek için özel örnekler verilmiştir:

Alt Özellik'e Simge ve Etiket Yerleştirme Örneği 

{ "comp": "md-tab", "nitelikler": { "yuva": "Tab", "sınıf": "araç-bölme-sekmesi" }, "alt öğeler": [{ "comp": "md-icon", "nitelikler": { "name": "transcript_16" } }, { "comp": "span", "textContent": "Aracım Tab" } ], }, },

Çocuklar Özelliğine Resim (CSS ile) ve Etiketler Yerleştirme Örneği 

{ "comp": "md-tab", "nitelikler": { "yuva": "Tab" }, "alt": [{ "comp": "span", "nitelikler": { "stil": "hizalama öğeleri: orta; ekran: flex;" }, "children": [{ "comp": "img", "nitelikler": { "src": "http: //my-cdn.com/icon.svg", "genişlik": 16, "yükseklik": 16, "stil": "kenar sağ: 0,5rem;" } }, { "comp": "span", "textContent": "Aracım Tab" } ] }], }, },

Diğer Sekmeler açılır listesi, Yardımcı Bilgiler bölmesinde birden çok sekme bulunduğunda otomatik olarak görünür.

Okunabilirlik ve erişilebilirlik için özel bir Tab araç ipucu eklemeniz gerekir. Özel bir Tab için araç ipucu eklemek için, bileşeni md-araç ipucu ilesarın. mesaj özelliğine araç ipucu bilgilerini girin ve aşağıdaki örnekte gösterildiği gibi stil özellik değerlerini uygulayın .

"comp": "md-tooltip", "nitelikler": { "sınıf": "araç-sekmeler", "mesaj": "Örnek Tab 1", "stil": "maks genişlik: 252 piksel; min genişlik: 110 piksel; taşma: gizli; metin taşması: elips; beyaz boşluk: nowrap; ekran: satır içi blok; kenar boşluk: -10 piksel;" },

Özel bir Tab için maksimum 252 piksel genişlik ve minimum 110 piksel genişlik öneririz.

Özel Tab içinde sürükle bırak özelliğini etkinleştirmek için, niteliklere aşağıdaki özelliğiekleyin: 

"comp": "md-tabs", "nitelikler": { "sınıf": "araç-sekmeler", "sürüklenebilir": true, "comp-unique-id": "örnek-dinamik-özel sekmeler" },

  • sürüklenebilir: Sürüklenebilir özellik değerini doğru olarakayarlayın.

  • comp-unique-id: Bileşeni tanımlamak için benzersiz bir değer girin.

    Örnek: 

    "comp-unique-id": "örnek-dinamik-özel sekmeler"

Özel bir Tab için sürükle bırak özelliğini etkinleştirirseniz, temsilci Tab sürükleyip Yardımcı Bilgiler bölmesinde gerekli konuma bırakabilir. Sekmeleri varsayılan Tab sırasına sıfırlamak için, aşağıdaki özelliği ekleyin: 

"comp": "agentx-wc-more-actions-widget", "nitelikler": { "yuva": "ayarlar", "sınıf": "araç-bölme", "sekmeler-benzersiz-id": "örnek-dinamik-özel-sekmeler" },

  • agentx-wc-more-actions-widget: Daha Fazla Eylem ( olarak görüntülenen bileşeni girinDiğer eylemler simgesi) simgesine tıklayın.

  • slot="ayarlar": Bileşen içinde, Daha Fazla Eylem açılır listesinde Tab Sırasını Sıfırla seçeneği olarak görüntülenen bir nitelik girin. Temsilciler Yardımcı Bilgiler bölmesindeki sekmeleri, Diğer eylemler simgesi >Etm Tab Sırasına Göre Sırala.

  • tabs-unique-id: md-tabs bileşenlerini eşlemek ve sıfırlamak üzere comp-unique-id özelliği için tanımlanan aynı benzersiz değeri girin.

Aşağıdaki örnek kod, Diğer Eylemler ve Sıfırla Tab Sırası işlevlerini kullanır .

"comp": "agentx-wc-more-actions-widget", "nitelikler": { "yuva": "ayarlar", "sınıf": "araç-bölme", "sekmeler-benzersiz-id": "örnek-dinamik-özel-sekmeler" }, "children": [{ "comp": "div", "nitelikler": { "textContent": "özel eylem", "yuva": "özel eylem" }, "altlar": [{ "comp": "agentx-wc-notes-header-widget" }, { "comp": "agentx-wc-menü-bildirim" } ] }], }
Webex Contact Center more actions menu example, showing the 'Reset Tab Order' option.

Varsayılan olarak, ön tanımlı sekmeler için araç ipucu, elips simgesi ve Tab sıra sıfırlaması tanımlanır.

Diğer Eylemler açılır listesi, Tab Sıralamayı Sıfırla seçeneği sonrasında ek özel bileşenler veya araçlar eklemek üzere genişletilebilir. Aşağıda, ek bileşenlere uygulanabilecek örnek stil özellik değerleri kümesi yer almaktadır.

"comp": "md-tooltip", "nitelikler": { "sınıf": "araç-sekmeler", "mesaj": "Sample Element", "stil": "maks genişlik: 252 piksel; min genişlik: 110 piksel; taşma: gizli; metin taşması: elips; beyaz boşluk: nowrap; ekran: satır içi blok; kenar boşluk: -10 piksel;" },
Webex Contact Center more actions menu example, showing additional, custom options that can be added after the 'Reset Tab Order' option.

Sürükle ve bırak özelliği, Daha Fazla Eylem açılır listesine eklenen ek özel bileşenler veya araçlar için desteklenmez.

Başsız Araçlar

Başsız bölümde, gizli olan ve Agent Desktop üzerinde görünmeyen araçlar ekleyebilirsiniz. Bu araçlar mantığı arka planda çalıştırmak için kullanılır. Bu bölüm, Masaüstünde gerçekleşen olayları tetiklemede ve pencere öğesine özgü mantığın yürütülmesinde yararlıdır. Örneğin, gelişinde bir SMS için özel bir CRM Ekranı Pop açma.

Örnek: 

"kafasız":{ "id":"headless", "widget':{ "comp1":{ "comp":"headless-widget-one", "script":"https://my-cdn.com/dynamic-widgets/headless-widget-one.js", }, "comp2":{ "comp":"headless-widget-two", "script":"https://my-cdn.com/dynamic-widgets/headless-widget-two.js", } }, "layout":{ "area":[[ "comp1", comp2" ]], "size": { "sütun": [1, 1], "satır": [1] } } }

Masaüstünden Araçlara Veri Paylaşma

Özel bir araç içindeki özellikler veya nitelikler aracılığıyla gerçek zamanlı veri almak için, JSON yerleşimi yapılandırmasında uygun STORE değerlerini atayın.

Ayrıca, verilere JavaScript SDK aboneleri üzerinden erişmek için, verileri özellikler veya nitelikler üzerinden de iletebilirsiniz. Bileşeniniz özellik veya nitelik değişikliklerine tepki vermek için oluşturulmuşsa, veri sağlayıcısı adı verilen Agent Desktop öğesinden gerçek zamanlı veri güncellemeleri alırsınız.

Şu anda, anahtar BIR STORE altında tek bir veri sağlayıcımız vardır. Daha fazla bilgi için, Cisco Webex Contact Center Masaüstü Geliştirici Kılavuzu'ndaki Veri Sağlayıcı—Araç Özellikleri ve Niteliklerbölümüne bakın.

Önizleme Kampanya Çağrısı

Yönetici kampanyalar oluşturur, arama modunu (önizleme) yapılandırır ve kampanyaları ekiplere atar. Temsilci, kampanyaların atandığı bir ekibin parçasıysa, temsilci bir giden önizleme kampanya çağrısı yapabilir. Daha fazla bilgi için bkz . Sesli Giden Kampanya Modlarını Webex Contact Center içinde Yapılandırma.

Yönetici, bir temsilci için önizleme kampanya iletişimini etkinleştirmek üzere özel yerleşimde aşağıdakileri yapılandırır.

Kampanya İletişim Kaydı

Yönetici özel yerleşimin üstbilgi kapsayıcısında Kampanya İletişimi aracı ekler. Kampanya iletişim kaydı, tanımlanan özelliklere dayalı olarak müşterinin iletişim bilgilerini görüntüler. Yerleşim hizalama hakkında daha fazla bilgi için, sayfa Özellik Ayrıntıları tablosunun yerleşim özellik satırına bakın .

Örnek: 

 "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-bildirim" }, { "comp": "agentx-state-selector" } ]

Arama Kılavuzu

Arama Kılavuzu aracı Masaüstündeki Yardımcı Bilgiler bölmesinde görüntülenir. Çağrı kılavuzu kampanya düzeyinde soruları ve yanıtları görüntüler. Temsilciden çağrı kılavuzundaki soru setini okuması ve yanıtları göndermesi istenir.

Örnek: 

"panel":{ "comp":"md-tabs", "attributes":{ "class":"widget-tabs" }, "children":[ { "comp":"md-tab", "attributes":{ "yuva":"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", // CDN dahil buraya bağlantı:{ "başlık":"Çağrı Kılavuzu", "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" } } ], "visibility":"CALL_GUIDE" } }
  • Aşağıdaki comp özellik referansları değişti. özellik değerindeki agentx acqueon iledeğiştirilir:
    • agentx-preview-campaign , acqueon-preview-campaign olarak yeniden adlandırılır
    • agentx-call-guide , acqueon-call-guide olarak yeniden adlandırılır
  • Liste ve Kampanya Yöneticisi'ni (LCM) bir CDN'de barındırmanız ve ardından komut dosyası özelliğinde URL'yi belirtmeniz gerekir.

Ekran Açılır Öğesi

Masaüstü Yerleşimi'nde, Ekran Pop'unu aşağıdaki yollardan biriyle yapılandırabilirsiniz:

  • Özel sayfa olarak

  • Özel sayfadaki mini uygulamalardan biri olarak

  • Yardımcı Bilgiler bölmesinde Tab olarak

Ekran Pop'un masaüstünde aşağıdaki faktörlere bağlı olarak görüntülenir:

Ses kanalı için:

  • Masaüstü Yerleşimi'nde tanımlanan yapılandırma

  • Akış Tasarımcısı'nda tanımlanan Ekran Pop etkinliği

Yeni Dijital Kanallarda:

  • Masaüstü Yerleşimi'nde tanımlanan yapılandırma

  • Bağlantı Akışı Oluşturucu'da tanımlanan Ekran Pop düğümü

Ekran Pop özelliğini yapılandırma hakkında daha fazla bilgi için bkz . Ekran Pop.

Gezinti Çubuğundaki Ekran Pop'ını Yapılandırma

Ekran Pop'unu özel bir sayfa veya özel bir sayfadaki araçlardan biri olarak yapılandırabilirsiniz. Ekran Pop özel sayfasına erişmek için, Gezinti çubuğundaki Ekran Pop simgesini tıklatın. Özel sayfadaki Ekran Pop aracına erişmek için, Gezinti çubuğundaki özel simgeyi tıklatın. Nav özellikleri hakkında daha fazla bilgi için bkz . Gezinti (Özel Sayfalar) .

Örnek: Özel Sayfa Olarak Ekran Pop'ı

{ "nav": { "etiket": "Ekran Pop", "simge": "açılır pencere", "iconType": "momentum", "navigateTo": "/screenpop", "align": "top" }, "page": { "id": "agentx-wc-screen-pop", "araçlar": { "comp1": { "comp": "agentx-wc-screen-pop", "özellikler": { "screenPopUrl": "$STORE.session.screenpop.screenPopSelector" } } } }, "yerleşim": { "alanlar": [ ["comp1"] ], "boyut": { "sütun": [1], "satır": [1] } } }, "görünürlük": "SCREEN_POP" }

Örnek: Özel Sayfada Araç Olarak Ekran Pop'ı

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

Ekran Pop'ı Akış Tasarımcısı'nda yapılandırılmamışsa, özel sayfa boş görünür. Akış Tasarımcısında Ekran Pop'ını yapılandırma hakkında daha fazla bilgi için bkz . Ekran Pop.

Yardımcı Bilgi Panosunda Ekran Pop'ını Yapılandırma

Ekran Pop'ını Yardımcı Bilgiler bölmesinde bir Tab olarak görünecek şekilde yapılandırabilirsiniz.

Ekran Pop, varsayılan olarak, Akış Tasarımcısında Masaüstün İçi olarak görüntülenecek şekilde yapılandırılmışsa, Ekran Popu Yardımcı Bilgi panosunun Ekran Pop Tab yeni bir alt Tab olarak görünür.

Ekran Pop'un Yardımcı Bilgiler bölmesinde Tab olarak eklenmesi için panel bölümüne aşağıdaki özniteliği ekleyin. Panel ayrıntıları hakkında daha fazla bilgi için, bkz . Yardımcı Bilgi Panosu .

Örnek: Yardımcı Bilgi Panosu'nda Tab Olarak Ekran Pop

 { "comp":"md-tab", "nitelikler":{ "yuva":"Tab", "sınıf":"araç-bölme-sekmesi" }, "alt":[ { "comp": "md-icon", "nitelikler": { "ad": "pop-out_16" }}, { "comp": "span", "textContent": "Screen Pop" }], "görünürlük": "SCREEN_POP" }, { "comp": "md-tab-panel", "attribute": { "yuva": "panel", "sınıf": "araç-bölme" }, "alt": [{ "comp": "#SCREEN_POP" } ], }

Akış Tasarımcısı'nda tanımlanan Ekran Pop görüntüleme seçeneği Masaüstü Yerleşimi'nde tanımlanan yapılandırmadan önceliklidir.

Örneğin, aşağıdaki Ekran Pop ayarlarını yapılandırdığınız dikkate alın:

  • Akış Tasarımcısı—Ayarları yeni tarayıcıda # Tab
  • Masaüstü Yerleşimi—Yardımcı Bilgi bölmesinde Tab Olarak

Ekran pop'unun yapılandırıldığı olay meydana geldiğinde, Ekran Pop'ı Masaüstü dışında ( yani, yeni bir tarayıcı Tab) görüntülenir.

Örnek Kullanım Örneği Örnekleri

Aşağıdaki bölümlerde referansınız için birkaç örnek verilmiştir:

Gezinti Çubuğundan Müşteri Deneyimi Yönetimi Metrikleri Aracı Yapılandırma ve Erişme

Örnek: 

{ "nav": { "etiket": "Müşteri Deneyimi Yönetimi Metrikleri", "simge": "/uygulama/resimler/wxm.bcd45cc3.svg", "iconType": "other", "navigateTo": "wxm-metrics", "align": "top" }, "page": { "id": "wxm-metrics", "widget": { "comp1": { "comp": "agentx-wc-cloudcherry-widget", "nitelikler": { "ölçümler": true }, "özellikler": { "userGiden": "$STORE.app.userSindir", "spaceId": "", "metricsId": "", "teamId": "$STORE.agent.teamName", "ani": "$STORE.agentContact.taskSelected.ani", "isDarkMode": "$STORE.app. darkMode" }, "kapsayıcı": { "başlık": "Customer Experience Journey", "maximizeAreaName": "app-maximize-area" } } } }, "yerleşim": { "alanlar": [ ["comp1"] ], "boyut": { "sütun": [1], "satır": [1] } } } }

spaceId ve metricsId almak içinWebex Experience Management belgelerine bakın .

Özel Sayfadaki Sekmeleri Kullanma

Örnek: 

{ "nav": { "etiket": "Dinamik Sekmeler", "simge": "saklı bilgi", "iconType": "momentum", "navigateTo": "dynamic-tabs", "align": "top" }, "page": { "id": "page-id-tabs", "widget": { "comp1": { "comp": "md-tabs", "children": [{ "comp": "md-tab", "textContent": "One", "Nitelikler": { "yuva": "Tab" } }, { "comp": "md-tab-panel", "nitelikler": { "yuva": "panel" }, "alt": [{ "comp": "araç-iki", "komut dosyası": "http:/my-cdn.com/dynamic-widgets/widget-two.js" }] }, { "comp": "md-tab", "textContent": "two", "attributes": { "yuva": "Tab" } }, { "comp": "md-tab-panel", "textContent": "İki İçerik", "nitelikler": { "yuva": "panel" } } ] }, "comp2": { "comp": "araç-iki", "komut dosyası": " http:/my-cdn.com/dynamic-widgets/widget-two.js" } }, "yerleşim": { "alanlar": [ ["comp1", "comp2"] ], "boyut": { "sütun": [1, 1], "satır": [1] } } } }

İletişim Geçmişi ve Ekran Pop'ıyla Varsayılan Yardımcı Bilgi Panosu

Örnek: 

"panel": { "comp": "md-tabs", "nitelikler": { "sınıf": "araç-sekmeler" }, "alt öğeler": [{ "comp": "md-tab", "nitelikler": { "yuva": "Tab", "sınıf": "araç-bölme-sekme" }, "alt öğeler": [{ "comp": "yuva", "nitelikler": { "name": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "nitelikler": { "yuva": "panel", "sınıf": "araç-bölme" }, "alt öğeler": [{ "comp": "yuva", "nitelikler": { "ad": "CONTACT_HISTORY" } }] }, ] }, { "comp": "md-tab", "nitelikler": { "yuva": "Tab", "sınıf": "araç-bölme-sekme" }, { "comp": "md-tab", "nitelikler": { "yuva": "Tab", "sınıf": "araç-bölme-sekme" }, "alt öğeler": [{ "comp": "yuva", "nitelikler": { "ad": "SCREEN_POP_TAB" } }], "görünürlük": "SCREEN_POP" }, { "comp": "md-tab-panel", "nitelikler": { "yuva": "bölme", "sınıf": "araç-bölme" }, "alt": [{ "comp": "yuva", "nitelikler": { "ad": "SCREEN_POP" } }], "görünürlük": "SCREEN_POP" } },

Müşteri Deneyimi Yolculuk Aracı ile Yardımcı Bilgi Panosu

Örnek: 

"panel": { "comp": "md-tabs", "nitelikler": { "sınıf": "araç-sekmeler" }, "alt": [{ "comp": "md-tab", "nitelikler": { "yuva": "Tab" }, "children": [{ "comp": "yuva", "nitelikler": { "name": "WXM_JOURNEY_TAB" } }], "görünürlük": "WXM_JOURNEY" }, { "comp": "md-tab-panel", "nitelikler": { "yuva": "panel", "sınıf": "araç-bölme" }, "alt öğeler": [{ "comp": "agentx-wc-cloudcherry-widget", "properties": { "user Gözü": "$STORE.app.userMetri", "spaceId": "", "metricsId": """", "teamId": "$STORE.agent.teamName", "ani": "$STORE.agentContact.taskSelected.ani", "isDarkMode": "$STORE.app.darkMode" }, "öyle": { "başlık": "Customer Experience Journey", "maximizeAreaName": "app-maximize-area" } }], { "comp": "md-tab", "nitelikler": { "yuva": "Tab", "sınıf": "araç-bölme-sekme" }, "alt": { "comp": "md-tab", "nitelikler": { "yuva": "Tab", "sınıf": "araç-bölme-sekmesi" }, "alt": [{ "comp": "yuva", "nitelikler": { "ad": "CONTACT_HISTORY_TAB" } }] }, { "comp": "md-tab-panel", "nitelikler": { "yuva": "panel", "sınıf": "araç-bölme" }, "alt öğeler": [{ "comp": "yuva", "nitelikler": { "ad": "CONTACT_HISTORY" } }] }, { "comp": "md-tab", "nitelikler": { "yuva": "Tab", "sınıf": "pencere-bölme-sekme" }, "alt öğeler": [{ "comp": "yuva", "nitelikler": { "ad": "SCREEN_POP_TAB" } }], "görünürlük": "SCREEN_POP" }, { "comp": "md-tab-panel", "nitelikler": { "yuva": "panel", "sınıf": "pencere penceresi" }, "alt": [{ "comp": "yuva", "nitelikler": { { "name": "SCREEN_POP" } }], "görünürlük": "SCREEN_POP" } "görünürlük": "SCREEN_POP" }, },

Yerelleştirme

Masaüstü UI, 29 dilde yerelleştirmeyi destekler.

Aşağıdaki diller desteklenir:

Bulgarca, Katalanca, Çince (Çin), Çince (Tayvan), Hırvatça, Çekçe, Danca, Felemenkçe, İngilizce (Birleşik Krallık), İngilizce (ABD), Fince, Fransızca, Almanca, Macarca, İtalyanca, Japonca, Korece, Norveççe, Lehçe, Portekizce (Brezilya), Portekizce (Portekiz), Rumence, Rusça, Sırpça, Slovakça, Slovence, İspanyolca, İsveççe ve Türkçe.

Masaüstü UI dili, tarayıcınızdaki dil tercihi ayarlarına bağlıdır. Örneğin, Firefox tarayıcısında tercih ettiğiniz dili Fransızca olarak seçtiğinizi düşünelim. Masaüstünü Firefox tarayıcısında başlattığınızda, Masaüstü UI Français'te (Fransızca) görünür. Ancak, Masaüstü Yerleşimi'ne eklenen yatay başlık, gezinti çubuğu ve diğer bileşenler, tarayıcınızdaki dil tercihi ayarlarına bağlı olarak yerelleştirilmemiştir.

Masaüstü Bileşenlerini Yerelleştirme

Masaüstü bileşenlerini yerelleştirmek için,

  • app.json dosyasında ayarlanmış mevcut yerelleştirme tuşlarını kullanın. Yerelleştirme tuşları ayarlanmamışsa, varsayılan dil İngilizcesi (ABD) kullanılır. app.json dosyasına yerelleştirme anahtarı eklemek için Cisco Desteğine hizmet isteği gönderebilirsiniz.

    Örnek: Yerelleştirme Anahtarı 

    { "ortak": { "buttonTitle": "Zamanlayıcıyı Durdur" } }

  • Bir bileşeni yerelleştirmek için, Masaüstü Yerleşimi JSON dosyasına aşağıdaki büyük/küçük harfe duyarlı özelliği girin:

    "textContent": "$I 18N.<key>",

    where <key> app.json dosyasında ilgili yerelleştirme anahtarına başvurur .

Örnek: Üstbilgi Bileşenini Yerelleştirme 

"üstbilgi": { "id": "üstbilgi", "araçlar": { "baş1": { "comp": "md-button", "nitelikler": { "yuva": "menü-tetikleyici", "stil": "yükseklik: 64px" }, "children": [{ "comp": "span", "textContent": "$I 18N.common.buttonTitle", } }, }, }

Örnek: Yardımcı Bilgi Panosundaki Tab Bileşeni Yerelleştirme

"panel": { "comp": "md-tab", "nitelikler": { "yuva": "Tab" }, "alt": [{ "comp": "span", "textContent": "$I 18N.panelTwo.screenPopTitle" }] }