View a markdown version of this page

Cara mengatur pengalaman obrolan layanan mandiri agen Anda dari ujung ke ujung - Amazon Connect
Apa itu Streaming Pesan AI?Status PemberdayaanBuat Widget KomunikasiUji Pengalaman Streaming

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

Cara mengatur pengalaman obrolan layanan mandiri agen Anda dari ujung ke ujung

catatan

Agen AI Orkestrasi mengharuskan streaming obrolan diaktifkan untuk kontak obrolan. Tanpa streaming obrolan diaktifkan, beberapa pesan akan gagal dirender. Lihat Aktifkan streaming pesan untuk obrolan bertenaga AI.

Apa itu Streaming Pesan AI?

AI Message Streaming adalah fitur Amazon Connect yang memungkinkan tampilan progresif respons agen AI selama interaksi obrolan. Alih-alih menunggu AI menghasilkan respons lengkap sebelum menunjukkan apa pun kepada pelanggan, streaming menampilkan teks saat dihasilkan, menciptakan pengalaman percakapan yang lebih alami.

Cara Kerjanya

Dengan respons obrolan standar, pelanggan menunggu sementara AI menghasilkan seluruh responsnya, kemudian pesan lengkap muncul sekaligus. Dengan AI Message Streaming, pelanggan melihat gelembung teks yang berkembang di mana kata-kata muncul secara progresif saat AI menghasilkannya, mirip dengan menonton seseorang mengetik secara real-time.

catatan

Dokumentasi Resmi: Untuk referensi teknis lengkap, lihatAktifkan streaming pesan untuk obrolan bertenaga AI.

Manfaat Tampilan Teks Progresif

AI Message Streaming memberikan beberapa manfaat utama bagi pengalaman pelanggan:

  • Mengurangi waktu tunggu yang dirasakan - Pelanggan melihat aktivitas langsung daripada menatap pemintal pemuatan

  • Alur percakapan yang lebih alami - Teks progresif meniru pengetikan manusia, menciptakan interaksi yang lebih menarik

  • Keterlibatan yang lebih baik - Pelanggan dapat mulai membaca respons saat masih dihasilkan

  • Pesan pemenuhan - Agen AI dapat memberikan pesan sementara seperti “Satu saat saat saya meninjau akun Anda” selama pemrosesan

Obrolan Standar vs Obrolan Streaming

Tabel berikut membandingkan pengalaman pelanggan antara obrolan standar dan obrolan streaming:

Aspek Obrolan Standar Obrolan Streaming
Tampilan Respons Pesan lengkap muncul sekaligus Teks muncul secara progresif (gelembung tumbuh)
Pengalaman Pelanggan Tunggu respons penuh dengan indikator pemuatan Lihat kata-kata muncul secara real-time
Waktu Tunggu yang Dirasakan Lebih lama (menunggu tanggapan lengkap) Lebih pendek (umpan balik visual langsung)
Percakapan Merasa Transaksional Alami, seperti mengobrol dengan seseorang
Pesan Pemenuhan Tidak tersedia AI dapat mengirim pembaruan status sementara
Penanganan Lex Timeout Tunduk pada batas batas waktu Lex Menghilangkan batasan batas waktu Lex

Status Pemberdayaan

Ketersediaan Streaming Pesan AI bergantung pada kapan instans Amazon Connect Anda dibuat dan cara konfigurasinya.

Pengaktifan Otomatis untuk Instans Baru

Instans Amazon Connect yang dibuat setelah Desember 2025 mengaktifkan Streaming Pesan AI secara default. Atribut MESSAGE_STREAMING instance secara otomatis diatur ke true untuk instance ini, jadi tidak diperlukan konfigurasi tambahan.

penting

Jika Anda menggunakan AWS akun dengan instans Amazon Connect yang dibuat sebelum Desember 2025, Anda mungkin perlu mengaktifkan Streaming Pesan AI secara manual. Ikuti petunjuk di Aktifkan streaming pesan untuk dokumentasi obrolan yang didukung AI untuk memeriksa MESSAGE_STREAMING atribut instans Anda dan mengaktifkannya jika diperlukan.

Izin Amazon Lex Bot

AI Message Streaming memerlukan lex:RecognizeMessageAsync izin untuk berfungsi dengan benar. Izin ini memungkinkan Amazon Connect untuk menjalankan API pengenalan pesan asinkron yang memungkinkan respons streaming.

