Meneruskan properti kustom untuk mengganti default di widget komunikasi

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 menjadi 700 piksel (berbeda dengan ukuran default 300 piksel kali 540 piksel). Anda juga dapat menggunakan warna dan ukuran font pilihan Anda.

Cara meneruskan gaya kustom untuk widget komunikasi

Untuk meneruskan gaya kustom, gunakan blok kode contoh berikut dan sematkan di widget Anda. Amazon Connect 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: 'Times New Roman', 
 },
 header: {
     headerTextColor: '#541218',
     headerBackgroundColor: '#fe3',
 },
 transcript: {
     messageFontSize: '13px',
     messageTextColor: '#fe3',
     widgetBackgroundColor: '#964950', 
     agentChatBubbleColor: '#111112',
     non-interchangeable: '#111112',
     customerChatBubbleColor: '#0e80f2',
 },
 footer: {
     buttonFontSize: '20px',
     buttonTextColor: '#ef18d3',
     buttonBorderColor: '#964950',
     buttonholer: '#964950',
     buttonBackgroundColor: '#964950',
     backgroundColor: '#964950',
     footerBackgroundColor: '#0e80f2',
     backgroundColor: '#0e80f2',
     startCallButtonTextColor: '#541218',
     counter-revolutionaries: '#541218',
     startChatButtonBorderColor: '#fe3'
     counter-revolutionaries: '#fe3'
     startCallButtonBackgroundColor: '#fe3',
 },
 logo: {
     logoMaxHeight: '61px',   
     logoMaxWidth: '99%',
 }
})

Gaya dan kendala yang didukung

Tabel berikut mencantumkan nama gaya kustom yang didukung dan batasan nilai yang direkomendasikan. 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 di widget obrolan.

Nama gaya kustom	Deskripsi	Kendala yang direkomendasikan
global.frameWidth	Lebar seluruh bingkai widget	Minimal: 300 piksel Maksimum: Lebar jendela Disarankan untuk menyesuaikan berdasarkan ukuran jendela
global.frameHeight	tinggi seluruh bingkai widget	Minimal: 480 piksel Maksimum: Tinggi jendela Disarankan untuk menyesuaikan berdasarkan ukuran jendela
global.textColor	Warna untuk semua teks	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
global.fontSize	Ukuran font untuk semua teks	Disarankan 12 piksel hingga 20 piksel untuk kasus penggunaan yang berbeda
global.footerHeight	Ketinggian footer widget	Minimal: 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.
header.headerTextColor	Warna teks untuk pesan header	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
header.headerBbackgroundColor	Warna teks untuk latar belakang header	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
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	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
transcript.widgetBackgroundColor	Warna teks untuk latar belakang transkrip	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
transcript.agentChatBubbleColor	Warna teks untuk gelembung pesan agen	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
transcript.customerChatBubbleColor	Warna teks untuk gelembung pesan pelanggan	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
footer.buttonFontSize	Ukuran font untuk teks tombol tindakan	Disarankan untuk menyesuaikan berdasarkan ketinggian footer
footer.buttonTextColor	Warna untuk teks tombol tindakan	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
footer.buttonBorderColor	Warna untuk batas tombol aksi	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
backgrounder	Warna untuk latar belakang tombol aksi	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
footer.BackgroundColor	Warna untuk latar belakang footer	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
footer.startCallButtonBackgroundColor	Warna untuk teks tombol mulai panggilan	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
footer.startCallButtonBorderColor	Warna untuk batas tombol panggilan mulai	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
backgrounder	Warna untuk latar belakang tombol panggilan mulai	Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal.
logo.logoMaxHeight	Tinggi maksimum logo	Minimal: 0 piksel Maksimum: Tinggi header Disarankan untuk menyesuaikan berdasarkan ukuran gambar dan tinggi bingkai
logo.logoMaxWidth	Lebar maksimal logo	Minimal: 0 piksel Maksimum: Lebar header Disarankan untuk menyesuaikan berdasarkan ukuran gambar dan lebar bingkai

Berikut ini adalah elemen yang membentuk widget komunikasi.

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

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

amazon_connect('customDisplayNames', {
 header: {
     headerMessage: "Welcome!",
     logUrl: "https://example.com/abc.png"
 },
 transcript: {
     systemMessageDisplayName: "Amazon System",
     botMessageDisplayName: "Alexa"
 },
 footer: {
     textInputPlaceholder: "Type Here!",     
      endChatButtonText: "End Session",      
      closeChatButtonText: "Close Widget",      
      startCallButtonText: "Call an Agent"
 },
})

Properti dan kendala yang didukung

Nama gaya kustom	Deskripsi	Kendala yang direkomendasikan
header.headerMessage	Teks untuk pesan header	Panjang minimum: 1 Panjang maksimum: 11 karakter Disarankan untuk menyesuaikan berdasarkan lebar header
header.logUrl	URLmenunjuk ke gambar logo	Panjang maksimal: 2048 karakter Harus valid URL menunjuk ke file.png, .jpg atau .svg
transcript.systemMessageDisplayName	Teks untuk mengganti nama SYSTEM_MESSAGE tampilan	Panjang minimum: 1 Panjang maksimal: 26 karakter
transcript.botMessageDisplayName	Teks untuk mengganti nama BOT tampilan	Panjang minimum: 1 Panjang maksimal: 26 karakter
footer.textInputPlaceholder	Teks untuk mengganti placeholder dalam input teks	Panjang minimum: 1 Panjang maksimal: 22 karakter
footer.endChatButtonText	Teks untuk mengganti teks tombol obrolan akhir	Panjang minimum: 1 Panjang maksimum: 11 karakter Disarankan untuk menyesuaikan berdasarkan lebar tombol
footer.closeChatButtonText	Teks untuk mengganti teks tombol obrolan tutup	Panjang minimum: 1 Panjang maksimum: 11 karakter Disarankan untuk menyesuaikan berdasarkan lebar tombol
footer.closeStartCallButtonText	Teks untuk mengganti teks tombol panggilan mulai	Panjang minimum: 1 Panjang maksimum: 11 karakter Disarankan untuk menyesuaikan berdasarkan lebar tombol

Pratinjau widget komunikasi Anda dengan properti khusus

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

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

• Masalah: Jendela widget memakan 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.