Genel Bakış

Masaüstü Yerleşimi özelliği, Webex Contact Center Desktop'ı 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 Desktop üç 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ş yerleşim 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.

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 alanda, ekranınızın sol üst köşesinde Webex Contact Center logosu ve adı (varsayılan) görüntülenir.

  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 sekmeye (Yardımcı Bilgiler panosu) 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 etkinlikleriyle ilgilenmek üzere Webex Contact Center Desktop'ta 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'ta oturum açtığınızda Görüntülenecek Masaüstü Yerleşimini 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'ta 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ği'ne 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 İletişim Merkezi'dir .

Örnek:

"appTitle": "Webex Contact Center"

Varsayılan appTitle, Contact Center Desktop uygulamasından Contact Center Webex a 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 yerleşim varsayılan appTitle 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. BIR 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şimiseç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ı Görev Listesi bölmesinde etkin bir görev olmadan Ana sayfadaysa bu ayar uygulanmaz. Böyle bir durumda, yeni bir görev kabul edildiğinde, odağınız Ana sayfadan yeni kabul edilen göreve yönlendirilir.

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 sekmesi değilse görünen yerel bir tarayıcı bildirimidir. Masaüstü tarayıcı penceresi veya sekmesi

  • 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 true 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 Meeting kullanıcılarını yönetir ve yalnızca kullanıcıların Enterprise Edition'Webex sahip olması durumunda ayrıcalıklar atar. Daha fazla bilgi için bkz . Cisco Webex Control Hub Webex Meetings Kullanıcıları Yönetme.
  • Gözetmenlerin ve KOBİ'lerin Webex İstemcisini kendi sistemlerine (kişisel cihaz) indirmesi veya Webex Web uygulaması ( 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çindeki 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 ayarladığınızda temsilci, gözetmen ve gözetmenTemsilci rolleri için kullanılabilir. Temsilci, gözetmen veya gözetmenTemsilen Webex Uygulama oturumunu kapatamaz.

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

    Webex Uygulamasını belirli bir ekip için 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.

