Dialogflow Messenger

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

Screenshot Dialogflow Messenger

Penyiapan

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

Penyiapan yang tidak diautentikasi

Untuk menyiapkan akses tanpa autentikasi ke agen Dialogflow Messenger Anda:

  1. Buka Dialogflow CX Console.
  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 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 apa yang diautentikasi atau tidak diautentikasi, klik tombol Disable... di bagian bawah dialog, sehingga Anda dapat mengonfigurasi ulang setelan pada langkah berikutnya.
  9. Pilih Environment.
  10. Pilih UnAuthenticationd API.
  11. Pilih gaya.
  12. Anda juga dapat membatasi akses domain.
  13. Klik Aktifkan API yang tidak diautentikasi.
  14. Dialog tersebut akan menampilkan kode HTML yang dapat disematkan di situs web Anda. Salin kode ini.
  15. Klik Done.

Penyiapan terautentikasi

Untuk menyiapkan akses terautentikasi ke agen Dialogflow Messenger Anda:

  1. Buka Dialogflow CX Console.
  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 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 apa yang diautentikasi atau tidak diautentikasi, klik tombol Disable... di bagian bawah dialog, sehingga Anda dapat mengonfigurasi ulang setelan pada langkah berikutnya.
  9. Pilih Environment.
  10. Pilih Authorized API.
  11. Pilih gaya.
  12. Anda juga dapat membatasi akses domain.
  13. Klik Aktifkan API yang diotorisasi.
  14. Dialog tersebut akan menampilkan kode HTML yang dapat disematkan di situs web 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 wajib.
    2. Buat Client ID OAuth 2.0. Pada bagian Asal JavaScript resmi, tentukan asal HTTP yang diizinkan untuk menghosting dan membuat kueri agen Anda. Misalnya, https://your-company.com.
    3. Berikan izin kepada pengguna akhir untuk mengkueri agen Anda. Tambahkan setiap pengguna akhir atau grup sebagai akun utama dengan peran Klien Dialogflow API.

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.

Jika Anda menggunakan integrasi yang diautentikasi, tetapkan atribut oauth-client-id untuk <df-messenger> ke client ID Oauth Anda.

Mengupdate atribut lain yang perlu diupdate.

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>

Pemenuhan pemesanan

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

Jawab Masukan

Jika masukan jawaban diaktifkan, secara default dialog chat akan menambahkan tombol suka dan tidak suka ke antarmuka pengguna. 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 tersebut.

Komponen Masukan Kustom

Untuk menentukan elemen masukan kustom, elemen kustom baru harus ditentukan di situs. Untuk mengirim masukan, elemen harus memunculkan peristiwa df-custom-submit-feedback-clicked. Kolom detail yang ada 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 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.