ผสานรวมกับเว็บไซต์

หากต้องการขยายขอบเขตการเข้าถึงของตัวแทน Business Messages คุณสามารถเพิ่มจุดแรกเข้าการสนทนาในเว็บไซต์ได้ด้วยวิดเจ็ต Business Messages

วิดเจ็ต Business Messages รองรับเฉพาะอุปกรณ์เคลื่อนที่ที่ใช้ Android 5 ขึ้นไป ไม่รองรับระบบปฏิบัติการบนอุปกรณ์เคลื่อนที่และสภาพแวดล้อมเดสก์ท็อปอื่นๆ

เพิ่มวิดเจ็ต Business Messages ลงในเว็บไซต์

หากต้องการเปิดใช้การสนทนาจากเว็บไซต์ คุณจะต้องโหลดไลบรารี JavaScript ของ Business Messages กําหนดค่าตําแหน่งวิดเจ็ตในหน้าเว็บ และระบุค่าบริบทภายในวิดเจ็ต

ดูรายการฟังก์ชัน พร็อพเพอร์ตี้ และเหตุการณ์ความพร้อมใช้งานได้ที่วิดเจ็ต Business Messages ดูคําแนะนําเกี่ยวกับการจัดรูปแบบและการใช้งานได้ในคู่มือรูปแบบวิดเจ็ต Business Messages

สร้างวิดเจ็ต

อัปเดตค่าต่อไปนี้เพื่อสร้างวิดเจ็ต Business Messages เพื่อแทรกลงในเว็บไซต์

ค่า คำอธิบาย
LAYOUT ปุ่มนี้ปรากฏบนเว็บไซต์ของคุณ อาจเป็น button, floating, inline หรือ advanced ก็ได้ หากต้องการใช้สไตล์ของคุณเอง ให้ใช้ advanced คัดลอกสไตล์ชีตไปยังหน้าเว็บของคุณ และแก้ไขตามต้องการ
AGENT_ID รหัสตัวแทน
BUTTON_TEXT ข้อความที่ต้องการให้ ปุ่มแสดง 
    <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>

วิดเจ็ตตัวอย่าง

วิดเจ็ต ตัวอย่างวิดเจ็ตเว็บ นี้สร้างโดยโค้ดต่อไปนี้

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

การปรับแต่งการผสานรวมวิดเจ็ต Business Messages

โหลดไลบรารี JavaScript

หากต้องการโหลดไลบรารี JavaScript ของ Business Messages ให้คัดลอกโค้ดต่อไปนี้แล้ววางลงในแท็ก <head> ในทุกๆ หน้าที่คุณต้องการแสดงวิดเจ็ต Business Messages และต้องใช้ไลบรารี JavaScript เพียง 1 รายการต่อหน้า

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

ข้อมูลโค้ดจะดาวน์โหลดและโหลดไลบรารี JavaScript ซึ่งจะเริ่มต้นองค์ประกอบของหน้าเว็บที่มีอยู่ด้วยแอตทริบิวต์ data-bm-widget-agent-id ไลบรารี JavaScript จะแปลงองค์ประกอบของหน้าเว็บที่ระบุเป็นองค์ประกอบที่คลิกได้ซึ่งโหลดแพลตฟอร์มการสนทนาของ Business Messages เมื่อแตะ

พารามิเตอร์ cb ที่ไม่บังคับมีชื่อของฟังก์ชันที่จะเรียกใช้โดยอัตโนมัติเมื่อไลบรารี JavaScript โหลด

กําหนดค่าตําแหน่งวิดเจ็ต

เมื่อไลบรารี JavaScript ของ Business Messages โหลดขึ้น ระบบจะสแกนเว็บไซต์เพื่อหาองค์ประกอบที่มีแอตทริบิวต์ data-bm-widget-agent-id และแปลงองค์ประกอบเหล่านี้เป็นวิดเจ็ต Business Messages ที่แตะได้ ทุกองค์ประกอบที่ต้องการแปลงเป็นวิดเจ็ตต้องมีแอตทริบิวต์ data-bm-widget-agent-id พร้อมค่าที่สอดคล้องกับรหัสตัวแทนสําหรับตัวแทนที่เปิดใช้งาน

ตัวอย่าง: คําจํากัดความของวิดเจ็ต

<!-- 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>

ส่งค่าบริบท

