Dengan integrasi, interaksi pengguna akhir ditangani untuk Anda. Anda hanya perlu membangun agen, mengimplementasikan webhook secara opsional, dan mengonfigurasi integrasi.
Panduan ini menunjukkan cara menggunakan integrasi Dialogflow Messenger untuk menyediakan antarmuka pengguna chat teks yang 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 Dialogflow CX.
- Lakukan langkah-langkah penyiapan.
- Lakukan langkah-langkah dalam panduan memulai Membangun agen. Langkah-langkah di bawah ini akan dilanjutkan dengan agen yang sama. Jika tidak lagi memiliki agen tersebut, Anda dapat mendownload agen dan memulihkannya.
Penyiapan
Untuk menyiapkan akses tanpa autentikasi ke agen Dialogflow Messenger Anda:
- Buka Dialogflow CX Console.
- Pilih project Google Cloud Anda.
- Pilih agen Anda.
- Pilih tab Kelola.
- Klik Integrations di menu sidebar kiri.
- Klik Connect di Dialogflow 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 apa yang diautentikasi atau tidak diautentikasi, klik tombol Disable... di bagian bawah dialog, sehingga Anda dapat mengonfigurasi ulang setelan pada langkah berikutnya.
- Pilih Environment.
- Pilih UnAuthenticationd API.
- Pilih gaya.
- Anda juga dapat membatasi akses domain.
- Klik Aktifkan API yang tidak diautentikasi.
- Dialog tersebut akan menampilkan kode HTML yang dapat disematkan di situs web Anda. Salin kode ini.
- Klik Done.
Embed
Tempelkan kode semat yang Anda salin di atas ke dalam laman web di situs web 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.
Mengupdate atribut lain yang perlu diupdate.
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 Messenger untuk informasi lebih lanjut.