Tambahkan widget Amazon Connect ke situs web Anda untuk menerima kontak obrolan, tugas, email, dan panggilan web

Topik di bagian ini menjelaskan cara membuat dan menyesuaikan widget komunikasi untuk situs web Anda. Anda akan membuat formulir kontak yang menentukan perilaku untuk kontak yang dibuat melalui widget Anda, dan kemudian menyesuaikan tampilan dan fungsionalitas widget.

Langkah 1: Buat formulir kontak untuk widget Anda

Pada langkah ini, Anda membuat dan menyesuaikan Tampilan yang menentukan perilaku kontak yang dibuat melalui widget Anda.

1. Masuk ke situs web Amazon Connect admin dihttps://instance name.my.connect.aws/. Di bawah tab Routing, pilih Flows.

2. Di kiri atas, klik Tampilan.

3. Pilih Buat Tampilan.

4. Di sini Anda dapat mengonfigurasi formulir kontak untuk pelanggan Anda menggunakan pembuat tanpa kode. Beberapa tips penting:

   • Menggunakan komponen Formulir akan memungkinkan Anda untuk menautkan Input Formulir ke kontak Anda saat pembuatan. Penautan formulir akan memungkinkan Anda untuk mengambil masukan langsung dari siapa pun yang berinteraksi dengan widget Anda dan menggunakan informasi yang mereka sertakan dalam formulir selama pembuatan kontak.

   • Komponen Connect Action adalah elemen terpenting dalam formulir untuk membuat kontak. Komponen ini harus digunakan tanpa komponen jenis tombol lainnya dalam formulir.

   • Tepat satu komponen Connect Action harus hadir untuk menggunakan widget View with a Contact Form.

   • Ada tiga opsi yang didukung ConnectActionType untuk komponen Connect Action:

     • StartEmailContact

     • StartTaskContact

     • StartChatContact

     Baik Email dan Tugas dapat digunakan dalam formulir kontak. Untuk membuat formulir pra-obrolan untuk kontak obrolan, lihatTambahkan antarmuka pengguna obrolan ke situs web Anda yang dihosting oleh Amazon Connect.

   • Ada banyak opsi gaya untuk komponen View, memungkinkan Anda menyesuaikan formulir agar sesuai dengan lingkungan Anda.

5. Setelah Anda menambahkan tombol Connect Action ke formulir Anda, Anda dapat menetapkan nilai untuk kontak yang dibuat oleh formulir dengan menautkannya ke opsi di tombol Connect Action. Komponen yang ingin Anda tautkan harus dalam Formulir yang sama di View sebagai tombol Connect Action.

   

   Komponen berikut didukung untuk penautan formulir:

   • Formulir Masukan

   • Dropdown (matikan multi-pilih)

   • Pemetik Tanggal

   • Area Teks

   • Pemilih Waktu

6. Setelah Tampilan Anda siap, pilih Publikasikan.

Langkah 2: Sesuaikan widget komunikasi Anda

Pada langkah ini, Anda menyesuaikan pengalaman widget komunikasi untuk pelanggan Anda.

1. Masuk ke situs web admin Amazon Connect dihttps://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.

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 Tambahkan Formulir Kontak.

5. Pilih Tampilan yang Anda konfigurasikan pada langkah sebelumnya. Jika komponen Connect Action di View tidak memiliki set alur kontak, Anda harus menyetelnya di sini.

6. Klik Simpan dan Lanjutkan.

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.

catatan

Pratinjau tidak akan menampilkan formulir kontak Lihat yang telah Anda buat. Hanya styling header yang akan ditampilkan.

Jenis tampilan

Anda dapat memilih antara dua jenis tampilan untuk widget Formulir Kontak:

• Tombol aksi mengambang memungkinkan Anda untuk menyematkan widget Anda sebagai tombol yang dapat berinteraksi di sudut kanan bawah halaman web

• Embedded inline memungkinkan Anda untuk menanamkan widget Anda langsung di halaman web tanpa perlu menekan tombol untuk memuatnya

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.

penting

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.

• Untuk petunjuk tentang cara mengunggah file seperti spanduk logo ke S3, lihat Mengunggah objek di Panduan Pengguna Layanan Penyimpanan Sederhana Amazon.

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

Langkah 3: Tentukan domain situs web tempat Anda berharap untuk menampilkan widget komunikasi

1. Masukkan domain situs web tempat Anda ingin menempatkan widget komunikasi. Widget hanya dimuat di situs web yang Anda pilih dalam 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 diperbolehkan.

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

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

   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 kontak baru. Ini memberi Anda lebih banyak kontrol saat memulai kontak baru, termasuk kemampuan untuk memverifikasi bahwa permintaan 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 kontak 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 kontak 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.

