Halaman ini diterjemahkan oleh Cloud Translation API.

Messenger Dialogflow

Integrasi Dialogflow Messenger menyediakan dialog chat yang dapat disesuaikan untuk agen Anda yang dapat disematkan di situs Anda. Dialog chat diterapkan sebagai jendela dialog yang dapat dibuka dan ditutup oleh pengguna akhir Anda. Saat 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:

Buka konsol Dialogflow ES.
Klik Integrations di menu sidebar kiri.
Klik Messenger Dialogflow.
Dialog konfigurasi akan terbuka.
Pilih lingkungan.
Klik Aktifkan.
Salin kode sematan untuk ditempelkan di situs Anda.
Klik Coba Sekarang untuk menguji agen Anda.
Di pojok kanan bawah jendela, akan muncul tombol dengan logo Dialogflow. Klik tombol ini.
Dialog chat akan terbuka dan Anda dapat berinteraksi dengannya.
Tutup dialog chat setelah Anda selesai melakukan pengujian.
Klik Tutup di dialog konfigurasi.

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

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

Penyesuaian HTML

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

Atribut	Kebijakan input	Nilai
`agent-id`	Wajib	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 default. Kolom ini harus berupa URL publik. Ukuran ikon harus 36x36 piksel.
`chat-title`	Wajib	Judul yang ditampilkan di bagian atas dialog chat. Kolom ini diisi otomatis dengan nama agen Anda.
`expand`	Opsional	Atribut Boolean yang menetapkan dialog chat untuk 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 diisi otomatis dengan peristiwa `WELCOME`.
`language-code`	Wajib	Kode bahasa default untuk intent pertama. Kolom ini 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 deteksi intent.
`wait-open`	Opsional	Atribut Boolean yang menunda peristiwa sambutan hingga dialog benar-benar dibuka.

Penyesuaian CSS

Anda dapat menyesuaikan gaya dialog chat dengan menetapkan variabel CSS.

Variabel CSS berikut dapat disediakan:

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 judul dialog chat.
`df-messenger-button-titlebar-font-color`	Warna font untuk judul di 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 di kotak input teks.
`df-messenger-minimized-chat-close-icon-color`	Warna ikon tutup di 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 buat pemroses peristiwa-nya.

Target peristiwa untuk peristiwa ini adalah elemen df-messenger.

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

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

Jenis peristiwa berikut didukung:

`df-accordion-clicked`

Peristiwa ini terjadi saat pengguna mengklik elemen akordeon. Struktur peristiwa akan 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 akan 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 akan 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 di judul jendela. Struktur peristiwa akan 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 akan 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 mengirimkan kode status error. Struktur peristiwa akan 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, bersama dengan df-response-received, dapat digunakan untuk memantau latensi permintaan. Struktur peristiwa akan 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 akan terlihat seperti berikut:

response: detectIntentResponse

`df-user-input-entered`

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

input: string // Text entered by user

Fungsi JavaScript

Elemen df-messenger menyediakan functions 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 yang kaya. Format respons payload kustom ditentukan di bagian Pesan respons yang 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 kaya, Anda dapat membuat Respons Teks dan Payload Kustom dari tab respons Default untuk intent. Respons teks digunakan untuk respons agen dasar, dan payload kustom digunakan untuk respons yang 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",
        ...
      }
    ]
  ]
}

Perhatikan bahwa nilai richContent memungkinkan satu array luar dan beberapa array dalam. Respons dalam array dalam diikat 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 konfigurasikan untuk payload kustom.

Jenis respons info

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

Screenshot Messenger

Tabel berikut menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	string	Jenis respons: "info"
`title`	string	Judul kartu
`subtitle`	string	Subjudul 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 menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	string	Jenis respons: "description"
`title`	string	Judul kartu
`text`	array<string>	Array string, dengan setiap string dirender di 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 menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	string	Jenis respons: "image"
`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.

Tabel berikut menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	string	Jenis respons: "button"
`icon`	objek	Ikon untuk tombol
`icon.type`	string	Ikon dari Library ikon material. Ikon default adalah panah
`icon.color`	string	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": {}
        }
      }
    ]
  ]
}

Mencantumkan 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: "list"
`title`	string	Judul opsi
`subtitle`	string	Subjudul 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: "pemisah"

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 menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	string	Jenis respons: "accordion"
`title`	string	Judul accordion
`subtitle`	string	Subtitel accordion
`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 memberikan daftar chip saran yang dapat diklik kepada pengguna akhir.

Screenshot Messenger

Tabel berikut menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	string	Jenis respons: "chips"
`options`	array<object>	Array objek Opsi
`options[].text`	string	Teks opsi
`options[].image`	objek	Gambar Opsi
`options[].image.src`	objek	Sumber gambar opsi
`options[].image.src.rawUrl`	string	Opsi URL publik 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 pesan multimedia untuk Dialogflow Messenger dapat digunakan untuk membuat kartu kustom yang 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.
Mulai server HTTP lokal untuk halaman tersebut dengan port tertentu.
Akses halaman tersebut di http://localhost:port_number.