Dengan integrasi, interaksi pengguna akhir akan 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 dalam panduan memulai Mem-build agen menggunakan alur. Langkah-langkah di bawah ini akan terus bekerja pada agen yang sama. Jika tidak lagi memiliki agen tersebut, Anda dapat mendownload agen dan memulihkannya.
Penyiapan
Untuk menyiapkan akses yang tidak diautentikasi ke agen Messenger Dialogflow CX:
- Buka konsol Dialogflow CX.
- Pilih project Google Cloud Anda.
- Pilih agen Anda.
- Pilih tab Kelola.
- Klik Integrations 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 Disable... di bagian bawah dialog, sehingga Anda dapat mengonfigurasi ulang setelan di 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 di 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.
Perbarui atribut lain yang perlu diperbarui.
Untuk memungkinkan tata letak responsif,
tambahkan juga hal 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 informasi selengkapnya.