Messenger Dialogflow CX

Integrasi ini menyediakan dialog chat yang dapat disesuaikan untuk agen Anda yang dapat disematkan di situs Anda.

Screenshot Messenger Dialogflow

Penyiapan

Integrasi ini dapat mengizinkan akses kueri agen pengguna akhir yang diautentikasi atau tidak diautentikasi.

Penyiapan yang tidak diautentikasi

Untuk menyiapkan akses yang tidak diautentikasi ke agen Messenger Dialogflow CX:

  1. Buka konsol Dialogflow CX.
  2. Pilih project Google Cloud Anda.
  3. Pilih agen Anda.
  4. Pilih tab Kelola.
  5. Klik Integrations di menu sidebar kiri.
  6. Klik Connect di Dialogflow CX Messenger.
  7. Dialog konfigurasi akan terbuka.
  8. Jika integrasi sebelumnya disiapkan untuk agen ini, Anda akan melihat kode HTML yang dapat disematkan. Terlepas dari apakah Anda menginginkan autentikasi atau tidak, klik tombol Disable... di bagian bawah dialog, sehingga Anda dapat mengonfigurasi ulang setelan di langkah berikutnya.
  9. Pilih Environment.
  10. Pilih Unauthenticated API.
  11. Pilih gaya.
  12. Membatasi akses domain secara opsional.
  13. Klik Enable the unauthenticated API.
  14. Dialog akan menampilkan kode HTML yang dapat disematkan yang dapat disematkan di situs Anda. Salin kode ini.
  15. Klik Done.

Penyiapan yang diautentikasi

Untuk menyiapkan akses yang diautentikasi ke agen Messenger Dialogflow CX:

  1. Buka konsol Dialogflow CX.
  2. Pilih project Google Cloud Anda.
  3. Pilih agen Anda.
  4. Pilih tab Kelola.
  5. Klik Integrations di menu sidebar kiri.
  6. Klik Connect di Dialogflow CX Messenger.
  7. Dialog konfigurasi akan terbuka.
  8. Jika integrasi sebelumnya disiapkan untuk agen ini, Anda akan melihat kode HTML yang dapat disematkan. Terlepas dari apakah Anda menginginkan autentikasi atau tidak, klik tombol Disable... di bagian bawah dialog, sehingga Anda dapat mengonfigurasi ulang setelan di langkah berikutnya.
  9. Pilih Environment.
  10. Pilih Authorized API.
  11. Pilih gaya.
  12. Membatasi akses domain secara opsional.
  13. Klik Enable the authorized API.
  14. Dialog akan menampilkan kode HTML yang dapat disematkan yang dapat disematkan di situs Anda. Salin kode ini.
  15. Klik Done.
  16. Siapkan klien OAuth:
    1. Buat layar izin OAuth untuk organisasi Anda. Tambahkan ./auth/cloud-platform sebagai cakupan yang diperlukan.
    2. Buat Client ID OAuth 2.0. Di bagian Asal JavaScript resmi, tentukan origin HTTP yang diizinkan untuk menghosting dan mengkueri agen Anda. Misalnya, https://your-company.com.
    3. Berikan izin kepada pengguna akhir untuk membuat kueri agen Anda. Tambahkan setiap pengguna akhir atau grup sebagai akun utama dengan peran Dialogflow API Client dan Service Usage Consumer.

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.

Jika Anda menggunakan integrasi yang diautentikasi, tetapkan atribut oauth-client-id untuk <df-messenger> ke client ID Oauth Anda. Selain itu, jika Anda ingin menggunakan identitas pengguna akhir untuk autentikasi alat, tetapkan atribut access-token-name dengan nama apa pun yang Anda inginkan. Kemudian, gunakan Token Pembawa dengan nilai $session.params.ACCESS_TOKEN_NAME untuk autentikasi alat.

Perbarui atribut lain yang perlu diperbarui.

Untuk memungkinkan tata letak responsif, tambahkan juga hal berikut ke elemen <head> Anda:

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

Penyesuaian

Ada banyak penyesuaian HTML dan penyesuaian CSS yang dapat Anda terapkan untuk memengaruhi tampilan dan perilaku dialog chat.

JavaScript

Ada banyak peristiwa JavaScript dan fungsi JavaScript yang dapat Anda gunakan untuk berinteraksi dengan dialog chat.

Contoh

Contoh berikut menunjukkan penyesuaian HTML, penyesuaian CSS, dan penanganan peristiwa JavaScript:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>My chat</title>
  <style>
    df-messenger {
      /*
       * Customize as required. df-messenger will fill the
       * space that is provided.
      */
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 320px;
    }
  </style>
  <script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
</head>
<body>
<df-messenger
    location="global" <!-- TODO: update agent location as needed -->
    project-id="my-project-id" <!-- TODO: update project ID -->
    agent-id="my-agent-id" <!-- TODO: update agent ID -->
    language-code="en" <!-- TODO: update agent language as needed -->
>
  <df-messenger-chat
      chat-title="Agent Name" <!-- TODO: update dialog title as needed -->
  ></df-messenger-chat>
</df-messenger>

<script>
  // An example of handling events: Navigate to the first suggested URL.
  document.addEventListener('df-url-suggested', (event) => {
    if (Array.isArray(event.detail.suggestedUrls) &&
      event.detail.suggestedUrls.length) {
      window.location.href = event.detail.suggestedUrls[0];
  }
});
</script>
</body>
</html>

Fulfillment

Ada banyak jenis respons fulfillment yang dapat Anda gunakan untuk respons agen.

Menjawab Masukan

Jika masukan jawaban diaktifkan, dialog chat akan menambahkan tombol suka dan tidak suka ke antarmuka pengguna secara default. Selama percakapan, pengguna akhir dapat mengklik tombol ini untuk memberikan masukan tentang respons agen. Jika pengguna memilih tidak suka, mereka dapat memberikan alasan untuk masukan negatif secara opsional.

Komponen Masukan Kustom

Untuk menentukan elemen masukan kustom, elemen kustom baru harus ditentukan di situs. Untuk mengirimkan masukan, elemen harus memunculkan peristiwa df-custom-submit-feedback-clicked. Kolom detail yang dimuat harus berupa string.

class CustomFeedbackElement extends HTMLElement {
  constructor() {
    super();
    // It is not strictly required but recommended to contain the custom
    // element in a shadow root.
    this.renderRoot = this.attachShadow({mode: 'open'});
  }

  // Web component Lifecycle method.
  connectedCallback() {
    const wrapper = document.createElement('div');

    // Build the component as required.
    const button = document.createElement('button');
    button.innerText = 'Submit';
    button.addEventListener('click', () => {
      this._onSubmitClick();
    });
    wrapper.appendChild(button);

    this.renderRoot.appendChild(wrapper);
  }

  // Called when Submit button is clicked.
  _onSubmitClick() {
    const event = new CustomEvent("df-custom-submit-feedback-clicked", {
      // `detail` may be any string,
      // this will be sent to the backend to be stored.
      detail: JSON.stringify({
        "usefulness": 2,
        "accuracy": 3,
      }),
      // Required to propagate up the DOM tree
      // https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles
      bubbles: true,
      // Required to propagate across ShadowDOM
      // https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
      composed: true,
   });
   this.dispatchEvent(event);
  }
}

(function() {
  // Registers the element. This name must be "df-external-custom-feedback".
  customElements.define('df-external-custom-feedback', CustomFeedbackElement);
})();

Proses Debug

Untuk menguji agen Anda dengan Dialogflow CX Messenger secara lokal:

  • Sematkan elemen Messenger Dialogflow CX 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.