Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
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 |
---|---|---|
|
Lebar seluruh bingkai widget |
Minimal: 300 piksel Maksimum: Lebar jendela Disarankan untuk menyesuaikan berdasarkan ukuran jendela |
|
tinggi seluruh bingkai widget |
Minimal: 480 piksel Maksimum: Tinggi jendela Disarankan untuk menyesuaikan berdasarkan ukuran jendela |
|
Warna untuk semua teks |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Ukuran font untuk semua teks |
Disarankan 12 piksel hingga 20 piksel untuk kasus penggunaan yang berbeda |
|
Ketinggian footer widget |
Minimal: 50 piksel Maksimum: Tinggi bingkai Disarankan untuk menyesuaikan berdasarkan ukuran bingkai |
|
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. |
|
Warna teks untuk pesan header |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Warna teks untuk latar belakang header |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Ukuran font untuk semua teks |
Disarankan 12 piksel hingga 20 piksel untuk kasus penggunaan yang berbeda |
|
Warna teks untuk pesan transkrip |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Warna teks untuk latar belakang transkrip |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Warna teks untuk gelembung pesan agen |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Warna teks untuk gelembung pesan pelanggan |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Ukuran font untuk teks tombol tindakan |
Disarankan untuk menyesuaikan berdasarkan ketinggian footer |
|
Warna untuk teks tombol tindakan |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Warna untuk batas tombol aksi |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Warna untuk latar belakang tombol aksi |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Warna untuk latar belakang footer |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Warna untuk teks tombol mulai panggilan |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Warna untuk batas tombol panggilan mulai |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Warna untuk latar belakang tombol panggilan mulai |
Nilai warna CSS hukum apa pun. Untuk informasi selengkapnya, lihat Nilai Warna CSS Legal |
|
Tinggi maksimum logo |
Minimal: 0 piksel Maksimum: Tinggi header Disarankan untuk menyesuaikan berdasarkan ukuran gambar dan tinggi bingkai |
|
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.
![Elemen yang membentuk widget komunikasi.](images/chatwidget-elements.png)
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 |
---|---|---|
|
Teks untuk pesan header | Panjang minimum: 1 Panjang maksimum: 11 karakter Disarankan untuk menyesuaikan berdasarkan lebar header |
|
URLmenunjuk ke gambar logo |
Panjang maksimal: 2048 karakter Harus valid URL menunjuk ke file.png, .jpg atau .svg |
|
Teks untuk mengganti nama SYSTEM_MESSAGE tampilan |
Panjang minimum: 1 Panjang maksimal: 26 karakter |
|
Teks untuk mengganti nama BOT tampilan | Panjang minimum: 1 Panjang maksimal: 26 karakter |
|
Teks untuk mengganti placeholder dalam input teks | Panjang minimum: 1 Panjang maksimal: 22 karakter |
|
Teks untuk mengganti teks tombol obrolan akhir | Panjang minimum: 1 Panjang maksimum: 11 karakter Disarankan untuk menyesuaikan berdasarkan lebar tombol |
|
Teks untuk mengganti teks tombol obrolan tutup | Panjang minimum: 1 Panjang maksimum: 11 karakter Disarankan untuk menyesuaikan berdasarkan lebar tombol |
|
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: Sesuaikan
buttonFontSize
. -
Masalah: Tombol akhir obrolan berada di luar area footer.
Perbaiki: Gunakan yang lebih besar
footerHeight
atau lebih kecilbuttonFontSize
.