หากต้องการกําหนดค่าบริบทของวิดเจ็ตและส่งไปยังเว็บฮุค ให้ใส่แอตทริบิวต์ data-bm-widget-context ที่ไม่บังคับในองค์ประกอบ HTML ที่มีแอตทริบิวต์ data-bm-widget-agent-id ระบุค่าสตริงสําหรับ data-bm-widget-context ข้อความที่ส่งไปยังเว็บฮุคจะมีค่าบริบท

data-bm-widget-context มีค่าใดก็ได้ เช่น ค่าที่เกี่ยวข้องกับตําแหน่งที่วิดเจ็ตแสดงที่รันไทม์ในหน้าเว็บ ในตัวอย่างต่อไปนี้ ค่าแอตทริบิวต์ของ "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" เป็นสตริง JSON ที่เข้ารหัสฐาน 64 ของ {"product":"dryer","offer-code":"ASDADSA"}

data-bm-widget-context มีขนาดไม่เกิน 512 ไบต์

ตัวอย่าง: คําจํากัดความของวิดเจ็ตพร้อมบริบท

<!-- 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>

เว็บไซต์ตัวอย่าง

ตัวอย่างต่อไปนี้จะโหลดไลบรารี JavaScript ของ Business Messages ภายในแท็ก <head> ซึ่งจะสแกนหน้า HTML และแปลง "myagentid" เป็นวิดเจ็ต 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>

การเริ่มต้นวิดเจ็ตแบบเป็นโปรแกรม

สําหรับการควบคุมการตั้งค่าอย่างละเอียด คุณอาจเลือกเริ่มต้นวิดเจ็ตแบบเป็นโปรแกรม หากต้องการเริ่มต้นองค์ประกอบโดยใช้โปรแกรม ให้เรียกใช้ bmwidget.init หลังจากไลบรารี JavaScript ของ Business Messages โหลดขึ้น การเริ่มต้นรูปแบบของรูปแบบนี้ไม่บังคับให้คุณทําเครื่องหมายองค์ประกอบด้วยแอตทริบิวต์ 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>

ตรวจสอบการรองรับอุปกรณ์

ใช้ window.bmwidget.supported เพื่อยืนยันการรองรับ Business Messages สําหรับอุปกรณ์ ตัวอย่างต่อไปนี้ตรวจสอบการสนับสนุนอุปกรณ์ก่อนเริ่มต้นองค์ประกอบ HTML ด้วยรหัส ID "myCustomButton" เป็นวิดเจ็ต 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>

การเริ่มต้นวิดเจ็ตสําหรับแอปพลิเคชันหน้าเว็บเดียว

สําหรับแอปพลิเคชันแอปพลิเคชันหน้าเว็บเดียว ที่มีการสร้างแอตทริบิวต์ data-bm-widget-agent-id ขณะรันไทม์ ไลบรารี JavaScript ของ Business Messages จะค้นหาออบเจ็กต์ส่วนกลาง window.bmwidget

เมื่อใดก็ตามที่มีการเพิ่มองค์ประกอบใหม่ลงในหน้าเว็บ ให้เรียกใช้ window.bmwidget.scan() เพื่อเริ่มต้นองค์ประกอบใหม่เป็นวิดเจ็ต Business Messages

window.bmwidget.scan();

เรียก window.bmwidget.scan() ในการเรียกกลับสําหรับอัปเดต DOM เพื่อให้แน่ใจว่าแอตทริบิวต์ data-bm-widget-agent-id จะเริ่มต้นอีกครั้งเมื่อหน้าเว็บเปลี่ยนสถานะ

ตัวอย่าง Angular

โค้ดต่อไปนี้เริ่มต้น window.bmwidget.scan() ในระหว่างคอมโพเนนต์เรียกกลับของคอมโพเนนต์ใน Angular

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

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

ตัวอย่างการโต้ตอบ

โค้ดต่อไปนี้จะเริ่มฟังก์ชัน window.bmwidget.scan() ในระหว่างการแสดงผลขององค์ประกอบใน 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>);
}

ขั้นตอนถัดไป

เมื่อรวมวิดเจ็ต Business Messages เข้ากับเว็บไซต์แล้ว คุณจะเริ่มการสนทนา Business Messages จากเว็บไซต์และรับ ค่าบริบทเฉพาะวิดเจ็ตในข้อความจากผู้ใช้ได้