Dialogflow Messenger

Integrasi Dialogflow Messenger menyediakan dialog chat yang dapat disesuaikan untuk agen dan dapat disematkan di situs Anda. Dialog chat diterapkan sebagai jendela dialog yang dapat dibuka dan ditutup oleh pengguna akhir. Jika dibuka, dialog chat akan muncul di atas konten Anda di sisi kanan bawah layar.

Screenshot Messenger

Batasan

Hanya bahasa agen default yang didukung oleh integrasi ini.

Menyiapkan dan menguji

Untuk menyiapkan dan mengaktifkan Dialogflow Messenger:

  1. Buka Dialogflow ES Console.
  2. Klik Integrations di menu sidebar kiri.
  3. Klik Dialogflow Messenger.
  4. Dialog konfigurasi akan terbuka.
  5. Pilih lingkungan.
  6. Klik Enable.
  7. Salin kode sematan untuk ditempelkan di situs web Anda.
  8. Klik Coba Sekarang untuk menguji agen Anda.
  9. Di sudut kanan bawah jendela, muncul tombol dengan logo Dialogflow. Klik tombol ini.
  10. Dialog chat akan terbuka dan Anda dapat berinteraksi.
  11. Tutup dialog chat setelah Anda selesai melakukan pengujian.
  12. Klik Close di dialog konfigurasi.

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. Untuk memungkinkan tata letak responsif, tambahkan juga hal berikut ke halaman Anda:

<meta name="viewport" content="width=device-width, initial-scale=1">

Penyesuaian HTML

Anda dapat menyesuaikan berbagai aspek terkait tampilan dan perilaku dialog chat. Elemen HTML df-messenger memiliki atribut berikut:

Atribut Kebijakan input Nilai
agent-id Diperlukan ID Agen yang terkait dengan agen Dialogflow. Kolom ini diisi otomatis dengan ID agen Anda.
chat-icon Opsional Ikon yang digunakan untuk tombol buka dialog chat. Ikon Dialogflow adalah setelan default. Kolom ini harus berupa URL publik. Ukuran ikon harus 36px kali 36px.
chat-title Diperlukan Judul ditampilkan di bagian atas dialog chat. Kolom ini diisi otomatis dengan nama agen Anda.
expand Opsional Atribut boolean yang menetapkan dialog chat agar terbuka saat halaman dimuat. Secara default, dialog chat ditutup saat halaman dimuat.
intent Opsional Peristiwa yang digunakan untuk memicu intent pertama saat dialog chat dibuka. Kolom ini akan diisi otomatis dengan peristiwa WELCOME.
language-code Diperlukan Kode bahasa default untuk intent pertama. Kolom ini akan diisi otomatis dengan bahasa default agen.
session-id Opsional ID sesi. Jika tidak diberikan, integrasi akan membuat ID unik untuk setiap dialog chat.
user-id Opsional Dapat digunakan untuk melacak pengguna di seluruh sesi. Anda dapat meneruskan nilai ke Dialogflow melalui kolom queryParams.payload.userId dalam permintaan intent deteksi.
wait-open Opsional Atribut Boolean yang menunda peristiwa penyambutan hingga dialog benar-benar dibuka.

Penyesuaian CSS

Anda dapat menyesuaikan gaya dialog chat dengan menetapkan variabel CSS.

Variabel CSS berikut dapat diberikan:

Variabel CSS Properti yang terpengaruh
df-messenger-bot-message Warna latar belakang balon untuk pesan agen.
df-messenger-button-titlebar-color Warna untuk tombol mengambang dan baris judul dialog chat.
df-messenger-button-titlebar-font-color Warna font untuk judul dalam panel judul.
df-messenger-chat-background-color Warna untuk latar belakang dialog chat.
df-messenger-font-color Warna font untuk pesan.
df-messenger-input-box-color Warna latar belakang untuk kotak input teks.
df-messenger-input-font-color Warna font untuk kotak input teks.
df-messenger-input-placeholder-font-color Warna font untuk teks placeholder dalam kotak input teks.
df-messenger-minimized-chat-close-icon-color Warna ikon tutup pada tampilan chat tertutup.
df-messenger-send-icon Warna ikon kirim di kotak input teks.
df-messenger-user-message Warna latar belakang balon untuk pesan pengguna.

Contoh kode:

<style>
  df-messenger {
   --df-messenger-bot-message: #878fac;
   --df-messenger-button-titlebar-color: #df9b56;
   --df-messenger-chat-background-color: #fafafa;
   --df-messenger-font-color: white;
   --df-messenger-send-icon: #878fac;
   --df-messenger-user-message: #479b3d;
  }
</style>

Setelan di atas akan menghasilkan:

Screenshot Messenger

Peristiwa JavaScript

Dialogflow Messenger memicu berbagai peristiwa yang dapat Anda gunakan untuk membuat pemroses peristiwa.

Target peristiwa untuk peristiwa ini adalah elemen df-messenger.

Guna menambahkan pemroses peristiwa untuk elemen df-messenger, tambahkan kode JavaScript berikut, dengan event-type sebagai salah satu nama peristiwa yang dijelaskan di bawah ini:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('event-type', function (event) {
  // Handle event
  ...
});

