Messenger Dialogflow CX Lama

Integrasi Dialogflow CX Messenger lama menyediakan dialog chat yang dapat disesuaikan untuk agen Anda yang dapat disematkan di situs Anda. Pengguna dapat membuka dan menutup dialog chat sebagai jendela. Saat pengguna membuka dialog chat, dialog tersebut akan muncul di atas konten Anda di sisi kanan bawah layar.

Bermigrasi ke Dialogflow CX Messenger terbaru

Versi terbaru Dialogflow CX Messenger menyediakan autentikasi untuk mengontrol akses kueri agen dan opsi konfigurasi antarmuka pengguna lainnya. Sebaiknya Anda bermigrasi dari versi lama ke versi baru.

Jika Anda mengaktifkan integrasi Dialogflow CX Messenger sebelum 29 Agustus 2023, Anda mungkin menggunakan versi lama. Untuk menentukan apakah Anda menggunakan versi lama, periksa kode HTML messenger yang disematkan di situs Anda. Jika Anda melihat skrip berikut, berarti Anda menggunakan versi lama:

https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1

Untuk bermigrasi ke versi baru, selesaikan langkah-langkah berikut:

  1. Hapus semua kode messenger HTML, CSS, dan JavaScript dari situs Anda.
  2. Ikuti petunjuk untuk integrasi Dialogflow CX Messenger terbaru.

Penyesuaian HTML

Anda dapat menyesuaikan berbagai aspek 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. Kolom ini diisi otomatis dengan ID agen Anda.
chat-icon Opsional Ikon yang digunakan untuk tombol buka dialog chat. Ikon Dialogflow CX adalah ikon default. Kolom ini harus berupa URL publik. Ukuran ikon harus 36 px x 36 px.
chat-title Wajib Judul yang ditampilkan di bagian atas dialog chat. Kolom ini diisi otomatis dengan nama agen Anda.
df-cx Wajib Menunjukkan bahwa interaksi dilakukan dengan agen CX. Gunakan "true" sebagai nilai.
expand Opsional Atribut boolean yang menetapkan dialog chat agar terbuka saat pemuatan halaman. Secara default, dialog chat ditutup saat halaman dimuat.
intent Opsional Peristiwa kustom yang dipanggil saat dialog chat dibuka. Anda dapat menggunakan pengendali peristiwa yang dipanggil untuk peristiwa ini dan menghasilkan pesan agen pertama.
language-code Wajib Kode bahasa default untuk intent pertama. Kolom ini diisi otomatis dengan bahasa default agen.
location Wajib Region agen.
session-id Opsional ID sesi. Jika ID ini tidak diberikan, integrasi akan menghasilkan ID unik untuk setiap dialog chat.
user-id Opsional Memungkinkan Anda melacak pengguna di seluruh sesi. Anda dapat meneruskan nilai ke Dialogflow CX melalui kolom queryParams.payload.userId dalam permintaan deteksi intent, dan Dialogflow CX akan memberikan nilai ini kepada Anda melalui kolom WebhookRequest.payload.userId.
wait-open Opsional Atribut boolean yang menunda peristiwa kustom yang ditentukan dalam atribut intent 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 kolom judul dialog chat.
df-messenger-button-titlebar-font-color Warna font untuk judul di kolom 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 ini akan menghasilkan:

Dialog chat

Peristiwa JavaScript

Dialogflow Messenger memicu berbagai peristiwa yang dapat Anda buatkan pemroses peristiwa.

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 kolom judul. 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
  },
  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

Anda dapat memanggil fungsi yang disediakan oleh elemen df-messenger untuk memengaruhi perilakunya.

renderCustomText

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

Contoh:

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

renderCustomCard

Fungsi ini merender kartu kustom, seolah-olah berasal dari fulfillment Dialogflow CX. Format respons payload kustom ditentukan di bagian Fulfillment.

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();

Fulfillment

Saat membuat fulfillment, Anda dapat membuat Respons Teks dan Payload Kustom. Respons teks digunakan untuk respons agen dasar, dan payload kustom digunakan untuk respons multimedia. Format payload kustom untuk semua jenis respons memiliki struktur dasar berikut:

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

Nilai richContent memungkinkan satu array luar dan beberapa array dalam. Respons dalam array dalam digabungkan dalam satu kartu visual. Jika array luar berisi beberapa array dalam, beberapa kartu akan ditampilkan, satu untuk setiap array dalam.

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

Jenis respons info

Jenis respons info adalah kartu judul yang dapat Anda ketuk atau klik.

Kartu item info

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 dibuka 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.

Kartu deskripsi

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.

Kartu gambar

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 dan label teks yang dapat Anda klik atau sentuh.

Tombol kecil

Tabel berikut menjelaskan kolom:

Nama Jenis Deskripsi
type string Jenis respons: "tombol".
icon objek Ikon untuk tombol.
icon.type string Ikon dari library ikon Material. Ikon defaultnya adalah panah.
icon.color string Kode warna heksadesimal.
text string Teks tombol.
link string URL yang akan dibuka saat tombol diklik.
event objek Peristiwa Dialogflow CX yang dipicu saat tombol diklik.

Contoh:

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

Jenis respons daftar

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

Kartu item daftar

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 CX yang dipicu saat opsi diklik.

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": ""
        }
      },
      {
        "type": "divider"
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "name": ""
        }
      }
    ]
  ]
}

Jenis respons accordion

Jenis respons akordeon adalah kartu kecil yang dapat Anda klik atau sentuh untuk meluaskan dan menampilkan lebih banyak teks.

Kartu akordeon

Tabel berikut menjelaskan kolom:

Nama Jenis Deskripsi
type string Jenis respons: "accordion".
title string Judul akordeon.
subtitle string Subjudul akordeon.
image objek Gambar.
image.src objek Sumber gambar.
image.src.rawUrl string URL publik untuk gambar.
text string Teks untuk 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.

Kartu chip saran

Tabel berikut menjelaskan kolom:

Nama Jenis Deskripsi
type string Jenis respons: "chips".
options array<object> Array objek opsi.
options[].text string Teks untuk opsi.
options[].image objek Gambar opsi.
options[].image.src objek Sumber gambar opsi.
options[].image.src.rawUrl string URL publik opsional untuk gambar.
options[].link string URL 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

Anda dapat menggunakan setiap elemen pesan multimedia untuk Dialogflow CX Messenger guna membuat kartu kustom yang sesuai dengan kebutuhan Anda.

Berikut adalah contoh penggunaan beberapa elemen yang tercantum sebelumnya:

Kartu kustom

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow CX across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow CX",
        "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 secara lokal dengan Dialogflow CX Messenger:

  • Sematkan elemen Dialogflow CX Messenger di halaman seperti yang dijelaskan di bagian Penyesuaian HTML.
  • Mulai server HTTP lokal untuk halaman tersebut dengan port tertentu.
  • Buka http://localhost:port_number untuk mengakses halaman tersebut.