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

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

   

2. Pada halaman widget Komunikasi, pilih Tambah 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 Amazon Connect.

4. Di bagian Opsi komunikasi, pilih bagaimana pelanggan Anda dapat berinteraksi dengan widget Anda, lalu pilih Simpan dan lanjutkan. Gambar berikut menunjukkan opsi untuk mengizinkan obrolan dan tanda terima pesan bagi pelanggan.

   

5. Pada halaman widget Buat 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 itu bagi pelanggan Anda.

   

Gaya tombol

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

2. Pilih Putih atau Hitam 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). Gambar apa pun 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 ke S3, lihat Mengunggah objek di Panduan Pengguna Layanan Penyimpanan Sederhana Amazon.

   2. Pastikan bahwa 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 Menyetel 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 Ketik pesan.

   • Akhiri Teks Tombol 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 hanya dimuat di situs web yang Anda pilih dalam langkah ini.

   Pilih Tambahkan domain untuk menambahkan hingga 50 domain.

   

   penting

   • Periksa kembali apakah situs web URLs Anda valid dan tidak mengandung kesalahan. Sertakan URL lengkap yang dimulai dengan https://.

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

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

   

   Memilih Ya menghasilkan hal berikut:

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

   • Amazon Connect menambahkan fungsi callback dalam skrip embed widget komunikasi yang memeriksa JSON Web Token (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 agar mengeluarkan JWTs menggunakan kunci keamanan ini.

3. Pilih Simpan.