Untuk asosiasi bot Lex baru: Saat Anda mengaitkan bot Amazon Lex baru dengan instans Amazon Connect Anda, lex:RecognizeMessageAsync izin yang diperlukan secara otomatis disertakan dalam kebijakan berbasis sumber daya bot. Tidak diperlukan konfigurasi tambahan.

penting

Jika Anda memiliki bot Amazon Lex yang dikaitkan dengan instans Amazon Connect Anda sebelum Streaming Pesan AI diaktifkan, Anda mungkin perlu memperbarui kebijakan berbasis sumber daya bot untuk menyertakan izin. lex:RecognizeMessageAsync

Untuk memperbarui kebijakan bot Lex Anda yang ada:

  1. Arahkan ke konsol Amazon Lex

  2. Pilih bot Anda dan buka Kebijakan berbasis sumber daya

  3. Tambahkan lex:RecognizeMessageAsync tindakan ke pernyataan kebijakan yang memberikan akses Amazon Connect

  4. Simpan kebijakan yang diperbarui

Untuk petunjuk terperinci, lihat bagian izin Lex bot di AWS dokumentasi.

Buat Widget Komunikasi

Amazon Connect Communications Widget adalah antarmuka obrolan yang dapat disematkan yang dapat Anda tambahkan ke situs web apa pun. Di bagian ini, Anda akan membuat dan mengonfigurasi widget untuk menguji Streaming Pesan AI. Anda dapat melewati bagian ini jika Anda berencana untuk menggunakan widget obrolan pelanggan Anda sendiri.

  1. Di konsol Amazon Connect, navigasikan ke instans Anda

  2. Klik Saluran di menu navigasi kiri

  3. Klik widget Komunikasi

  4. Anda akan melihat halaman manajemen Widget Komunikasi

catatan

Apa itu Widget Komunikasi? Widget Komunikasi adalah solusi out-of-the-box obrolan Amazon Connect. Ini menyediakan antarmuka obrolan yang berfungsi penuh yang dapat Anda sematkan di situs web menggunakan JavaScript cuplikan sederhana. Widget menangani semua kompleksitas membangun koneksi, mengelola sesi, dan menampilkan pesan.

Langkah 2: Buat Widget Baru

  1. Klik Tambah widget untuk membuat Widget Komunikasi baru

  2. Masukkan detail berikut:

    • Nama: AI-Streaming-Demo-Widget

    • Deskripsi: Widget for testing AI Message Streaming

  3. Di bawah Opsi komunikasi pastikan Tambahkan obrolan dipilih

  4. Pilih Self Service Test Flow sebagai alur kontak Chat Anda

  5. Klik Simpan dan lanjutkan ke halaman konfigurasi

Pemilihan Arus Kontak

Pastikan Anda memilih alur kontak yang:

  • Apakah Pengaturan Dasar telah dikonfigurasi (membuat sesi AI, logging, dll)

  • Rute ke bot Lex Anda dengan integrasi Agen AI

  • Memiliki penanganan kesalahan yang tepat untuk pemutusan

Jika Anda belum membuat alur kontak, selesaikan bagian Membuat Aliran terlebih dahulu.

Langkah 3: Sesuaikan Penampilan Widget

Sesuaikan tampilan dan nuansa widget obrolan Anda agar sesuai dengan merek Anda dan pilih Simpan dan lanjutkan.

Langkah 4: Konfigurasikan Domain yang Diizinkan

Widget Komunikasi hanya dimuat di situs web yang diizinkan secara eksplisit. Fitur keamanan ini mencegah penggunaan widget Anda secara tidak sah.

  1. Gulir ke bawah ke domain yang Diizinkan

  2. Klik Tambahkan domain dan tambahkan domain berikut untuk pengujian localhost:

    • http://localhost

  3. Pilih Tidak di bawah keamanan

  4. Jika Anda berencana untuk menyebarkan ke situs web produksi nanti, tambahkan domain tersebut juga dan pastikan Anda mengonfigurasi keamanan (mis.,) https://www.example.com

