Mengintegrasikan dengan situs

Untuk memperluas jangkauan agen Business Messages, Anda dapat menambahkan titik entri percakapan di situs dengan widget Business Messages.

Widget Business Messages hanya mendukung perangkat seluler dengan Android 5+. Sistem operasi seluler dan lingkungan desktop lainnya tidak didukung.

Menambahkan widget Business Messages ke situs

Untuk mengaktifkan percakapan dari situs, Anda memuat library JavaScript Business Messages, mengonfigurasi penempatan widget di halaman, dan menentukan nilai konteks dalam widget.

Untuk mengetahui daftar fungsi ketersediaan, properti, dan peristiwa, lihat widget Business Messages. Lihat panduan gaya widget Business Messages untuk rekomendasi terkait gaya dan penggunaan.

Membuat widget

Perbarui nilai berikut untuk membuat widget Business Messages yang akan disisipkan ke dalam situs Anda.

Nilai Deskripsi
LAYOUT Tampilan tombol di situs Anda. Dapat berupa button, floating, inline, atau advanced. Untuk menggunakan gaya Anda sendiri, gunakan advanced, salin stylesheet ke halaman web, dan ubah sesuai kebutuhan.
AGENT_ID ID Agen Anda.
BUTTON_TEXT Teks yang Anda inginkan oleh tombol untuk ditampilkan. 
    <script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
    <button data-bm-widget-layout="LAYOUT" data-bm-widget-agent-id="AGENT_ID">
      <span class="bm-widget-button-text">BUTTON_TEXT</span>
    </button>

Contoh widget

Widget ini Pratinjau widget web dibuat oleh kode berikut:

    <script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
    <button data-bm-widget-layout="button" data-bm-widget-agent-id="abcdefghijkl">
      <span class="bm-widget-button-text">Chat with us</span>
    </button>

Menyesuaikan integrasi widget Business Messages

Memuat library JavaScript

Untuk memuat library JavaScript Business Messages, salin kode berikut dan tempelkan segera dalam tag <head> di setiap halaman tempat Anda ingin menampilkan widget Business Messages. Anda hanya memerlukan satu penyertaan library JavaScript per halaman.

<!-- Global Business Messages widget library reference - Business Messages -->
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=callback">
</script>

Cuplikan ini mendownload dan memuat library JavaScript, yang menginisialisasi elemen halaman yang ada dengan atribut data-bm-widget-agent-id. Library JavaScript mengonversi elemen halaman yang diidentifikasi menjadi elemen yang dapat diklik yang memuat platform percakapan Business Messages saat diketuk.

Parameter cb opsional berisi nama fungsi yang secara otomatis dipanggil setelah library JavaScript dimuat.

Mengonfigurasi penempatan widget

Saat library JavaScript Business Messages dimuat, library akan memindai situs untuk mengetahui elemen dengan atribut data-bm-widget-agent-id dan mengonversi elemen tersebut menjadi widget Business Messages yang dapat diketuk. Setiap elemen yang ingin dikonversi ke widget harus menyertakan atribut data-bm-widget-agent-id dengan nilai yang sesuai dengan ID agen untuk agen yang diluncurkan.

Contoh: Definisi widget

<!-- Example div element that converts into a Business Messages widget -->
<div data-bm-widget-agent-id="myagentid">
  Click for Business Messages
</div>

<!-- Example button element that converts into a Business Messages widget -->
<button data-bm-widget-agent-id="myagentid">
  Click for Business Messages
</button>

Meneruskan nilai konteks

Untuk mengonfigurasi konteks widget dan meneruskannya ke webhook, sertakan atribut data-bm-widget-context opsional dalam elemen HTML yang berisi atribut data-bm-widget-agent-id. Tentukan nilai string untuk data-bm-widget-context. Pesan yang dikirim ke webhook Anda menyertakan nilai konteks.

data-bm-widget-context dapat memiliki nilai apa pun, seperti nilai yang relevan dengan tempat widget ditampilkan saat runtime di halaman. Pada contoh berikut, nilai atribut "eyJwcm9kdWN0IjoiZHJ5MXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" adalah string JSON berenkode base64 dari {"product":"dryer","offer-code":"ASDADSA"}.

data-bm-widget-context memiliki batas 512 byte.

Contoh: Definisi widget dengan konteks

