View a markdown version of this page

Tambahkan widget Hubungkan Pelanggan ke situs web Anda untuk menerima kontak obrolan, tugas, email, dan panggilan web - Pelanggan Amazon Connect
Langkah 1: Buat formulir kontak untuk widget AndaLangkah 2: Sesuaikan widget komunikasi AndaLangkah 3: Tentukan domain situs web tempat Anda berharap untuk menampilkan widget komunikasiLangkah 4: Konfirmasikan dan salin kode widget komunikasi dan kunci keamanan

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Tambahkan widget Hubungkan Pelanggan 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 untuk kontak yang dibuat melalui widget Anda.

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

  2. Di kiri atas, pilih Views.

  3. Pilih Buat Tampilan.

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

    • Dengan menggunakan komponen Formulir, Anda dapat menautkan Input Formulir ke kontak Anda saat pembuatan. Dengan penautan formulir, Anda dapat 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 tipe tombol lainnya dalam formulir.

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

    • Ada tiga opsi yang didukung ConnectActionType untuk komponen Tindakan Hubungkan:

      • StartEmailContact

      • StartTaskContact

      • StartChatContact

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

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

  5. Setelah menambahkan tombol Hubun gkan Tind akan ke formulir, Anda dapat menetapkan nilai untuk kontak yang dibuat oleh formulir dengan menautkannya ke opsi di tombol Hubungkan Tindakan. Komponen yang ingin Anda tautkan harus berada dalam Formulir yang sama di Tampilan dengan tombol Tindakan Hubun gkan.

    Aktivasi keamanan untuk permintaan widget komunikasi baru.

    Komponen berikut didukung untuk penautan formulir:

    • Masukan Formulir

    • Dropdown (matikan multi-pilih)

    • Pemilih Tanggal

    • Area Teks

    • Pemilih Waktu

  6. Setelah View Anda siap, pilih Publish.

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 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 T indakan.

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

  5. Pilih Tampilan yang Anda konfigurasikan pada langkah sebelumnya. Jika komponen Tindakan Hubungkan di View tidak memiliki set alur kontak, Anda harus mengaturnya di sini.

  6. Pilih S impan dan Lanjutkan.

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.

catatan

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

Jenis tampilan

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

  • Dengan tombol aksi mengambang, Anda dapat menyematkan widget Anda sebagai tombol yang dapat berinteraksi di sudut kanan bawah halaman web

  • Dengan Embedded inline, Anda dapat menyematkan 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). Setiap gambar yang lebih besar dari dimensi tersebut akan diskalakan agar sesuai dengan ruang komponen logo 280x60.

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

  • 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 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 pada langkah ini.

    Pilih Tambahkan domain untuk menambahkan hingga 50 domain.

    Opsi tambahkan 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 dengan administrator situs web Anda untuk mengatur server web Anda untuk mengeluarkan Token Web JSON (JWT) untuk permintaan kontak baru. Ini memberi Anda lebih banyak kontrol saat memulai kontak baru, termasuk kemampuan untuk memverifikasi bahwa permintaan yang dikirim ke Connect Customer berasal dari pengguna yang diautentikasi.

    Aktivasi keamanan untuk permintaan widget komunikasi baru.

    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 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 untuk mengeluarkan JWT 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 JWT di 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. Ketika Anda melakukan ini, Connect Customer memberi Anda kunci baru dan mempertahankan kunci sebelumnya sampai Anda memiliki kesempatan untuk menggantinya. Setelah Anda menerapkan kunci baru, Anda dapat kembali ke Connect Customer dan menghapus kunci sebelumnya.

Kunci keamanan yang disediakan oleh Connect Customer.

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 untuk Menghubungkan Pelanggan. Connect Customer kemudian menggunakan kunci rahasia untuk mendekripsi token. Jika berhasil, ini mengonfirmasi bahwa JWT dikeluarkan oleh server web Anda dan Connect Customer 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: *Diterbitkan Pada Waktu.

    • exp: *Kedaluwarsa (maksimum 10 menit).

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

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

    • terkait ContactId (opsional): String dengan id kontak yang valid. Yang terkait ContactId harus mengikuti batasan yang ditetapkan oleh StartChatContact API.

    • CustomerID (opsional): Ini bisa berupa ID Profil Pelanggan Hubungkan 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 di 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": "Jane@example.com", "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.

Skrip widget komunikasi.

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.

Tautan edit pada pratinjau widget.

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