Mengintegrasikan dengan situs

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

Widget Business Messages hanya mendukung perangkat seluler yang menjalankan Android 5 atau yang lebih baru. Sistem operasi seluler dan lingkungan desktop lainnya tidak didukung.

Menambahkan widget Business Messages ke situs

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

Untuk daftar fungsi, properti, dan peristiwa ketersediaan, lihat bagian Bisnis Pesan . Lihat panduan gaya widget Business Messages untuk mendapatkan rekomendasi dalam penataan gaya dan gunakan.

Membuat widget

Perbarui nilai berikut untuk membuat widget Business Messages yang akan disisipkan ke dalam {i>website<i} Anda.

Nilai Deskripsi
LAYOUT Cara tombol muncul {i>website<i} Anda. Dapat berupa button, floating, inline, atau advanced. Kepada gunakan gaya Anda sendiri, gunakan advanced, salin stylesheet ke halaman web Anda, dan mengubahnya sesuai kebutuhan.
AGENT_ID ID Agen Anda.
BUTTON_TEXT Teks yang akan Anda seperti tombol yang 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 Pratinjau widget web ini 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 langsung dalam tag <head> di setiap halaman tempat Anda ingin menampilkan widget Business Messages. Anda hanya memerlukan satu library JavaScript penyertaan 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 mendownload dan memuat library JavaScript, yang akan melakukan inisialisasi elemen halaman yang sudah ada dengan atribut data-bm-widget-agent-id. Tujuan 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 dipanggil secara otomatis setelah library JavaScript dimuat.

Mengonfigurasi penempatan widget

Saat library JavaScript Business Messages dimuat, library akan memindai situs untuk menemukan elemen dengan atribut data-bm-widget-agent-id dan mengonversi elemen ini menjadi widget Business Messages yang dapat diketuk. Setiap elemen yang ingin Anda konversi untuk widget harus menyertakan atribut data-bm-widget-agent-id dengan nilai yang sesuai dengan ID agen untuk agen yang Anda luncurkan.

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 Anda, sertakan atribut opsional Atribut data-bm-widget-context dalam elemen HTML yang berisi Atribut data-bm-widget-agent-id. Menentukan nilai string untuk data-bm-widget-context. Pesan yang dikirim ke webhook Anda menyertakan konteks dengan sejumlah nilai.

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

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 contoh

Contoh berikut memuat library JavaScript Business Messages dalam Tag <head>, yang kemudian otomatis memindai halaman HTML dan melakukan konversi &quot;myagentid&quot; ke dalam 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 menginisialisasi secara terprogram. Untuk menginisialisasi elemen secara terprogram, panggil bmwidget.init setelah library JavaScript Business Messages dimuat. Bentuk tidak mengharuskan Anda 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 pemeriksaan berikut untuk dukungan perangkat sebelum melakukan inisialisasi 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, dengan 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 melakukan inisialisasi elemen baru sebagai widget Business Messages.

window.bmwidget.scan();

Panggil window.bmwidget.scan() pada callback pembaruan DOM untuk memastikan Atribut data-bm-widget-agent-id melakukan inisialisasi ulang saat halaman mengubah statusnya.

Contoh Angular

Kode berikut menginisialisasi window.bmwidget.scan() selama 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 Anda dan terima nilai konteks khusus widget dalam pesan dari pengguna.