<!-- Example div element that converts into a Business Messages widget -->
<div
  data-bm-widget-agent-id="myagentid"
  data-bm-widget-context="eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==">
  Click for Business Messages
</div>

<!-- Example button element that converts into a Business Messages widget -->
<button
  data-bm-widget-agent-id="myagentid"
  data-bm-widget-context="eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==">
  Click for Business Messages
</button>

Situs sampel

Contoh berikut memuat library JavaScript Business Messages dalam tag <head>, yang kemudian otomatis memindai halaman HTML dan mengonversi "myagentid" menjadi widget Business Messages.

<html>
  <head>
    <script
      crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js">
    </script>
  </head>
  <body>
    This is a test widget:
    <div
      data-bm-widget-agent-id="myagentid"
      data-bm-widget-context="eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==">
      Click for Business Messages
    </div>
    Click it.
    And this is a widget:
    <button
      data-bm-widget-agent-id="myagentid"
      data-bm-widget-context="VGhpcyBpcyBhIGJ1dHRvbiB0ZXN0Lgo=">
      Click for Business Messages
    </button>
  </body>
</html>

Inisialisasi widget terprogram

Untuk kontrol terperinci atas penyiapan, Anda dapat memilih untuk menginisialisasi widget secara terprogram. Untuk menginisialisasi elemen secara terprogram, panggil bmwidget.init setelah library JavaScript Business Messages dimuat. Bentuk inisialisasi ini tidak mengharuskan Anda untuk menandai elemen dengan atribut data-bm-widget-agent-id.

<head>
  <!-- Global Business Messages widget library reference - Business Messages -->
  <script
    crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=initWidget">
  </script>

  <script type="text/javascript">
    // Convert HTML element with ID = myCustomButton into a Business Messages widget
    function initWidget() {
      window.bmwidget.init(document.getElementById('myCustomButton'), {
        'agentId': 'myagentid',
        'context': 'eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg=='
      });
    };
  </script>
</head>

Periksa dukungan perangkat

Gunakan window.bmwidget.supported untuk memverifikasi dukungan Business Messages untuk perangkat. Contoh berikut memeriksa dukungan perangkat sebelum menginisialisasi elemen HTML dengan ID "myCustomButton" sebagai widget Business Messages.

<head>
  <!-- Global Business Messages widget library reference - Business Messages -->
  <script
    crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=initWidget">
  </script>

  <script type="text/javascript">
    // Convert HTML element with ID = myCustomButton into a Business Messages widget
    function initWidget() {
      // Check that the user has a supported device
      if (window.bmwidget.supported) {
        window.bmwidget.init(document.getElementById('myCustomButton'), {
          'agentId': 'myagentid',
          'context': 'eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg=='
        });
      }
    };
  </script>
</head>

Inisialisasi widget untuk Aplikasi Web Satu Halaman

Untuk aplikasi Aplikasi Web Satu Halaman, tempat atribut data-bm-widget-agent-id dibuat saat runtime, library JavaScript Business Messages mengekspos objek global window.bmwidget.

Setiap kali elemen baru ditambahkan ke halaman, panggil window.bmwidget.scan() untuk menginisialisasi elemen baru sebagai widget Business Messages.

window.bmwidget.scan();

Panggil window.bmwidget.scan() pada callback update DOM untuk memastikan atribut data-bm-widget-agent-id diinisialisasi ulang saat halaman mengubah statusnya.

Contoh Angular

Kode berikut menginisialisasi window.bmwidget.scan() selama callback pemuatan komponen di Angular.

import { Component, OnInit} from '@angular/core';

export class AppComponent implements onInit {
  ngOnInit() {
    // Initialize tag on re-render
    window.bmwidget.scan();
  }
}

Contoh React

Kode berikut menginisialisasi fungsi window.bmwidget.scan() selama rendering elemen di React.

import React, { useState, useEffect } from 'react';

function WrapperComponent() {
  ...
  useEffect(() => {
    // Initialize on re-render
    window.bmwidget.scan();
  });

  return (<div><button data-bm-widget-agent-id="myagentid">Chat with us</button></div>);
}

Langkah berikutnya

Setelah mengintegrasikan widget Business Messages dengan situs, Anda dapat memulai percakapan Business Messages dari situs dan menerima nilai konteks khusus widget dalam pesan dari pengguna.