Langkah 5: Simpan dan Dapatkan Kode Widget

  1. Klik Simpan dan lanjutkan untuk menyimpan konfigurasi widget Anda

  2. Setelah pembuatan, Anda akan melihat halaman detail Widget dengan kode embed Anda

  3. Penting: Salin dan simpan nilai-nilai berikut dari cuplikan kode embed:

    • URI Klien - URL ke JavaScript file widget

    • ID Widget - Pengidentifikasi unik untuk widget Anda

    • ID Cuplikan - String konfigurasi yang dikodekan Base64

Langkah 6: Mengatur Lingkungan Pengujian Lokal

Untuk menguji widget secara lokal, Anda akan membuat file HTML sederhana yang memuat Widget Komunikasi.

  1. Buat folder baru di komputer Anda untuk pengujian (mis.,ai-streaming-test)

  2. Unduh gambar latar belakang untuk halaman demo dan simpan seperti background.jpg di folder pengujian Anda

  3. Buat file baru yang disebut index.html di folder pengujian Anda dengan konten berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            background-image: url("background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
    <title>AI Message Streaming Demo</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
      (function(w, d, x, id){
        s=d.createElement('script');
        s.src='REPLACE_WITH_CLIENT_URI';
        s.async=1;
        s.id=id;
        d.getElementsByTagName('head')[0].appendChild(s);
        w[x] = w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
      })(window, document, 'amazon_connect', 'REPLACE_WITH_WIDGET_ID');
      amazon_connect('styles', {
        iconType: 'CHAT',
        openChat: { color: '#ffffff', backgroundColor: '#ff9200' },
        closeChat: { color: '#ffffff', backgroundColor: '#ff9200'}
      });
      amazon_connect('snippetId', 'REPLACE_WITH_SNIPPET_ID');
      amazon_connect('supportedMessagingContentTypes', [
        'text/plain',
        'text/markdown',
        'application/vnd.amazonaws.connect.message.interactive',
        'application/vnd.amazonaws.connect.message.interactive.response'
      ]);
      amazon_connect('customStyles', {
        global: { frameWidth: '500px', frameHeight: '900px'}
      });
    </script>
</body>
</html>

Langkah 7: Ganti Nilai Placeholder

Ganti nilai placeholder dalam file HTML dengan nilai widget Anda yang sebenarnya:

Placeholder Ganti Dengan Contoh
REPLACE_WITH_CLIENT_URI URI Klien Anda dari Langkah 5 https://d2s9x5slqf05.cloudfront.net/amazon-connect-chat-interface-client.js
REPLACE_WITH_WIDGET_ID ID Widget Anda dari Langkah 5 amazon_connect_widget_abc123
REPLACE_WITH_SNIPPET_ID ID Cuplikan Anda dari Langkah 5 QVFJREFIaWJYbG...(string Base64 panjang)

Langkah 8: Mulai Server Web Lokal

Untuk menguji widget, Anda perlu menyajikan file HTML dari server web lokal. Berikut adalah beberapa opsi:

Opsi A: Python (jika diinstal)

python -m http.server 8001
Opsi B: Node.js (jika diinstal)

npx http-server -p 8001
Opsi C: Ekstensi Server Langsung Kode VS

  • Instal ekstensi “Server Langsung” di VS Code

  • Klik kanan index.html dan pilih “Buka dengan Server Langsung”

Setelah memulai server, buka browser Anda dan arahkan ke: http://localhost:8001

Anda akan melihat halaman demo dengan tombol obrolan oranye di sudut kanan bawah.

Uji Pengalaman Streaming

Sekarang widget Anda dimuat, saatnya untuk menguji Streaming Pesan AI dan mengamati tampilan teks progresif yang sedang beraksi.

Apa yang Harus Diperhatikan: Streaming vs Non-Streaming

Memahami perbedaan antara respons streaming dan non-streaming membantu Anda memverifikasi bahwa Streaming Pesan AI berfungsi:

Perilaku Non-Streaming (Standar) Streaming (Streaming Pesan AI)
Tampilan awal Indikator pemuatan atau titik pengetikan Teks mulai muncul segera
Penampilan teks Pesan lengkap muncul sekaligus Kata-kata muncul secara progresif (gelembung tumbuh)
Waktu respons Tunggu hingga AI selesai menghasilkan Lihat respons saat sedang dihasilkan
Efek visual “Pop” dari teks lengkap Teks yang halus dan mengalir seperti menonton seseorang mengetik