Sebelum memulai tutorial ini pastikan kamu sudah mengikuti tutorial sebelumnya yaitu “Membuat Chatbot Telegram Dalam 5 Menit”

Jika sudah mari kita lanjut 🙂

Agar chatbot dapat diakses melalui halaman website, caranya sangat mudah.

Mengaktfikan Integrasi Web
  1. Akses menu Integrations dari navigasi
  2. Aktifkan integrasi dengan mengklik Web demo, lalu akan muncul popup
Integrasi Web Sudah Aktif
  1. Copy link tersebut lalu buka tab baru di browser. Kamu bisa berkomunikasi dengan chatbot melalui halaman website tersebut
  2. Disarankan untuk mengupload icon dan mengisi deksripsi dari chatbot agar pengguna dapat mengetahui kegunaan chatbot
  3. Kamu bisa copy-paste script HTML untuk menyisipkan chatbot di halaman blog atau website yang kamu miliki
  4. Jika sudah selesai tutup popupnya

Agar chatbot kamu terlihat menarik gunakan icon karakter. Kamu bisa menggunakan layanan gratis seperti https://avatarmaker.com.

Membuat Icon Karakter Untuk Chatbot
  1. Di halaman avatarmaker.com kamu bisa membuat berbagai macam karakter
  2. Download karakter yang sudah dibuat
  3. Upload gambar karakter
  4. Isi keterangan tentang chatbot kamu
  5. Jangan lupa untuk simpan perubahan

Oya, kamu juga bisa mengubah nama agen kamu agar lebih mudah di ingat, contohnya sebagai berikut:

Mengubah Nama Agent
  1. Ubah nama agen sesuai yang kamu mau, kalau saya ganti menjadi “TemanBelajar”
  2. Simpan perubahan

Ketika mengakses chatbot menggunakan URL Web yang sudah diaktifkan sebelumnya. Dengan adanya icon karakter tentunya akan terlihat lebih menarik untuk pengguna.

Chatbot Web Dengan Icon Karakter

Menyisipkan Kode HTML Chatbot Di Website

Saya sisipkan kode HTML chatbot di halaman ini.

<iframe
    allow="microphone;"
    width="350"
    height="430"
    src="https://console.dialogflow.com/api-client/demo/embedded/243d9454-4af3-42c3-9003-1446c61fcdd9">
</iframe>

Hasilnya adalah sebagai berikut:

Sekarang kamu sudah bisa membuat chatbot di halaman website. Di tutorial selanjutnya saya akan membahas cara untuk meningkatkan kemampuan komunikasi chatbot.

Jangan sampai ketinggalan informasi lainnya mengenai chatbot. Follow twitter @FredEatWorld dan add Facebook freddy.mu.522

Author

Engineering Manager, Software Engineer, Chatbot Developer, Natural Language Processing Enthusiast, JAMStack Enthusiast.

Write A Comment