เราจะยุติการให้บริการ Google Business Messages ในวันที่ 31 กรกฎาคม 2024 อ่านเพิ่มเติมที่นี่

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

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

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

ดูรายการฟังก์ชันความพร้อมใช้งาน พร็อพเพอร์ตี้ และเหตุการณ์ได้ที่ธุรกิจ ข้อความ วิดเจ็ต โปรดดู คู่มือแนะนำรูปแบบวิดเจ็ต 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 อาจมีค่าใดก็ได้ เช่น ค่า จะสัมพันธ์กับตำแหน่งที่แสดงวิดเจ็ตขณะรันไทม์บนหน้าเว็บ ในรายการต่อไปนี้ เช่น ค่าแอตทริบิวต์ของ "eyJwcm9kdWN0IjoiZHJ5ZXILCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" เป็น สตริง 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 "ปุ่มที่กำหนดเองของฉัน" เป็นวิดเจ็ต 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() ใน Callback การอัปเดต DOM เพื่อให้แน่ใจว่า แอตทริบิวต์ data-bm-widget-agent-id จะเริ่มต้นใหม่เมื่อหน้าเปลี่ยนสถานะ

ตัวอย่าง Angular

โค้ดต่อไปนี้จะเริ่มต้น window.bmwidget.scan() ระหว่างการโหลดคอมโพเนนต์ Callback ใน 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 จากเว็บไซต์ รับ ค่าบริบทเฉพาะวิดเจ็ตในข้อความจากผู้ใช้