Webex Uygulamasını Yardımcı Bilgiler bölmesinde, özel sayfada ve özel araçta 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 Uygulamaya erişmeye devam edebilir, ancak Masaüstünün yatay üstbilgisinde Webex Uygulama kullanılamaz.
  • webexConfigured özellik değeri false olarakayarlanırsa, webex değeri headerActions özelliğine eklenmiş olsa bile Webex Uygulama simgesi Masaüstünün yatay üstbilgisinde 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 İletişim Merkezi temsilci durumu seçicisi. (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 yatay üstbilgisinde Webex Uygulama 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, webex değeri advancedHeader özelliğine eklenmiş olsa bile Webex Uygulama simgesi Masaüstünün yatay üstbilgisinde görüntülenmez. Daha fazla bilgi için bkz . webexConfigured.

Ana sayfa

Masaüstünde oturum açtığınızda, Ana Sayfa'ya gidin.

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

Ana Sayfada aşağıdaki araçları 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ü Ana Sayfasında görüntülenir.

Ana Sayfa Yerleşimi Yapılandırması

Masaüstünüzdeki Ana Sayfayı, kuruluş tercihlerinize ve marka hizalamanıza göre yerleşimi görüntüleyecek şekilde yapılandırabilirsiniz. Ana sayfayı yapılandırmak için Ana Sayfa alanını düzenleyin. Bir kullanıcı Masaüstünde oturum açtığınızda Ana Sayfada görüntülenecek 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ü ve Yönetilen Ekipler gibibölümleri filtreleyin .

Aşağıdaki tabloda, Ana Sayfa'nın yapılandırılması için gereken sayfa özellikleri anlatılmaktadır:

Tablo 2. Dinamik Ana 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" }, "postacı": { "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 - bileşen", "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 Agent Desktop temsilcileri için varsayılan açılış sayfasını belirtir. Gezinti çubuğu sayfasını, Agent Desktop oturum 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, Ana sayfa 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 sekmeli üstbilgi

    • md-tab-panel: Tek sekmeli içerik

Kalıcı sekmenin öznitelikleri hakkında daha fazla bilgi için, bkz . Kalıcı Sekmelerin Öznitelikleri.

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, masaüstü geliştiricisinin Cisco Webex Contact Center 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-maksimize-alan" } },

sayfa > layout

Sayfadaki widget'ları düzenlemenizi sağlar.

Aşağıdaki format bir ızgara düzenini temsil eder:

tür Düzen = { alanlar: dize[][]; boyut: { satırlar: sayı[]; sütunlar: sayı[]; }; };

Burada, widgets bölümünde tanımladığınız alan adlarıyla ızgarayı tanımlayabilirsiniz.

Aşağıdaki örnek, üç satır ve üç sütunun düzeninin nasıl belirtildiğini göstermektedir:

"düzen": { "alanlar": [ [ "comp1", "comp1", "comp3" ], [ "comp2", "comp2", "comp3" ], [ "comp4", "comp4", "comp4" ] ], "boyut": { "sütunlar": [1, 1, 1], "satırlar": [1, 1, 1] } }
3x3 Düzeninin 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 widget'ın diğer widget'lara göre kaplayabileceği alan oranını temsil eder. Her üç sütun da eşit miktarda yer kaplıyor. %100 genişlikte her widget yatay alanın %33.33'ünü 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 olarak, "cols": [1, 2, 2] olarak ayarlarsanız, genel alanın 5'e bölündüğü (1+2+2) ve ilk widget'ın yatay alanın %20'sini kapladığı anlamına gelir. İkinci ve üçüncü widget'ların her biri %40 alır. Daha fazla bilgi için Grid Düzeninin Temel Kavramları bölümüne bakın.

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

sayfa > KÖK

Düzenlerin iç içe yerleştirilmesine alt düzen denir. Düzen yapılandırmanızda iç içe geçmiş düzenler varsa, alt düzenler için üst öğe olarak tek bir "ROOT" nesnesine sahip olmanız gerekir. Aksi takdirde, iç içe yerleştirme gerekmiyorsa düzen yapılandırmanız düz olabilir.

Bu alt düzen, düzenin yeniden boyutlandırılması davranışı üzerinde daha fazla kontrol sağlar. Sayfa düzeni özelliği Kayıt<dize, Düzen> türünde olmalıdır. Düzen özelliği, bir sayfadaki widget'ları düzenlemenize olanak tanır.

{ "id": "some-id", "widgets": { "c1": { "comp": "div", "textContent": "c1" }, "c2": { "comp": "div", "textContent": "c2" }, "c3": { "comp": "div", "textContent": "c3" }, "c4": { "comp": "div", "textContent": "c4" }, "c5": { "comp": "div", "textContent": "c5" } }, "layout": { "ROOT": { "areas": [ ["c1", "sub1"], ["c2", "sub2"], ], "size": { "cols": [1, 1], "rows": [1, 1] } }, "sub1": { "alanlar": [ ["c3", "c4"] ], "boyut": { "sütunlar": [1, 1], "satırlar": [1] } }, "sub2": { "alanlar": [ ["c1"], ["c5"] ], "boyut": { "sütunlar": [1], "satırlar": [1, 1] } } } }

Bu kurulum, bağımsız olarak yeniden boyutlandırabileceğiniz iki alt ızgaraya sahip ROOT düzeninde bir ızgara oluşturur.

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

Bir bileşenin boyutunun değiştirilmesi, o alt düzendeki bileşenleri etkiler.

Sub-layout appearance, after resizing both sub-layouts, for Webex Contact Center Desktop layout configuration.
Her iki alt düzeni yeniden boyutlandırdıktan sonra

Aşağıdaki durumlara dikkat edin:

Sonsuz döngü: ROOT düzenini ROOT'un bir alt düzeni olarak eklerseniz, "çağrı yığını aşıldı" hatası oluşur ve sonsuz döngüye girilir.

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

Aynı Alt Düzen (N) kez: Alt düzeni aynı adla ızgaranıza birden fazla kez eklerseniz ve bunlardan birinin boyutunu değiştirirseniz, tüm alt düzenler otomatik olarak yeniden boyutlandırılır.

Eğer bu istenen davranış değilse, alt düzenlerin her birini benzersiz bir adla yeniden adlandırın.

{ "düzen": { "KÖK": { "alanlar": [ ["c1", "alt1"], ["c2", "alt1"], ], "boyut": { "sütunlar": [1, 1], "satırlar": [1, 1] } }, "alt1": { "alanlar": [ ["c3", "c4"] ], "boyut": { "sütunlar": [1, 1], "satırlar": [1] } } } }
Sub-layout appearance with N times for Webex Contact Center Desktop layout configuration.
N zamanlı alt düzen

Kalıcı Sekmeler için Nitelikler

Özel sayfalardaki ve özel bileşenlerdeki sekmeleri kalıcı olarak ayarlamak için özel düzende md-tabs için öznitelikleri girin.

Örnek: Sekmeleri Kalıcı Olarak Ayarla

{ "comp": "md-tabs", "attributes": { "persist-selection": true, "tabs-id": "kapsayıcıdaki tüm sekmeler için benzersiz kimlik" }, }

Mülk

Açıklama

kalıcı-seçim

md-tabs öğesinin kalıcı olmasını sağlamak için. Varsayılan değer true'dur.

sekmeler-kimliği

Konteynerdeki tüm sekmeler için benzersiz tanımlama.

md-tabs öğesini kalıcı olarak ayarladığınızda (persist-selection: true), Agent Desktop, bir aracı Masaüstünde sayfalar veya bileşenler arasında geçiş yapsa bile sekme seçimini korur.

  • persist-selection özelliği, Yardımcı Bilgiler bölmesindeki ve Aracı Performans İstatistikleri raporları sayfasındaki sekmeler için geçerli değildir, çünkü kalıcı sekme davranışı Masaüstünde zaten ayarlanmıştır.
  • Masaüstünden çıkış yaptığınızda, tarayıcıyı yeniden yüklediğinizde/yenilediğinizde veya tarayıcı önbelleğini temizlediğinizde sekme seçimi varsayılan sekmeye sıfırlanır.

Kalıcı Widget Yapılandırması

Herhangi bir özel widget'ı kalıcı olacak şekilde yapılandırabilirsiniz. Kalıcı widget'lar Masaüstünün tüm sayfalarında görüntülenir. Kalıcı bileşenler, yalnızca etkin bir iletişim isteğiniz veya görüşmeniz olduğunda Yardımcı Bilgiler bölmesinde yeni bir sekme olarak görüntülenir. Örneğin, Örnek Kalıcı widget'ı.

Kalıcı widget'lar Ana Sayfa'da diğer sayfalarda görüntülendiği şekilde görüntülenmez. Ancak etkin bir etkileşiminiz varsa kalıcı bileşenler Ana Sayfa'da Yardımcı Bilgiler bölmesinin bir parçası olarak 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ı widget, Yardımcı Bilgiler bölmesinin bir parçası olarak görüntülenir.

Örnek:

"alan": { "kalıcı": [{ "comp": "md-tab", "öznitelikler": { "slot": "sekme" }, "çocuklar": [{ "comp": "md-icon", "öznitelikler": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "Özel Sayfa Widget'ı" } ] }, { "comp": "md-tab-panel", "öznitelikler": { "slot": "panel" }, "çocuklar": [{ "comp": "dinamik-alan", "özellikler": { "alan": { "id": "dw-panel-two", "widget'lar": { "comp1": { "comp": "agentx-wc-iframe", "öznitelikler": { "src": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" }, "wrapper": { "title": "AgentX iFrame", "maximizeAreaName": "app-maximize-area" } }, "comp2": { "comp": "uuip-widget-two", "script": "./dynamic-widgets/widget-two.js", "attributes": { "title": "WIDGET 2 içeriği" }, "wrapper": { "title": "Widget 2 başlığı", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1", "comp2"] ], "size": { "cols": [1, 1], "rows": [1] } } } } }] } ] }

Bir widget'ı özelleştirirken aşağıdaki seçeneklerden birini seçebilirsiniz:

  • Bir iframe içine yerleştirilebilen bir uygulamayı bir web sayfasında barındırın.

  • Özel bir widget oluşturun.

Teknik widget gereksinimleri şurada açıklanmıştır: Masaüstü Widget Geliştirme Belgeleri. Bir düzen düzenleyicisi olarak şu 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 dağıtım ağı (CDN) kaynağının URL'si nedir?

Başlık Widget'ları

Başlık, satır içi bilgileri görüntülemek, açılır menüler eklemek vb. için kullanılır. Başlık kabının sınırlı dikey alanı olduğundan, genel başlık yüksekliği yalnızca 64 pikseldir. Düzen hizalaması hakkında daha fazla bilgi için bkz. düzen özelliği bölüm.

Örnek:

"başlık":{ "kimlik":"başlık", "araçlar":{ "başlık1":{ "comp":"başlık-araç-bir", "komut dosyası":"https://my-cdn.com/dynamic-widgets/header-widget-one.js", }, "başlık2":{ "comp":"başlık-araç-iki", "komut dosyası":"https://my-cdn.com/dynamic-widgets/header-widget-two.js", } }, "düzen":{ "alanlar":[[ "başlık1", "başlık2" ]], "boyut": { "sütunlar": [1, 1], "satırlar": [1] } } }

Bir başlık bileşeni için bir araç ipucu eklemek için bileşeni md-tooltip ile sarın. Mesaj özelliğine araç ipucu bilgilerini girin.

Örnek:

"başlık": { "id": "dw-başlığı", "araçlar": { "head1": { "comp": "md-araç ipucu", "öznitelikler": { "mesaj": "Netlify" }, "çocuklar": [{ "comp": "agentx-wc-iframe", "öznitelikler": { "kaynak": "https://keen-jackson-8d352f.netlify.app" } }] }, }, }

Başlıktaki özelleştirilebilir bileşen alanında iFrame aracılığıyla herhangi bir bileşeni yapılandırmak için stil özniteliklerini görüntüleme ve yükseklik eklemeniz gerekir. Yükseklik özniteliğinin en uygun değeri 64 pikseldir.

Mevcut başlık bileşenlerinin iFrame içinde beklendiği gibi yüklenmesi için stil özniteliklerini eklediğinizden emin olun.

Örnek:

"head1": { "comp": "agentx-wc-iframe", "öznitelikler": { "src": "https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm", "stil": "yükseklik:64px;görüntüleme:esnek;" } },

Başlık yüksekliği yalnızca 64 piksel olduğundan, başlık için yalnızca birden fazla sütuna sahip tek bir satır kullanmanızı öneririz. Hizalama hakkında daha fazla bilgi için düzen özelliği bölümüne bakın.

Yardımcı Bilgiler Bölmesi

Masaüstünün Yardımcı Bilgiler bölmesi, Cisco tarafından sunulan (varsayılan) widget'ları ve özel widget'ları içeren sekmeleri görüntüler. Cisco tarafından sunulan aşağıdaki widget'lar önceden tanımlanmış sekmelerde görünür:

  • İletişim Geçmişi

  • IVR Dökümü

  • Müşteri Deneyimi Yolculuğu

  • Ekran Açılır Öğesi

Yardımcı Bilgiler bölmesini kullanarak şunları yapabilirsiniz:

  • Sekmeler ekle

  • Sekme sırasını değiştir

  • Önceden tanımlanmış sekmeleri kaldırın

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

  • Özel sekmelere araç ipuçları ekleyin

  • Sekme Sırasını Sıfırla seçeneğini ekleyin

Örnek:

"panel": { "comp": "md-tabs", "öznitelikler": { "sınıf": "widget-sekmeleri" }, "çocuklar": [{ "comp": "md-tab", "öznitelikler": { "slot": "sekme", "sınıf": "widget-pane-tab" }, "çocuklar": [{ "comp": "slot", "öznitelikler": { "ad": "İLETİŞİM_GEÇMİŞİ_SEKMESİ" } }] }, { "comp": "md-tab-panel", "öznitelikler": { "slot": "panel", "sınıf": "widget-pane" }, "çocuklar": [{ "comp": "slot", "öznitelikler": { "ad": "İLETİŞİM_GEÇMİŞİ" } }] }, { "comp": "md-tab", "öznitelikler": { "slot": "sekme", "sınıf": "widget-pane-tab" }, "çocuklar": [{ "comp": "md-icon", "öznitelikler": { "name": "pop-out_16" } }, { "comp": "span", "textContent": "Ekran Açılır Penceresi" } ], "görünürlük": "EKRAN_POP" }, { "comp": "md-tab-panel", "öznitelikler": { "slot": "panel", "sınıf": "widget-pane" }, "çocuklar": [{ "comp": "#EKRAN_POP" }], }, { "comp": "md-tab", "öznitelikler": { "slot": "sekme" }, "çocuklar": [{ "comp": "md-icon", "öznitelikler": { "name": "emoticons_16" } }, { "comp": "span", "textContent": "Özel Widget" } ] }, { "comp": "md-tab-panel", "öznitelikler": { "slot": "panel" }, "children": [{ "comp": "dinamik-alan", "özellikler": { "alan": { "id": "dw-panel-two", "öznitelikler": { "comp1": { "comp": "agentx-wc-iframe", "öznitelikler": { "src": "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" }, "wrapper": { "title": "AgentX iFrame", "maximizeAreaName": "app-maximize-area" } }, "comp2": { "comp": "widget-one", "script": "https://my-cdn.com/dynamic-widgets/widget-one.js", "wrapper": { "title": "Widget başlığı", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1"], ["comp2"] ], "size": { "cols": [1], "rows": [1, 1] } } } } }] } ] },

Yönetim Portalı'nda Müşteri Deneyimi Yönetimi Metriklerini etkinleştirdikten sonra Müşteri Deneyimi Yolculuğu widget'ını yapılandırabilirsiniz.

Yardımcı Bilgiler bölmesinde, özel widget'larınızı yerleştirmek için yeni sekmeler ekleyin. Burada özel kurallar uygulanmaz ve bileşen yuvalaması beklendiği gibidir ve çocuklar bölümünde açıklanmıştır. Daha fazla bilgi için sayfanın Çocuklar özelliğine bakın.

Sekme başlıklarınızı özelleştirmek için özel örnekler şunlardır:

Çocuk Özelliğine Simge ve Etiketler Yerleştirme Örneği

{ "comp": "md-tab", "öznitelikler": { "slot": "sekme", "sınıf": "widget-pane-tab" }, "çocuklar": [{ "comp": "md-icon", "öznitelikler": { "name": "transcript_16" } }, { "comp": "span", "textContent": "Benim Widget Sekmem" } ], },

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

{ "comp": "md-tab", "öznitelikler": { "slot": "sekme" }, "çocuklar": [{ "comp": "span", "öznitelikler": { "style": "hizalama öğeleri: merkez; görüntüleme: esnek;" }, "çocuklar": [{ "comp": "img", "öznitelikler": { "src": "http: //my-cdn.com/icon.svg", "genişlik": 16, "yükseklik": 16, "stil": "sağ kenar boşluğu: 0,5rem;" } }, { "comp": "span", "textContent": "Benim Widget Sekmem" } ] }], },

Yardımcı Bilgiler bölmesi birden fazla sekme içerdiğinde Daha Fazla Sekme açılır listesi otomatik olarak görüntülenir.

Okunabilirlik ve erişilebilirlik için özel bir sekme ipucu eklemelisiniz. Özel bir sekme için bir araç ipucu eklemek için bileşeni md-tooltip ile sarın. İpucu bilgilerini mesaj özelliğine girin ve aşağıdaki örnekte gösterildiği gibi stil özellik değerlerini uygulayın.

"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "Örnek Sekme 1", "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;" },

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

Özel sekmede sürükle ve bırak özelliğini etkinleştirmek için, aşağıdaki özelliği ekleyin: nitelikler:

"comp": "md-sekmeleri", "öznitelikler": { "sınıf": "widget-sekmeleri", "sürüklenebilir": doğru, "comp-benzersiz-kimlik": "örnek-dinamik-özel-sekmeleri" },
  • sürüklenebilir : Ayarla sürüklenebilir mülk değeri doğru.

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

    Örnek:

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

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

"comp": "agentx-wc-more-actions-widget", "öznitelikler": { "slot": "ayarlar", "sınıf": "widget-paneli", "sekmeler-benzersiz-kimlik": "örnek-dinamik-özel-sekmeler" },
  • agentx-wc-daha-fazla-eylem-widget'ı : Görüntülenen bileşeni girin Daha Fazla Eylem (Daha fazla eylem simgesi) Yardımcı Bilgiler bölmesindeki simgesi.

  • slot="ayarlar" : Bileşen içinde görüntülenen bir öznitelik girin Sekme Sırasını Sıfırla seçeneği Daha Fazla Eylem açılır liste. Aracılar, Yardımcı Bilgiler bölmesindeki sekmeleri varsayılan sıraya sıfırlamak için Daha fazla eylem simgesi > Sekme Sırasını Sıfırla.

  • sekmeler-benzersiz-kimlik : için tanımlanan aynı benzersiz değeri girin comp-benzersiz-kimlik haritayı eşleştirmek ve sıfırlamak için özellik md-sekmeleri bileşenler.

Aşağıdaki örnek kod şunu kullanır: Daha Fazla Eylem Ve Sekme Sırasını Sıfırla Fonksiyonlar.

"comp": "agentx-wc-more-actions-widget", "öznitelikler": { "slot": "ayarlar", "sınıf": "widget-pane", "sekmeler-benzersiz-kimlik": "örnek-dinamik-özel-sekmeler" }, "çocuklar": [{ "comp": "div", "öznitelikler": { "textContent": "özel eylem", "slot": "özel-eylem" }, "çocuklar": [{ "comp": "agentx-wc-notlar-başlık-widget" }, { "comp": "agentx-wc-menü-bildirimi" } ] }], }
Webex Contact Center more actions menu example, showing the 'Reset Tab Order' option.

Varsayılan olarak, önceden tanımlanmış sekmeler için araç ipucu, üç nokta simgesi ve sekme sırası sıfırlaması tanımlanmıştır.

Daha Fazla Eylem açılır listesi, Sekme Sırasını Sıfırla seçeneğinden sonra ek özel bileşenler veya widget'lar eklemek için genişletilebilir. Aşağıda, ek bileşenlere uygulanabilen bir stil özellik değerleri örnek kümesi verilmiştir.

"comp": "md-tooltip", "attributes": { "class": "widget-tabs", "message": "Örnek Eleman", "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;" },
Webex Contact Center more actions menu example, showing additional, custom options that can be added after the 'Reset Tab Order' option.

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

Başsız Widget'lar

Headless bölümünde Agent Desktop etiketi üzerinde görünmeyen ve gizli olan widget'ları ekleyebilirsiniz. Bu widget'lar arka planda mantığı çalıştırmak için kullanılır. Bu bölüm Masaüstünde gerçekleşen olayları tetiklemek ve widget'a özgü mantığı yürütmek için kullanışlıdır. Örneğin, SMS etiketi geldiğinde özel bir CRM Ekran Pop'u açmak.

Örnek:

"başsız":{ "id":"başsız", "widget'lar":{ "comp1":{ "comp":"başsız-widget-bir", "script":"https://my-cdn.com/dynamic-widgets/headless-widget-one.js", }, "comp2":{ "comp":"başsız-widget-iki", "script":"https://my-cdn.com/dynamic-widgets/headless-widget-two.js", } }, "düzen":{ "alanlar":[[ "comp1", comp2" ]], "boyut": { "sütunlar": [1, 1], "satırlar": [1] } } }

Masaüstünden Widget'lara Veri Paylaşımı

Özel bir widget içindeki özellikler veya öznitelikler aracılığıyla gerçek zamanlı veri almak için, düzen JSON yapılandırmasında uygun STORE değerlerini atayın.

Ayrıca, JavaScript SDK aboneleri aracılığıyla verilere erişmek için verileri özellikler veya öznitelikler aracılığıyla da geçirebilirsiniz. Bileşeniniz özellik veya öznitelik değişikliklerine tepki verecek şekilde oluşturulduysa, veri sağlayıcısı olarak adlandırılan Agent Desktop'dan 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 var. Daha fazla bilgi için Cisco Webex Contact Center Masaüstü Geliştirici Kılavuzu'ndaki Veri Sağlayıcısı—Widget Özellikleri ve Nitelikleri bö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. Bir ajan, kampanyaların atandığı bir ekibin parçasıysa, giden bir kampanya önizleme çağrısı yapabilir. Daha fazla bilgi için bkz. Webex İletişim Merkezi'nde Sesli Arama Kampanya Modlarını Yapılandırma.

Yönetici, bir temsilci için kampanya kişisinin önizlemesini etkinleştirmek amacıyla özel düzende aşağıdakileri yapılandırır.

Kampanya İletişim

Yönetici, özel düzenin başlık kabına Kampanya İletişim Kişisi widget'ını ekler. Kampanya iletişim kişisi, tanımlanan özelliklere göre müşterinin iletişim bilgilerini görüntüler. Düzen hizalaması hakkında daha fazla bilgi için, sayfa Özellik Ayrıntıları tablosunun düzen özelliği satırına bakın.

Örnek:

 "advancedHeader": [ { "comp": "agentx-preview-campaign", "özellikler": { "isCampaignManagementEnabled": "$STORE.agent.isCampaignManagementEnabled", "agentDbId": "$STORE.agent.acqueonAgentId", "lcmUrl": "$STORE.agent.lcmUrl", "isCallInProgress": "$STORE.agentContact.isActiveCall", "outdialEntryPointId": "$STORE.agent.outDialEp", "teamId": "$STORE.agent.getAcqueonTeamId", "campaignManagerAdditionalInfo": "$STORE.agent.campaignManagerAdditionalInfo", "orgId": "$STORE.agent.orgId", "dialerProxyHost": "$STORE.envVariables.serviceUrls.dialerProxyHost", "isProgressiveCampaignEnabled": "$STORE.app.featuresFlags.isProgressiveCampaignEnabled" } }, { "comp": "agentx-webex" }, { "comp": "agentx-outdial" }, { "comp": "agentx-bildirimi" }, { "comp": "agentx-durum-seçicisi" } ] 

Çağrı Rehberi

Çağrı Rehberi widget'ı Masaüstündeki Yardımcı Bilgiler bölmesinde görüntülenir. Çağrı rehberinde kampanya düzeyinde soru ve cevaplar gösterilmektedir. Temsilciden çağrı rehberindeki soru setini okuması ve yanıtları göndermesi istenir.

Örnek:

"panel":{ "comp":"md-tabs", "öznitelikler":{ "sınıf":"widget-tabs" }, "çocuklar":[ { "comp":"md-tab", "öznitelikler":{ "slot":"tab", "sınıf":"widget-pane-tab" }, "çocuklar":[ { "comp":"md-icon", "öznitelikler":{ "name":"icon-note_16" } }, { "comp":"span", "textContent":"Çağrı Kılavuzu" } ], "görünürlük":"ÇAĞRI_KILAVUZU" }, { "comp":"md-tab-panel", "öznitelikler":{ "slot":"panel", "sınıf":"widget-pane" }, "çocuklar":[ { "comp": "acqueon-call-guide", "script": "http://localhost:5555//index.js", // CDN bağlantısını buraya ekleyin "wrapper":{ "title":"Çağrı Rehberi", "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" } } ], "görünürlük":"ÇAĞRI_KILAVUZU" } ] }
  • Aşağıdaki komp mülk referansları değişti. ajanx mülk değerindeki değer, aşağıdakilerle değiştirilir: katılmak:
    • agentx-önizleme-kampanyası olarak yeniden adlandırıldı accone-önizleme-kampanyası
    • agentx-çağrı-kılavuzu olarak yeniden adlandırıldı accone-call-guide
  • Liste ve Kampanya Yöneticisi'ni (LCM) bir CDN'de barındırmalı ve ardından URL'yi belirtmelisiniz senaryo mülk.

Ekran Açılır Öğesi

Masaüstü Düzeni'nde Ekran Açılır Penceresi'ni aşağıdaki yollardan biriyle yapılandırabilirsiniz:

  • Özel sayfa olarak

  • Özel sayfadaki mini uygulamalardan biri olarak

  • Yardımcı Bilgiler bölmesinde bir sekme olarak

Ekran Pop-up'ı Masaüstünde aşağıdaki faktörlere göre görüntülenir:

Ses kanalı için:

  • Masaüstü Düzeninde tanımlanan yapılandırma

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

Yeni Dijital Kanallar İçin:

  • Masaüstü Düzeninde tanımlanan yapılandırma

  • Connect Flow Builder'da tanımlanan Ekran Pop düğümü

Ekran Pop'u yapılandırma hakkında daha fazla bilgi için bkz. Ekran Pop.

Gezinme Çubuğunda Ekran Açılır Penceresini Yapılandırma

Ekran Pop'unu özel bir sayfa olarak veya özel bir sayfadaki widget'lardan biri olarak yapılandırabilirsiniz. Ekran Pop'u özel sayfasına erişmek için, Ekran Pop Gezinme çubuğundaki simge. Özel sayfadaki Ekran Pop-up widget'ına erişmek için Gezinti çubuğundaki özel simgeye tıklayın. Daha fazla bilgi için gezinme özellikleri, bkz. Gezinme (Özel Sayfalar).

Örnek: Ekran Pop-up'ı Özel Sayfa Olarak

{ "nav": { "label": "Ekran Pop-up", "icon": "pop-out", "iconType": "momentum", "navigateTo": "/screenpop", "align": "top" }, "page": { "id": "agentx-wc-screen-pop", "widgets": { "comp1": { "comp": "agentx-wc-screen-pop", "properties": { "screenPopUrl": "$STORE.session.screenpop.screenPopSelector" } } }, "layout": { "areas": [ ["comp1"] ], "size": { "cols": [1], "rows": [1] } } }, "visibility": "SCREEN_POP" }

Örnek: Özel Sayfada Widget Olarak Ekran Açılır Penceresi

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

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

Yardımcı Bilgi Bölmesinde Ekran Açılır Penceresini Yapılandırma

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

Varsayılan olarak, Ekran Pop'u Akış Tasarımcısı'nda Masaüstü İçinde olarak görüntülenecek şekilde yapılandırılmışsa, Ekran Pop'u Yardımcı Bilgiler bölmesinin Ekran Pop sekmesinde yeni bir alt sekme olarak görünür.

Ekran Açılır Penceresini Yardımcı Bilgiler bölmesinde bir sekme olarak eklemek için panel bölümüne aşağıdaki özniteliği ekleyin. Panel ayrıntıları hakkında daha fazla bilgi için Yardımcı Bilgiler Bölmesi'ne bakın.

Örnek: Yardımcı Bilgi Bölmesinde sekme olarak Ekran Açılır Penceresi

 { "comp":"md-tab", "öznitelikler":{ "slot":"tab", "sınıf":"widget-pane-tab" }, "çocuklar":[ { "comp": "md-icon", "öznitelikler": { "name": "pop-out_16" }}, { "comp": "span", "textContent": "Ekran Açılır Penceresi" }], "görünürlük": "EKRAN_POP" }, { "comp": "md-tab-panel", "öznitelikler": { "slot": "panel", "sınıf": "widget-pane" }, "çocuklar": [{ "comp": "#EKRAN_POP" } ], }

Akış Tasarımcısı'nda tanımlanan Ekran Açılır Görüntüleme seçeneği, Masaüstü Düzeni'nde tanımlanan yapılandırmaya göre önceliklidir.

Örneğin, aşağıdaki Ekran Açılır Penceresi ayarlarını yapılandırdığınızı varsayalım:

  • Akış Tasarımcısı—Ayarları şu şekilde görüntüle: Yeni tarayıcı sekmesinde
  • Masaüstü Düzeni—Yardımcı Bilgi bölmesinde bir sekme olarak

Ekran açılır penceresinin yapılandırıldığı olay gerçekleştiğinde, Ekran Açılır Penceresi Masaüstünün dışında, yani yeni bir tarayıcı sekmesinde görüntülenir.

Örnek Kullanım Durumu Örnekleri

Aşağıdaki bölümler referansınız için birkaç örnek sunmaktadır:

Müşteri Deneyimi Yönetimi Ölçümleri Widget'ını Gezinme Çubuğundan Yapılandırma ve Erişim

Örnek:

{ "nav": { "label": "Müşteri Deneyimi Yönetimi Ölçümleri", "icon": "/app/images/wxm.bcd45cc3.svg", "iconType": "diğer", "navigateTo": "wxm-metrics", "align": "üst" }, "page": { "id": "wxm-metrics", "widgets": { "comp1": { "comp": "agentx-wc-cloudcherry-widget", "attributes": { "metrics": true }, "properties": { "userModel": "$STORE.app.userModel", "spaceId": "", "metricsId": "", "teamId": "$STORE.agent.teamName", "ani": "$STORE.agentContact.taskSelected.ani", "isDarkMode": "$STORE.app.darkMode" }, "wrapper": { "title": "Müşteri Deneyimi Yolculuğu", "maximizeAreaName": "app-maximize-area" } } }, "layout": { "areas": [ ["comp1"] ], "size": { "cols": [1], "rows": [1] } } } },

spaceId ve metricsId değerlerini almak için Webex Experience Management belgelerine bakın.

Özel Sayfada Sekmeleri Kullanma

Örnek:

{ "nav": { "label": "Dinamik Sekmeler", "icon": "depolanan-bilgi", "iconType": "momentum", "navigateTo": "dinamik-sekmeler", "align": "üst" }, "page": { "id": "page-id-sekmeleri", "widgets": { "comp1": { "comp": "md-tabs", "children": [{ "comp": "md-tab", "textContent": "Bir", "attributes": { "slot": "sekme" } }, { "comp": "md-tab-panel", "attributes": { "slot": "panel" }, "children": [{ "comp": "widget-two", "script": "http:/my-cdn.com/dynamic-widgets/widget-two.js" }] }, { "comp": "md-tab", "textContent": "İki", "öznitelikler": { "slot": "sekme" } }, { "comp": "md-tab-panel", "textContent": "İki İçerik", "öznitelikler": { "slot": "panel" } } ] }, "comp2": { "comp": "widget-two", "script": " http:/my-cdn.com/dynamic-widgets/widget-two.js" } }, "düzen": { "alanlar": [ ["comp1", "comp2"] ], "boyut": { "sütunlar": [1, 1], "satırlar": [1] } } } }

İletişim Geçmişi ve Ekran Açılır Penceresi ile Varsayılan Yardımcı Bilgi Bölmesi

Örnek:

"panel": { "comp": "md-tabs", "öznitelikler": { "sınıf": "widget-sekmeleri" }, "çocuklar": [{ "comp": "md-tab", "öznitelikler": { "slot": "sekme", "sınıf": "widget-pane-tab" }, "çocuklar": [{ "comp": "slot", "öznitelikler": { "ad": "İLETİŞİM_GEÇMİŞİ_SEKMESİ" } }] }, { "comp": "md-tab-panel", "öznitelikler": { "slot": "panel", "sınıf": "widget-pane" }, "çocuklar": [{ "comp": "slot", "öznitelikler": { "ad": "İLETİŞİM_GEÇMİŞİ" } }] }, ] }, { "comp": "md-tab", "öznitelikler": { "slot": "sekme", "sınıf": "widget-pane-tab" }, { "comp": "md-tab", "öznitelikler": { "slot": "sekme", "sınıf": "widget-pane-tab" }, "çocuklar": [{ "comp": "slot", "öznitelikler": { "name": "SCREEN_POP_TAB" } }], "görünürlük": "SCREEN_POP" }, { "comp": "md-tab-panel", "öznitelikler": { "slot": "panel", "sınıf": "widget-pane" }, "çocuklar": [{ "comp": "slot", "öznitelikler": { "name": "SCREEN_POP" } }], "görünürlük": "EKRAN_POP" } },

Müşteri Deneyimi Yolculuğu Widget'ı ile Yardımcı Bilgi Bölmesi

Örnek:

"panel": { "comp": "md-tabs", "öznitelikler": { "sınıf": "widget-sekmeleri" }, "çocuklar": [{ "comp": "md-tab", "öznitelikler": { "slot": "sekme" }, "çocuklar": [{ "comp": "slot", "öznitelikler": { "name": "WXM_JOURNEY_TAB" } }], "görünürlük": "WXM_JOURNEY" }, { "comp": "md-tab-panel", "öznitelikler": { "slot": "panel", "sınıf": "widget-pane" }, "çocuklar": [{ "comp": "agentx-wc-cloudcherry-widget", "özellikler": { "userModel": "$STORE.app.userModel", "spaceId": "", "metricsId": "", "teamId": "$STORE.agent.teamName", "ani": "$STORE.agentContact.taskSelected.ani", "isDarkMode": "$STORE.app.darkMode" }, "wrapper": { "title": "Müşteri Deneyimi Yolculuğu", "maximizeAreaName": "app-maximize-area" } }], { "comp": "md-tab", "attributes": { "slot": "sekme", "class": "widget-pane-tab" }, "children": { "comp": "md-tab", "attributes": { "slot": "sekme", "class": "widget-pane-tab" }, "children": [{ "comp": "yuva", "öznitelikler": { "ad": "İLETİŞİM_GEÇMİŞİ_SEKMESİ" } }] }, { "comp": "md-tab-panel", "öznitelikler": { "yuva": "panel", "sınıf": "widget-pane" }, "çocuklar": [{ "comp": "yuva", "öznitelikler": { "ad": "İLETİŞİM_GEÇMİŞİ" } }] }, { "comp": "md-tab", "öznitelikler": { "yuva": "sekme", "sınıf": "widget-pane-tab" }, "çocuklar": [{ "comp": "yuva", "öznitelikler": { "ad": "EKRAN_POP_SEKMESİ" } }], "görünürlük": "EKRAN_POP" }, { "comp": "md-tab-panel", "öznitelikler": { "slot": "panel", "sınıf": "widget-pane" }, "çocuklar": [{ "comp": "slot", "öznitelikler": { "name": "EKRAN_POP" } }], "görünürlük": "EKRAN_POP" } "görünürlük": "EKRAN_POP" }, },

Yerelleştirme

Masaüstü kullanıcı arayüzü 29 dilde yerelleştirmeyi destekliyor.

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ü kullanıcı arayüzü dili, tarayıcınızdaki dil tercihi ayarlarına dayanmaktadır. Örneğin, Firefox tarayıcısında tercih ettiğiniz dili Fransızca olarak seçtiğinizi düşünelim. Firefox tarayıcısında Masaüstünü başlattığınızda Masaüstü Kullanıcı Arayüzü Français (Fransızca) olarak görüntülenir. Ancak Masaüstü Düzeni'ne eklenen yatay başlık, gezinme çubuğu ve diğer bileşenler tarayıcınızdaki dil tercihi ayarlarına göre yerelleştirilmez.

Masaüstü Bileşenlerini Yerelleştir

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

  • Mevcut yerelleştirme anahtarlarını kullanın uygulama.json dosya. Yerelleştirme anahtarları ayarlanmazsa varsayılan dil İngilizce (ABD) kullanılır. app.json dosyasına bir yerelleştirme anahtarı eklemek için Cisco Destek'e bir servis isteği gönderebilirsiniz.

    Örnek: Yerelleştirme Anahtarı

    { "common": { "buttonTitle": "Zamanlayıcıyı Durdur" } }
  • Bir bileşeni yerelleştirmek için Masaüstü Düzeni JSON dosyasına aşağıdaki büyük/küçük harfe duyarlı özelliği girin:

    "textContent": "$I18N.<key>", 

    <anahtar> app.json dosyasındaki ilgili yerelleştirme anahtarına atıfta bulunur.

Örnek: Başlık Bileşenini Yerelleştir

"başlık": { "id": "başlık", "widget'lar": { "head1": { "comp": "md-button", "öznitelikler": { "slot": "menü-tetikleyicisi", "stil": "yükseklik: 64px" }, "çocuklar": [{ "comp": "span", "textContent": "$I18N.common.buttonTitle", } }, }, }

Örnek: Yardımcı Bilgi Bölmesindeki Yerelleştirme Sekmesi Bileşeni

"panel": { "comp": "md-tab", "öznitelikler": { "slot": "sekme" }, "çocuklar": [{ "comp": "span", "textContent": "$I18N.panelTwo.screenPopTitle" }] }