View a markdown version of this page

Tambahkan widget Connect Customer 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 Connect Customer 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 Connect Customer admin dihttps://instance name.my.connect.aws/. Di bawah tab Routing, pilih Flows.

  2. Di kiri atas, pilih 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 ada 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 Connect Customer.

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

    Aktivasi keamanan untuk permintaan widget komunikasi baru.

    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 Connect Customer.

  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 mengaturnya di sini.

  6. Pilih 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 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:

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

    Opsi tambahkan 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 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 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 mengatur server web Anda agar 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 JSON Web Tokens (JWTs).

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

      Anda harus menerapkan 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 hingga Anda memiliki kesempatan untuk menggantinya. Setelah kunci baru digunakan, 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 ke Connect Customer. 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: *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 lebih lanjut, periksa SegmentAttributes di StartChatContactAPI.

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

    • terkait ContactId (opsional): String dengan id kontak yang valid. Terkait ContactId harus mengikuti batasan yang ditetapkan oleh StartChatContactAPI.

    • CustomerID (opsional): Ini dapat berupa Connect Customer Customer Profiles ID atau pengenal kustom 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": "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.