Meneruskan properti kustom untuk mengganti default di widget komunikasi di Amazon Connect - Amazon Connect
Cara meneruskan gaya kustom untuk widget komunikasiGaya dan kendala yang didukungCara melewati sistem override dan nama tampilan bot dan logo untuk widget komunikasiPratinjau widget komunikasi Anda dengan properti khusus

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 di Amazon Connect

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: "'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', 
     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

Setiap nilai warna hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

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.

Anda juga dapat menambahkan jenis huruf kustom/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 perpustakaan pengembang Amazon.

global.customTypefaceStylesheetUrl

Lokasi tempat file jenis huruf khusus di-host dengan akses Baca publik.

Tautan ke lokasi HTTP publik tempat file jenis huruf di-host. Misalnya, lokasi CDN jenis huruf AmazonEmber ringan 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 hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

header.headerBbackgroundColor

Warna teks untuk latar belakang header

Setiap nilai warna hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

global.headerHeight

Tinggi header widget

Disarankan untuk menyesuaikan berdasarkan menggunakan 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 hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

transcript.widgetBackgroundColor

Warna teks untuk latar belakang transkrip

Setiap nilai warna hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

transcript.agentChatBubbleColor

Warna teks untuk gelembung pesan agen

Setiap nilai warna hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

transcript.customerChatBubbleColor

Warna teks untuk gelembung pesan pelanggan

Setiap nilai warna hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

footer.buttonFontSize

Ukuran font untuk teks tombol tindakan

Disarankan untuk menyesuaikan berdasarkan ketinggian footer

footer.buttonTextColor

Warna untuk teks tombol tindakan

Setiap nilai warna hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

footer.buttonBorderColor

Warna untuk batas tombol aksi

Setiap nilai warna hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

backgrounder

Warna untuk latar belakang tombol aksi

Setiap nilai warna hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

footer.BackgroundColor

Warna untuk latar belakang footer

Setiap nilai warna hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

footer.startCallButtonBackgroundColor

Warna untuk teks tombol mulai panggilan

Setiap nilai warna hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

footer.startCallButtonBorderColor

Warna untuk batas tombol panggilan mulai

Setiap nilai warna hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

backgrounder

Warna untuk latar belakang tombol panggilan mulai

Setiap nilai warna hukum CSS. Untuk informasi selengkapnya, lihat Nilai Warna Hukum CSS.

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.

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!",
     logoUrl: "https://example.com/abc.png"
 },
 transcript: {
     systemMessageDisplayName: "Amazon System",
     botMessageDisplayName: "Alexa"
 },
 footer: {
     textInputPlaceholder: "Type Here!",     
      endChatButtonText: "End Session",      
      closeChatButtonText: "Close Chat",      
      startCallButtonText: "Start Call"
 },
})

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.logoUrl

 URL menunjuk ke gambar logo

Panjang maksimal: 2048 karakter

Harus berupa URL yang valid yang 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 tampilan BOT

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.startCallButtonText

 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.