Dengan integrasi, interaksi pengguna akhir ditangani untuk Anda. Anda hanya perlu membuat agen, menerapkan webhook secara opsional, dan mengonfigurasi integrasi.
Panduan ini menunjukkan cara menggunakan integrasi Dialogflow CX Messenger untuk menyediakan antarmuka pengguna chat teks sederhana bagi agen Anda.
Sebelum memulai
Jika tidak berencana menggunakan integrasi, Anda dapat melewati panduan memulai ini.
Anda harus melakukan hal berikut sebelum membaca panduan ini:
- Baca dasar-dasar alur.
- Lakukan langkah-langkah penyiapan.
- Lakukan langkah-langkah di panduan memulai Membangun agen menggunakan alur. Langkah-langkah di bawah ini akan terus berfungsi di agen yang sama. Jika Anda tidak lagi memiliki agen tersebut, Anda dapat mendownload agen dan memulihkannya.
Penyiapan
Untuk menyiapkan akses yang tidak diautentikasi ke agen Dialogflow CX Messenger Anda:
- Buka konsol Dialogflow CX.
- Pilih project Google Cloud Anda.
- Pilih agen Anda.
- Pilih tab Kelola.
- Klik Integrasi di menu sidebar kiri.
- Klik Connect di Dialogflow CX Messenger.
- Dialog konfigurasi akan terbuka.
- Jika integrasi sebelumnya disiapkan untuk agen ini, Anda akan melihat kode HTML yang dapat disematkan. Terlepas dari apakah Anda menginginkan autentikasi atau tidak, klik tombol Nonaktifkan... di bagian bawah dialog, sehingga Anda dapat mengonfigurasi ulang setelan pada langkah berikutnya.
- Pilih Environment.
- Pilih Unauthenticated API.
- Pilih gaya.
- Membatasi akses domain secara opsional.
- Klik Enable the unauthenticated API.
- Dialog akan menampilkan kode HTML yang dapat disematkan yang dapat disematkan di situs Anda. Salin kode ini.
- Klik Done.
Penyematan
Tempelkan kode sematan yang Anda salin di atas ke halaman web di situs Anda.
Elemen HTML <script> dan <df-messenger>
harus berada di elemen <body> halaman Anda.
Jika Anda menggunakan integrasi yang diautentikasi,
tetapkan atribut oauth-client-id untuk <df-messenger>
ke client ID Oauth Anda. Jika Anda ingin menggunakan identitas pengguna akhir untuk autentikasi alat,
tetapkan atribut access-token-name dengan nama apa pun yang Anda inginkan.
Kemudian, gunakan Token Bearer dengan nilai $session.params.ACCESS_TOKEN_NAME
untuk autentikasi alat.
Perbarui atribut lain yang perlu diperbarui.
Untuk memungkinkan tata letak responsif, tambahkan juga kode berikut ke elemen <head> Anda:
<meta name="viewport" content="width=device-width, initial-scale=1">
Setelah disematkan, Anda dapat berinteraksi dengan agen melalui halaman web dengan mengklik ikon chat di pojok kanan bawah.
Sesuaikan
Anda dapat menyesuaikan tampilan dan perilaku antarmuka pengguna ini dengan berbagai cara. Lihat dokumentasi Dialogflow CX Messenger untuk mengetahui informasi selengkapnya.