Trang này được dịch bởi Cloud Translation API.

Tích hợp với trang web

Để mở rộng phạm vi tiếp cận của nhân viên hỗ trợ Business Messages, bạn có thể thêm các điểm truy cập vào cuộc trò chuyện trên trang web của mình bằng tiện ích Business Messages.

Tiện ích Business Messages chỉ hỗ trợ thiết bị di động chạy Android 5 trở lên. Hệ điều hành trên thiết bị di động và môi trường máy tính để bàn khác không được hỗ trợ.

Thêm tiện ích Business Messages vào trang web

Để bật các cuộc trò chuyện trên một trang web, bạn tải thư viện JavaScript của Business Messages, định cấu hình vị trí tiện ích trên trang và chỉ định các giá trị ngữ cảnh trong tiện ích.

Để biết danh sách các hàm, thuộc tính và sự kiện có sẵn, hãy xem tiện ích Business Messages. Hãy xem hướng dẫn về kiểu của tiện ích Business Messages để biết các đề xuất về định kiểu và sử dụng.

Tạo tiện ích

Cập nhật các giá trị sau để tạo tiện ích Business Messages để chèn vào trang web.

Giá trị	Mô tả
`LAYOUT`	Cách nút xuất hiện trên trang web của bạn. Có thể là `button`, `floating`, `inline` hoặc `advanced`. Để sử dụng kiểu của riêng bạn, hãy sử dụng `advanced`, sao chép biểu định kiểu vào trang web và sửa đổi theo yêu cầu.
`AGENT_ID`	Mã nhân viên hỗ trợ của bạn.
`BUTTON_TEXT`	Văn bản mà bạn muốn nút hiển thị.

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

Ví dụ về tiện ích

Tiện ích Xem trước tiện ích trên web này được tạo bởi mã sau đây:

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

Tuỳ chỉnh việc tích hợp tiện ích Business Messages

Tải thư viện JavaScript

Để tải thư viện JavaScript của Business Messages, hãy sao chép mã sau đây rồi dán ngay trong thẻ <head> trên mọi trang mà bạn muốn hiện tiện ích Business Messages. Bạn chỉ cần sử dụng một thư viện JavaScript cho mỗi trang.

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

Đoạn mã này sẽ tải và tải thư viện JavaScript để khởi chạy các phần tử trang hiện có bằng thuộc tính data-bm-widget-agent-id. Thư viện JavaScript sẽ chuyển đổi các phần tử trang đã xác định thành các phần tử có thể nhấp để tải nền tảng trò chuyện của Business Messages khi nhấn vào.

Tham số cb không bắt buộc chứa tên của hàm được tự động gọi khi thư viện JavaScript tải.

Định cấu hình vị trí tiện ích

Khi tải thư viện JavaScript của Business Messages, thư viện này sẽ quét trang web để tìm các phần tử có thuộc tính data-bm-widget-agent-id và chuyển đổi các phần tử này thành các tiện ích có thể nhấn vào Business Messages. Mọi phần tử mà bạn muốn chuyển đổi thành tiện ích phải bao gồm thuộc tính data-bm-widget-agent-id có giá trị tương ứng với mã nhân viên hỗ trợ cho nhân viên hỗ trợ mà bạn đã khởi chạy.

Ví dụ: Định nghĩa tiện ích

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

Chuyển các giá trị bối cảnh

Để định cấu hình ngữ cảnh tiện ích và chuyển tiện ích đó vào webhook, hãy thêm thuộc tính data-bm-widget-context không bắt buộc vào phần tử HTML chứa thuộc tính data-bm-widget-agent-id. Chỉ định một giá trị chuỗi cho data-bm-widget-context. Thông báo được gửi tới webhook của bạn bao gồm giá trị ngữ cảnh.

data-bm-widget-context có thể có bất kỳ giá trị nào, chẳng hạn như giá trị liên quan đến vị trí của tiện ích xuất hiện trong thời gian chạy trên trang. Trong các ví dụ sau, giá trị thuộc tính của "eyJWCm9kdWN0IjoiZHJ5XSIiLCJvZmZlci1cpm2RlIjoiQVNEQURTQSJ9Cg==" là một chuỗi JSON được mã hoá dạng base64 của {"product":"dryer","offer-code":"ASDADSA"}.

data-bm-widget-context có giới hạn là 512 byte.

Ví dụ: Định nghĩa tiện ích kèm theo ngữ cảnh

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

Trang web mẫu

Mẫu sau đây sẽ tải thư viện JavaScript của Business Messages trong thẻ <head>, sau đó tự động quét trang HTML và chuyển đổi "myagentid" thành các tiện ích của 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>

Khởi chạy tiện ích có lập trình

Để kiểm soát chi tiết chế độ thiết lập, bạn có thể chọn khởi chạy tiện ích theo phương thức lập trình. Để khởi chạy một phần tử theo phương thức lập trình, hãy gọi bmwidget.init sau khi thư viện JavaScript của Business Messages tải xong. Hình thức khởi chạy này không yêu cầu bạn đánh dấu các phần tử bằng thuộc tính 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>

Kiểm tra xem thiết bị có hỗ trợ không

Sử dụng window.bmwidget.supported để xác minh tính năng hỗ trợ Business Messages cho một thiết bị. Mẫu sau đây sẽ kiểm tra tính năng hỗ trợ thiết bị trước khi khởi tạo phần tử HTML có mã "myCustomButton" là tiện ích tin nhắn cho doanh nghiệp.

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

Khởi chạy tiện ích cho Ứng dụng trang đơn

Đối với ứng dụng Ứng dụng trang đơn, trong đó thuộc tính data-bm-widget-agent-id được tạo trong thời gian chạy, thư viện JavaScript của Business Messages sẽ hiển thị đối tượng toàn cục window.bmwidget.

Bất cứ khi nào một phần tử mới được thêm vào trang, hãy gọi window.bmwidget.scan() để khởi tạo phần tử mới dưới dạng một tiện ích Business Messages.

window.bmwidget.scan();

Gọi window.bmwidget.scan() trên lệnh gọi lại cập nhật DOM để đảm bảo thuộc tính data-bm-widget-agent-id khởi chạy lại khi trang thay đổi trạng thái.

Ví dụ về góc

Mã sau đây khởi chạy window.bmwidget.scan() trong lệnh gọi lại thành phần tải trong Angular.

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

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

Ví dụ phản ứng

Mã sau đây khởi chạy hàm window.bmwidget.scan() trong quá trình kết xuất của một phần tử trong 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>);
}

Các bước tiếp theo

Giờ đây, khi đã tích hợp tiện ích Business Messages với trang web, bạn có thể bắt đầu các cuộc trò chuyện trên Business Messages từ trang web của mình và nhận các giá trị ngữ cảnh dành riêng cho tiện ích trong tin nhắn từ người dùng.