Jenis peristiwa berikut ini didukung:

df-accordion-clicked

Peristiwa ini terjadi saat pengguna mengklik elemen akordeon. Struktur peristiwa terlihat seperti berikut:

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl: string}
  },
  text: string
}

df-button-clicked

Peristiwa ini terjadi saat pengguna mengklik elemen tombol. Struktur peristiwa terlihat seperti berikut:

element: {
  icon: {
    type: string,
    color: string
  },
  text: string,
  link: string,
  event: EventInput,
  payload: {}
}

df-chip-clicked

Peristiwa ini terjadi saat pengguna memilih chip saran. Struktur peristiwa terlihat seperti berikut:

query: string // Text of the suggestion chip that was selected.

df-info-card-clicked

Peristiwa ini terjadi saat pengguna akhir mengklik item informasi pada kolom judul. Struktur peristiwa terlihat seperti berikut:

element: {
  title: string,
  image: {
    src: {rawUrl: string}
  },
  actionLink: string
}

df-list-element-clicked

Peristiwa ini terjadi saat pengguna mengklik item dalam daftar. Struktur peristiwa terlihat seperti berikut:

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl}
  },
  event: {
    name: string,
    parameters: {},
    languageCode: string
  },
  payload: {}
}

df-messenger-error

Peristiwa ini terjadi saat Dialogflow API mengirim kode status error. Struktur peristiwa terlihat seperti berikut:

error: {
  "error": {
    "code": <error_code>,
    "message": <error_message>,
    "status": <error_status>
  }
}

df-messenger-loaded

Peristiwa ini dipicu saat elemen df-messenger dimuat dan diinisialisasi sepenuhnya.

df-request-sent

Peristiwa ini terjadi saat permintaan dibuat ke Dialogflow API. Peristiwa ini, beserta df-response-received, dapat digunakan untuk memantau latensi permintaan. Struktur peristiwa terlihat seperti berikut:

requestBody: {
  "queryParams": {
    object(QueryParameters)
  },
  "queryInput": {
    object(QueryInput)
  },
  "inputAudio": string
}

df-response-received

Peristiwa ini terjadi saat respons diterima dari Dialogflow API. Struktur peristiwa terlihat seperti berikut:

response: detectIntentResponse

df-user-input-entered

Peristiwa ini terjadi saat pengguna akhir memasukkan kueri. Struktur peristiwa terlihat seperti berikut:

input: string // Text entered by user

Fungsi JavaScript

Elemen df-messenger menyediakan fungsi yang dapat Anda panggil untuk memengaruhi perilakunya.

renderCustomText

Fungsi ini merender pesan teks sederhana, seolah-olah berasal dari Dialogflow sebagai respons teks sederhana.

Contoh:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text');

renderCustomCard

Fungsi ini merender kartu kustom, seolah-olah berasal dari Dialogflow sebagai pesan respons kaya. Format respons payload kustom ditentukan di bagian Pesan respons kaya.

Contoh:

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "src": {
        "rawUrl": "https://example.com/images/logo.png"
      }
    },
    "actionLink": "https://example.com"
  }];
dfMessenger.renderCustomCard(payload);

showMinChat

Fungsi ini menampilkan versi minimal daftar pesan.

Contoh:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.showMinChat();

Pesan respons lengkap

Saat membuat pesan respons yang lengkap, Anda dapat membuat Text Responses dan Custom Payloads dari tab respons Default untuk intent tersebut. Respons teks digunakan untuk respons agen dasar, dan payload kustom digunakan untuk respons kaya. Format payload kustom untuk semua jenis respons memiliki struktur dasar berikut:

{
  "richContent": [
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ],
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ]
  ]
}

Perlu diketahui bahwa nilai richContent memungkinkan satu array luar dan beberapa array dalam. Respons dalam array bagian dalam terikat bersama dalam satu kartu visual. Jika array luar berisi beberapa array dalam, beberapa kartu akan ditampilkan—satu untuk setiap array dalam.

Subbagian lainnya menjelaskan berbagai jenis respons yang dapat Anda konfigurasi untuk payload kustom.

Jenis respons info

Jenis respons info adalah kartu judul sederhana yang dapat diklik atau disentuh pengguna.

Screenshot Messenger

Tabel berikut mendeskripsikan kolom:

Nama Jenis Deskripsi
type string Jenis respons: "info"
title string Judul kartu
subtitle string Subtitel kartu
image objek Gambar
image.src objek Sumber gambar
image.src.rawUrl string URL publik untuk gambar
actionLink string URL yang akan diikuti saat kartu diklik

Contoh:

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "src": {
            "rawUrl": "https://example.com/images/logo.png"
          }
        },
        "actionLink": "https://example.com"
      }
    ]
  ]
}

Jenis respons deskripsi

Jenis respons deskripsi adalah kartu informatif yang dapat memiliki beberapa baris teks.

Screenshot Messenger

Tabel berikut mendeskripsikan kolom:

Nama Jenis Deskripsi
type string Jenis respons: "deskripsi"
title string Judul kartu
text array Array string, tempat setiap string dirender pada baris baru

