Tambahkan antarmuka pengguna obrolan ke situs web Anda yang dihosting oleh Connect Customer

1. Masuk ke situs web Connect Customer admin di https://instance name.my.connect.aws/. Pilih Sesuaikan widget komunikasi.

   

2. Pada halaman widget Komunikasi, pilih Tambahkan widget komunikasi untuk mulai menyesuaikan pengalaman widget komunikasi baru. Untuk mengedit, menghapus, atau menduplikasi widget komunikasi yang ada, pilih dari opsi di bawah kolom Tindakan, seperti yang ditunjukkan pada gambar berikut.

   

3. Masukkan Nama dan Deskripsi untuk widget komunikasi.

   catatan

   Nama harus unik untuk setiap widget komunikasi yang dibuat dalam instance Connect Customer.

4. Di bagian Opsi komunikasi, pilih cara pelanggan Anda dapat berinteraksi dengan widget Anda, lalu pilih S impan dan lanjutkan.

   catatan

   Anda hanya dapat mengaktifkan tugas atau formulir pra-kontak melalui email jika obrolan dan suara tidak diaktifkan.

   Gambar berikut menunjukkan opsi untuk mengizinkan obrolan, penerimaan pesan, dan membuat formulir pra-obrolan untuk pelanggan. Untuk mengaktifkan formulir pra obrolan, Anda harus terlebih dahulu membuat tampilan dengan tombol aksi sambungkan dan memilih StartChatContact tindakan. Untuk informasi selengkapnya tentang formulir pra-obrolan dan pra-kontak, lihat. Tambahkan widget Connect Customer ke situs web Anda

   

5. Pada halaman Buat widget komunikasi, pilih gaya tombol widget, dan tampilkan nama dan gaya.

   Saat Anda memilih opsi ini, pratinjau widget diperbarui secara otomatis sehingga Anda dapat melihat seperti apa pengalaman bagi pelanggan Anda.

   

Gaya tombol

1. Pilih warna untuk latar belakang tombol dengan memasukkan nilai hex (kode warna HTML).

2. Pilih Putih atau Hit am untuk warna ikon. Warna ikon tidak dapat disesuaikan.

Header widget

1. Berikan nilai untuk pesan header dan warna, dan warna latar belakang widget.

2. URL Logo: Masukkan URL ke spanduk logo Anda dari bucket Amazon S3 atau sumber online lainnya.

   catatan

   Pratinjau widget komunikasi di halaman kustomisasi tidak akan menampilkan logo jika berasal dari sumber online selain bucket Amazon S3. Namun, logo akan ditampilkan ketika widget komunikasi yang disesuaikan diimplementasikan ke halaman Anda.

   Spanduk harus dalam format.svg, .jpg atau.png. Gambar bisa 280px (lebar) dengan 60px (tinggi). Setiap gambar yang lebih besar dari dimensi tersebut akan diskalakan agar sesuai dengan ruang komponen logo 280x60.

   1. Untuk petunjuk tentang cara mengunggah file seperti spanduk logo Anda ke S3, lihat Meng unggah objek di Panduan Pengguna Layanan Penyimpanan Sederhana Amazon.

   2. Pastikan izin gambar diatur dengan benar sehingga widget komunikasi memiliki izin untuk mengakses gambar. Untuk informasi tentang cara membuat objek S3 dapat diakses publik, lihat Langkah 2: Menambahkan kebijakan bucket di topik Menyet el izin untuk akses situs web.

Tampilan obrolan

1. Jenis huruf: Gunakan dropdown untuk memilih font untuk teks di widget komunikasi.

2. • Nama Tampilan Pesan Sistem: Ketik nama tampilan baru untuk mengganti default. Defaultnya adalah SYSTEM_MESSAGE.

   • Nama Tampilan Pesan Bot: Ketik nama tampilan baru untuk mengganti default. Defaultnya adalah BOT.

   • Placeholder Input Teks: Ketik teks placeholder baru menggantikan default. Defaultnya adalah K etik pesan.

   • Teks Tombol Akhiri Obrolan: Ketik teks baru untuk menggantikan default. Defaultnya adalah Akhiri obrolan.

3. Warna gelembung obrolan agen: Pilih warna untuk gelembung pesan agen dengan memasukkan nilai hex (kode warna HTML).

4. Warna gelembung obrolan pelanggan: Pilih warna untuk gelembung pesan pelanggan dengan memasukkan nilai hex (kode warna HTML).

5. Jangan pilih Save and continue (Simpan dan lanjutkan).

1. Masukkan domain situs web tempat Anda ingin menempatkan widget komunikasi. Obrolan dimuat hanya di situs web yang Anda pilih pada langkah ini.

   Pilih Tambahkan domain untuk menambahkan hingga 50 domain.

   

   Perilaku daftar izin domain:

   • Subdomain secara otomatis disertakan. Misalnya, jika Anda mengizinkan example.com, semua subdomainnya (seperti sub.example.com) juga diizinkan.

   • Protokol http://atau https://harus sama persis dengan konfigurasi Anda. Tentukan protokol yang tepat saat menyiapkan domain yang diizinkan.

   • Semua jalur URL diizinkan secara otomatis. Misalnya, jika example.com diizinkan, semua halaman di bawahnya (seperti contoh. com/cart atau contoh. com/checkout) dapat diakses. Anda tidak dapat mengizinkan atau memblokir subdirektori tertentu.

   penting

   • Double-check bahwa URL situs web Anda valid dan tidak mengandung kesalahan. Sertakan URL lengkap dimulai dengan https://.

   • Sebaiknya gunakan https://untuk situs web dan aplikasi produksi Anda.

2. Di bawah Tam bah keamanan untuk widget komunikasi Anda, sebaiknya pilih Ya, dan bekerja sama dengan administrator situs web Anda untuk mengatur server web Anda untuk mengeluarkan Token Web JSON (JWT) untuk permintaan obrolan baru. Ini memberi Anda lebih banyak kontrol saat memulai obrolan baru, termasuk kemampuan untuk memverifikasi bahwa permintaan obrolan yang dikirim ke Connect Customer berasal dari pengguna yang diautentikasi.

   

   Memilih Ya menghasilkan hal berikut:

   • Connect Customer menyediakan kunci keamanan 44 karakter di halaman berikutnya yang dapat Anda gunakan untuk membuat Token Web JSON (JWT).

   • Connect Customer menambahkan fungsi callback dalam skrip embed widget komunikasi yang memeriksa Token Web JSON (JWT) saat obrolan dimulai.

     Anda harus mengimplementasikan fungsi callback dalam cuplikan tertanam, seperti yang ditunjukkan pada contoh berikut.

     amazon_connect('authenticate', function(callback) {
       window.fetch('/token').then(res => {
         res.json().then(data => {
           callback(data.data);
         });
       });
     });

   Jika Anda memilih opsi ini, pada langkah berikutnya Anda akan mendapatkan kunci keamanan untuk semua permintaan obrolan yang dimulai di situs web Anda. Minta administrator situs web Anda untuk mengatur server web Anda untuk mengeluarkan JWT menggunakan kunci keamanan ini.

3. Pilih Simpan.