Cara meneruskan gaya khusus untuk widget komunikasi Gaya dan batasan yang didukung Cara melewati sistem override dan nama tampilan bot dan logo untuk widget komunikasi Pratinjau widget komunikasi Anda dengan properti khusus

Meneruskan properti kustom untuk mengganti default di widget komunikasi di Connect Customer

Untuk lebih menyesuaikan antarmuka pengguna obrolan Anda, Anda dapat mengganti properti default dengan meneruskan nilai Anda sendiri. Misalnya, Anda dapat mengatur lebar widget menjadi 400 piksel dan tinggi ke 700 piksel (berbeda dengan ukuran default 300 piksel dengan 540 piksel). Anda juga dapat menggunakan warna dan ukuran font pilihan Anda.

Untuk meneruskan gaya khusus, gunakan blok kode contoh berikut dan sematkan di widget Anda. Connect Customer mengambil gaya kustom secara otomatis. Semua bidang yang ditunjukkan dalam contoh berikut adalah opsional.


amazon_connect('customStyles', {
 global: {
     frameWidth: '400px',
     frameHeight: '700px',
     textColor: '#fe3251',
     fontSize: '20px',
     footerHeight: '120px',
     typeface: "'AmazonEmber-Light', serif",
     customTypefaceStylesheetUrl: "https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf",
     headerHeight: '120px',
 },
 header: {
     headerTextColor: '#541218',
     headerBackgroundColor: '#fe3',
 },
 transcript: {
     messageFontSize: '13px',
     messageTextColor: '#fe3',
     widgetBackgroundColor: '#964950',
     agentMessageTextColor: '#ef18d3',
     systemMessageTextColor: '#ef18d3',
     customerMessageTextColor: '#ef18d3',
     agentChatBubbleColor: '#111112',
     systemChatBubbleColor: '#111112',
     customerChatBubbleColor: '#0e80f2',
 },
 footer: {
     buttonFontSize: '20px',
     buttonTextColor: '#ef18d3',
     buttonBorderColor: '#964950',
     buttonBackgroundColor: '#964950',
     footerBackgroundColor: '#0e80f2',
     startCallButtonTextColor: '#541218',
     startChatButtonBorderColor: '#fe3',
     startCallButtonBackgroundColor: '#fe3',
 },
 logo: {
     logoMaxHeight: '61px',   
     logoMaxWidth: '99%',
 },
  composer: {
     fontSize: '20px',
     textColor: '#ffffff',
     backgroundColor: '#1a1a2e',
     borderColor: '#333355',
     focusBorderColor: '#6666aa',
     placeholderColor: '#888899',
 },
  fullscreenMode: true // Enables fullscreen mode on the widget when a mobile screen size is detected in a web browser.
})

Tabel berikut mencantumkan nama gaya kustom yang didukung dan batasan nilai yang disarankan. Beberapa gaya ada di tingkat global dan komponen. Misalnya, fontSize gaya ada secara global dan dalam komponen transkrip. Gaya tingkat komponen memiliki prioritas yang lebih tinggi dan akan dihormati pada widget obrolan.