Contoh:

{
  "richContent": [
    [
      {
        "type": "description",
        "title": "Description title",
        "text": [
          "This is text line 1.",
          "This is text line 2."
        ]
      }
    ]
  ]
}

Jenis respons gambar

Jenis respons gambar adalah kartu gambar yang dapat diklik atau disentuh pengguna.

Screenshot Messenger

Tabel berikut mendeskripsikan kolom:

Nama Jenis Deskripsi
type string Jenis respons: "gambar"
rawUrl string URL publik untuk gambar
accessibilityText string Teks alternatif untuk gambar

Contoh:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo"
      }
    ]
  ]
}

Jenis respons tombol

Jenis respons tombol adalah tombol kecil dengan ikon yang dapat diklik atau disentuh pengguna.

Screenshot Messenger

Tabel berikut mendeskripsikan kolom:

Nama Jenis Deskripsi
type string Jenis tanggapan: "button"
icon objek Ikon untuk tombol
icon.type string Ikon dari library ikon Material. Ikon defaultnya adalah tanda panah
icon.color string Kode heksadesimal warna
text string Teks tombol
link string URL yang akan diikuti saat tombol diklik
event objek Peristiwa dialogflow yang dipicu saat tombol diklik. Lihat referensi REST EventInput

Contoh:

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "text": "Button text",
        "link": "https://example.com",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      }
    ]
  ]
}

Cantumkan jenis respons

Jenis respons daftar adalah kartu dengan beberapa opsi yang dapat dipilih pengguna.

Screenshot Messenger

Respons berisi array jenis respons list dan divider. Tabel berikut menjelaskan jenis list:

Nama Jenis Deskripsi
type string Jenis respons: "daftar"
title string Judul opsi
subtitle string Subtitel opsi
event objek Peristiwa dialogflow yang dipicu saat opsi diklik, lihat referensi REST EventInput

Tabel berikut menjelaskan jenis divider:

Nama Jenis Deskripsi
type string Jenis respons: "divider"

Contoh:

{
  "richContent": [
    [
      {
        "type": "list",
        "title": "List item 1 title",
        "subtitle": "List item 1 subtitle",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      },
      {
        "type": "divider"
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      }
    ]
  ]
}

Jenis respons akordeon

Jenis respons akordeon adalah kartu kecil yang dapat diklik atau disentuh pengguna untuk meluaskan dan menampilkan lebih banyak teks.

Screenshot Messenger

Tabel berikut mendeskripsikan kolom:

Nama Jenis Deskripsi
type string Jenis respons: "akordeon"
title string Judul akordeon
subtitle string Subtitel akordeon
image objek Gambar
image.src objek Sumber gambar
image.src.rawUrl string URL publik untuk gambar
text string Teks akordeon

Contoh:

{
  "richContent": [
    [
      {
        "type": "accordion",
        "title": "Accordion title",
        "subtitle": "Accordion subtitle",
        "image": {
          "src": {
            "rawUrl": "https://example.com/images/logo.png"
          }
        },
        "text": "Accordion text"
      }
    ]
  ]
}

Jenis respons chip saran

Jenis respons chip saran memberi pengguna akhir daftar chip saran yang dapat diklik.

Screenshot Messenger

Tabel berikut mendeskripsikan kolom:

Nama Jenis Deskripsi
type string Jenis respons: "chip"
options array<object> Array objek Option
options[].text string Teks opsi
options[].image objek Gambar Opsi
options[].image.src objek Sumber gambar opsi
options[].image.src.rawUrl string URL publik opsi untuk gambar
options[].link string Link opsi

Contoh:

{
  "richContent": [
    [
      {
        "type": "chips",
        "options": [
          {
            "text": "Chip 1",
            "image": {
              "src": {
                "rawUrl": "https://example.com/images/logo.png"
              }
            },
            "link": "https://example.com"
          },
          {
            "text": "Chip 2",
            "image": {
              "src": {
                "rawUrl": "https://example.com/images/logo.png"
              }
            },
            "link": "https://example.com"
          }
        ]
      }
    ]
  ]
}

Menggabungkan jenis respons

Setiap elemen rich message untuk Dialogflow Messenger dapat digunakan untuk membuat kartu kustom agar sesuai dengan kebutuhan Anda. Berikut adalah contoh yang menggunakan beberapa elemen yang tercantum di atas:

Screenshot Messenger

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow",
        "subtitle": "Build natural and rich conversational experiences",
        "actionLink": "https://cloud.google.com/dialogflow/docs"
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "link": "https://cloud.google.com/dialogflow/case-studies"
          },
          {
            "text": "Docs",
            "link": "https://cloud.google.com/dialogflow/docs"
          }
        ]
      }
    ]
  ]
}

Proses Debug

Untuk menguji agen Anda dengan Dialogflow Messenger secara lokal:

  • Sematkan elemen Dialogflow Messenger di halaman seperti yang dijelaskan di atas.
  • Memulai server HTTP lokal untuk halaman tersebut dengan port tertentu.
  • Akses halaman tersebut di http://localhost:port_number.