Langkah 4: Konfirmasikan dan salin kode widget komunikasi dan kunci keamanan

Pada langkah ini, Anda mengonfirmasi pilihan Anda dan menyalin kode untuk widget komunikasi dan menyematkannya di situs web Anda. Jika Anda memilih untuk menggunakan JWTs pada Langkah 3, Anda juga dapat menyalin kunci rahasia untuk membuatnya.

Kunci keamanan

Gunakan kunci keamanan 44 karakter ini untuk menghasilkan token web JSON dari server web Anda. Anda juga dapat memperbarui, atau memutar, tombol jika Anda perlu mengubahnya. Saat Anda melakukan ini, Amazon Connect memberi Anda kunci baru dan mempertahankan kunci sebelumnya hingga Anda memiliki kesempatan untuk menggantinya. Setelah kunci baru digunakan, Anda dapat kembali ke Amazon Connect dan menghapus kunci sebelumnya.

Ketika pelanggan Anda berinteraksi dengan widget komunikasi di situs web Anda, widget meminta server web Anda untuk JWT. Ketika JWT ini disediakan, widget kemudian akan memasukkannya sebagai bagian dari permintaan kontak pelanggan akhir ke Amazon Connect. Amazon Connect kemudian menggunakan kunci rahasia untuk mendekripsi token. Jika berhasil, ini mengonfirmasi bahwa JWT dikeluarkan oleh server web Anda dan Amazon Connect merutekan permintaan kontak ke agen pusat kontak Anda.

Spesifikasi Token Web JSON

• Algoritma: HS256

• Klaim:

  • sub: widgetId

    Ganti widgetId dengan WidgetID Anda sendiri. Untuk menemukan WidgetID Anda, lihat contoh di. Skrip widget komunikasi

  • iat: *Dikeluarkan Pada Waktu.

  • exp: * Kedaluwarsa (maksimum 10 menit).

  • SegmentAttributes (opsional): Satu set pasangan nilai kunci yang ditentukan sistem yang disimpan pada segmen kontak individu menggunakan peta atribut. Untuk informasi selengkapnya, periksa SegmentAttributes di StartChatContactAPI.

  • atribut (opsional): Objek dengan pasangan string-to-string kunci-nilai. Atribut kontak harus mengikuti batasan yang ditetapkan oleh StartChatContactAPI.

  • relatedContactId (opsional): String dengan id kontak yang valid. Batasan relatedContactId harus mengikuti yang ditetapkan oleh StartChatContactAPI.

  • CustomerID (opsional): Ini dapat berupa ID Profil Pelanggan Amazon Connect atau pengenal khusus dari sistem eksternal, seperti CRM.

  * Untuk informasi tentang format tanggal, lihat dokumen Internet Engineering Task Force (IETF) berikut: JSON Web Token (JWT), halaman 5.

Cuplikan kode berikut menunjukkan contoh cara menghasilkan JWT dengan Python:

import jwt 
import datetime 
CONNECT_SECRET = "your-securely-stored-jwt-secret" 
WIDGET_ID = "widget-id" 
JWT_EXP_DELTA_SECONDS = 500

payload = { 
'sub': WIDGET_ID, 
'iat': datetime.datetime.utcnow(), 
'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS), 
'customerId': "your-customer-id",
'relatedContactId':'your-relatedContactId',                    
'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "[e-mail]", "isPremiumUser": "true", "age": "45"} } 
header = { 'typ': "JWT", 'alg': 'HS256' } 
encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect

Skrip widget komunikasi

Gambar berikut menunjukkan contoh JavaScript yang Anda sematkan di situs web tempat Anda ingin pelanggan berinteraksi dengan pusat kontak Anda. Skrip ini menampilkan widget di sudut kanan bawah situs web Anda.

catatan

Sertakan skrip widget dalam elemen HTML yang perlu merender widget saat menggunakan gaya inline Tertanam.

Saat situs web Anda dimuat, pelanggan pertama kali melihat ikon widget. Ketika mereka memilih ikon ini, widget komunikasi terbuka dan pelanggan dapat memulai kontak dengan agen Anda.

Untuk membuat perubahan pada widget komunikasi kapan saja, pilih Edit.

catatan

Perubahan yang disimpan memperbarui pengalaman pelanggan dalam beberapa menit. Konfirmasikan konfigurasi widget Anda sebelum menyimpannya.

Untuk membuat perubahan pada ikon widget di situs web, Anda akan menerima cuplikan kode baru untuk memperbarui situs web Anda secara langsung.