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

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

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

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

Чтобы включить общение с веб-сайта, вы загружаете библиотеку JavaScript 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>

Настройка интеграции виджета «Деловые сообщения»

Загрузите библиотеку JavaScript

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

Настроить размещение виджета

Когда библиотека 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-страницу и преобразует «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 с идентификатором «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() , чтобы инициализировать новый элемент как виджет бизнес-сообщений. 

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>);
}

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

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