Nama gaya kustom	Deskripsi	Kendala yang disarankan
`global.frameWidth`	Lebar seluruh bingkai widget	Minimum: 300 piksel Maksimum: Lebar jendela Disarankan untuk menyesuaikan berdasarkan ukuran jendela
`global.frameHeight`	tinggi seluruh bingkai widget	Minimum: 480 piksel Maksimum: Tinggi jendela Disarankan untuk menyesuaikan berdasarkan ukuran jendela
`global.textColor`	Warna untuk semua teks	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`global.fontSize`	Ukuran font untuk semua teks	Disarankan 12 piksel hingga 20 piksel untuk kasus penggunaan yang berbeda
`global.footerHeight`	Ketinggian footer widget	Minimum: 50 piksel Maksimum: Tinggi bingkai Disarankan untuk menyesuaikan berdasarkan ukuran bingkai
`global.typeface`	Jenis huruf yang digunakan dalam widget.	Jenis huruf apa pun dari daftar ini: Arial, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Book man, Tacoma, Trebuches MS, Arial Black, Impact, Comic Sans MS. Anda juga dapat menambahkan kustom typeface/font -family tetapi Anda perlu meng-host file jenis huruf dengan akses Baca publik. Misalnya, Anda dapat melihat dokumentasi untuk menggunakan keluarga font Amazon Ember di pust aka pengembang Amazon.
`global.customTypefaceStylesheetUrl`	Lokasi di mana file jenis huruf kustom dihosting dengan akses Baca publik.	Tautkan ke lokasi HTTP publik tempat file jenis huruf dihosting. Misalnya, lokasi CDN tipe AmazonEmber Light adalah `https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf`
`header.headerTextColor`	Warna teks untuk pesan header	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`header.headerBackgroundColor`	Warna teks untuk latar belakang header	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`global.headerHeight`	Ketinggian header widget	Disarankan untuk menyesuaikan berdasarkan penggunaan judul atau logo gambar atau keduanya.
`transcript.messageFontSize`	Ukuran font untuk semua teks	Disarankan 12 piksel hingga 20 piksel untuk kasus penggunaan yang berbeda
`transcript.messageTextColor`	Warna teks untuk pesan transkrip	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`transcript.widgetBackgroundColor`	Warna teks untuk latar belakang transkrip	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`transcript.customerMessageTextColor`	Warna teks untuk pesan pelanggan	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`transcript.agentMessageTextColor`	Warna teks untuk pesan agen	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`transcript.systemMessageTextColor`	Warna teks untuk pesan sistem	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`transcript.agentChatBubbleColor`	Warna latar belakang untuk gelembung pesan agen	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`transcript.customerChatBubbleColor`	Warna latar belakang untuk gelembung pesan pelanggan	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`transcript.systemChatBubbleColor`	Warna latar belakang untuk gelembung pesan sistem	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`footer.buttonFontSize`	Ukuran font untuk teks tombol aksi	Disarankan untuk menyesuaikan berdasarkan ketinggian footer
`footer.buttonTextColor`	Warna untuk teks tombol aksi	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`footer.buttonBorderColor`	Warna untuk batas tombol aksi	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`footer.buttonBackgroundColor`	Warna untuk latar belakang tombol aksi	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`footer.BackgroundColor`	Warna untuk latar belakang footer	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`footer.startCallButtonTextColor`	Warna untuk teks tombol mulai panggilan	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`footer.startCallButtonBorderColor`	Warna untuk batas tombol mulai panggilan	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`footer.startCallButtonBackgroundColor`	Warna untuk latar belakang tombol mulai panggilan	Setiap nilai warna legal CSS. Untuk informasi selengkapnya, lihat Nilai Warna Legal CSS.
`logo.logoMaxHeight`	Tinggi maksimum logo	Minimum: 0 piksel Maksimum: Tinggi header Disarankan untuk menyesuaikan berdasarkan ukuran gambar dan tinggi bingkai
`logo.logoMaxWidth`	Lebar maksimum logo	Minimum: 0 piksel Maksimum: Lebar header Disarankan untuk menyesuaikan berdasarkan ukuran gambar dan lebar bingkai
`composer.fontSize`	Ukuran font untuk teks komposer	Disarankan 12 piksel hingga 20 piksel untuk kasus penggunaan yang berbeda
`composer.textColor`	Warna teks dalam komposer.	Setiap nilai warna legal CSS. Untuk informasi selengkapnya tentang nilai warna CSS yang valid, lihat Nilai Warna Legal CSS di situs web W3Schools.
`composer.backgroundColor`	Warna latar belakang untuk komposer.	Setiap nilai warna legal CSS.
`composer.borderColor`	Warna perbatasan untuk komposer.	Setiap nilai warna legal CSS.
`composer.focusBorderColor`	Warna perbatasan untuk komposer saat memiliki fokus keyboard.	Setiap nilai warna legal CSS. Gunakan warna yang berbeda secara visual `composer.borderColor` sehingga indikator fokus tetap terlihat.
`composer.placeholderColor`	Warna teks placeholder ditampilkan di komposer saat bidang kosong.	Setiap nilai warna legal CSS.
`fullscreenMode`	Mengaktifkan mode layar penuh pada widget saat ukuran layar ponsel terdeteksi di browser web.	Jenis: boolean

Berikut ini adalah elemen yang membentuk widget komunikasi.

Cara melewati sistem override dan nama tampilan bot dan logo untuk widget komunikasi

