Интеграция с веб-сайтом

Чтобы расширить возможности своих агентов Business Messages, вы можете добавить на свои веб-сайты точки входа в диалог с помощью виджета Business Messages.

Виджет «Деловые сообщения» поддерживает только мобильные устройства с Android 5+. Другие мобильные операционные системы и настольные среды не поддерживаются.

Добавление виджета «Деловые сообщения» на веб-сайт

Чтобы включить беседы с веб-сайта, вы загружаете библиотеку 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 для бизнес-сообщений, скопируйте следующий код и сразу вставьте его в <head> на каждой странице, где вы хотите отобразить виджет для бизнес-сообщений. Вам нужно только одно включение библиотеки JavaScript на страницу.

<!-- 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 в кодировке base64 {"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-страницу и преобразует mygentid в виджеты 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-элемента с идентификатором «myCustomButton» в качестве виджета «Бизнес-сообщения».

<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 при изменении состояния страницы.

Угловой пример

Следующий код инициализирует 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>);
}

Следующие шаги

Теперь, когда вы интегрировали виджет «Деловые сообщения» на свой веб-сайт, вы можете начинать беседы «Деловые сообщения» со своего веб-сайта и получать контекстные значения виджета в сообщениях от пользователей.