Untuk mengganti nama System/Bot tampilan dan konfigurasi logo yang ditetapkan di situs web Connect Customer admin, sematkan blok kode berikut ke dalam cuplikan kode widget Anda. Semua bidang yang ditunjukkan dalam contoh berikut adalah opsional.


amazon_connect('customDisplayNames', {
 header: {
     headerMessage: "Welcome!",
     logoUrl: "https://example.com/abc.png",
     logoAltText: "Amazon Logo Banner"
 },
 transcript: {
     systemMessageDisplayName: "Amazon System",
     botMessageDisplayName: "Alexa"
 },
 footer: {
     textInputPlaceholder: "Type Here!",     
      endChatButtonText: "End Session",      
      closeChatButtonText: "Close Chat",      
      startCallButtonText: "Start Call"
 },
})

Properti dan batasan yang didukung

Nama gaya kustom	Deskripsi	Kendala yang disarankan
`header.headerMessage`	Teks untuk pesan header	Panjang minimum: 1 Panjang maksimum: 11 karakter Disarankan untuk menyesuaikan berdasarkan lebar header
`header.logoUrl`	URL menunjuk ke gambar logo	Panjang maksimum: 2048 karakter Harus berupa URL yang valid yang menunjuk ke file.png, .jpg atau.svg
`header.logoAltText`	Teks untuk mengganti `alt` atribut untuk banner logo	Panjang maksimum: 2048 karakter
`transcript.systemMessageDisplayName`	Teks untuk mengganti nama `SYSTEM_MESSAGE` tampilan	Panjang minimum: 1 Panjang maksimum: 26 karakter
`transcript.botMessageDisplayName`	Teks untuk mengganti nama tampilan BOT	Panjang minimum: 1 Panjang maksimum: 26 karakter
`footer.textInputPlaceholder`	Teks untuk mengganti placeholder dalam input teks	Panjang minimum: 1 Panjang maksimum: 256 karakter
`footer.endChatButtonText`	Teks untuk mengganti teks tombol akhir obrolan	Panjang minimum: 1 Panjang maksimum: 256 karakter Disarankan untuk menyesuaikan berdasarkan lebar tombol
`footer.closeChatButtonText`	Teks untuk mengganti teks tombol chat tutup	Panjang minimum: 1 Panjang maksimum: 256 karakter Disarankan untuk menyesuaikan berdasarkan lebar tombol
`footer.startCallButtonText`	Teks untuk mengganti teks tombol mulai panggilan	Panjang minimum: 1 Panjang maksimum: 256 karakter Disarankan untuk menyesuaikan berdasarkan lebar tombol

Pastikan untuk melihat pratinjau widget komunikasi Anda dengan properti khusus sebelum memasukkannya ke dalam produksi. Nilai kustom dapat merusak antarmuka pengguna widget komunikasi jika tidak diatur dengan benar. Kami menyarankan untuk mengujinya di browser dan perangkat yang berbeda sebelum merilisnya ke pelanggan Anda.

Berikut ini adalah beberapa contoh hal-hal yang mungkin rusak ketika nilai yang tidak tepat digunakan dan perbaikan yang disarankan.

Masalah: Jendela widget mengambil terlalu banyak layar.

Perbaiki: Gunakan yang lebih kecil frameWidth danframeHeight.
Masalah: Ukuran font terlalu kecil atau terlalu besar.

Perbaiki: Sesuaikan ukuran font.
Masalah: Ada area kosong di bawah obrolan akhir (footer).

Perbaiki: Gunakan yang lebih kecil frameHeight atau lebih besarfooterHeight.
Masalah: Tombol akhir obrolan terlalu kecil atau terlalu besar.

Perbaiki: SesuaikanbuttonFontSize.
Masalah: Tombol akhir obrolan berada di luar area footer.

Perbaiki: Gunakan yang lebih besar footerHeight atau lebih kecilbuttonFontSize.

Awas Javascript dinonaktifkan atau tidak tersedia di browser Anda.

Untuk menggunakan Dokumentasi AWS, Javascript harus diaktifkan. Lihat halaman Bantuan browser Anda untuk petunjuk.

Konvensi Dokumen

Putuskan sambungan obrolan terprogram

Targetkan tombol widget dan bingkai Anda dengan CSS/JavaScript