Integracja z witryną

Aby zwiększyć zasięg agentów Business Messages, możesz dodawać w swoich witrynach punkty wejścia rozmów za pomocą widżetu Business Messages.

Widżet Business Messages obsługuje tylko urządzenia mobilne z Androidem 5 lub nowszym. Inne systemy operacyjne na urządzenia mobilne i środowiska komputerowe nie są obsługiwane.

Dodawanie widżetu Business Messages do witryny

Aby włączyć rozmowy z witryny, wczytaj bibliotekę JavaScript Business Messages, skonfiguruj położenie widżetu na stronie i określ wartości kontekstowe.

Listę funkcji, właściwości i zdarzeń dostępności znajdziesz w artykule Widżet wiadomości biznesowych. Wskazówki dotyczące stylu i użytkowania znajdziesz w przewodniku po stylach widżetu Business Messages.

Tworzenie widżetu

Zaktualizuj poniższe wartości, aby utworzyć widżet Business Messages, który chcesz wstawić w swojej witrynie.

Wartość Opis
LAYOUT Wygląd przycisku w witrynie. Może to być button, floating, inline lub advanced. Aby użyć własnych stylów, użyj polecenia advanced, skopiuj arkusz stylów do swojej strony internetowej i zmodyfikuj go zgodnie z potrzebami.
AGENT_ID Identyfikator agenta.
BUTTON_TEXT Tekst, który ma się wyświetlać przycisk. 
    <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>

Przykładowy widżet

Ten widżet Podgląd widżetu internetowego jest generowany przez ten kod:

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

Dostosowywanie integracji widżetu Business Messages

Wczytaj bibliotekę JavaScript

Aby wczytać bibliotekę JavaScript Business Messages, skopiuj poniższy kod i wklej go bezpośrednio w tagu <head> na każdej stronie, na której chcesz wyświetlić widżet Business Messages. Wystarczy, że dodasz do biblioteki jedną bibliotekę JavaScript.

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

Fragment kodu jest pobierany i ładowany do biblioteki w języku JavaScript, która inicjuje istniejące elementy strony za pomocą atrybutu data-bm-widget-agent-id. Biblioteka JavaScript konwertuje zidentyfikowane elementy strony na klikalne elementy, które po kliknięciu wyświetlają interfejs konwersacyjny Business Messages.

Opcjonalny parametr cb zawiera nazwę funkcji, która jest automatycznie wywoływana po wczytaniu biblioteki JavaScript.

Skonfiguruj położenie widżetu

Podczas wczytywania biblioteki JavaScript Business Messages skanuje witrynę pod kątem elementów z atrybutem data-bm-widget-agent-id i konwertuje te elementy na widżety Business Messages, które można kliknąć. Każdy element, który chcesz przekonwertować na widżet, musi zawierać atrybut data-bm-widget-agent-id z wartością odpowiadającą identyfikatorowi agenta uruchomionego agenta.

Przykład: definicje widżetów

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

Przekazywanie wartości kontekstowych

Aby skonfigurować kontekst widżetu i przekazać go do webhooka, uwzględnij opcjonalny atrybut data-bm-widget-context w elemencie HTML zawierającym atrybut data-bm-widget-agent-id. Określ wartość ciągu data-bm-widget-context. Wiadomości wysyłane do webhooka zawierają wartość kontekstową.

data-bm-widget-context może mieć dowolną wartość, na przykład może być związana z miejscem wyświetlania widżetu na stronie. W poniższych przykładach wartość atrybutu „eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==” to zakodowany w base64 ciąg znaków JSON {"product":"dryer","offer-code":"ASDADSA"}.

data-bm-widget-context ma limit 512 bajtów.

Przykład: definicje widżetów z kontekstem

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

Przykładowa witryna

Ten przykładowy kod wczytuje bibliotekę JavaScript Business Messages w tagu <head>, co automatycznie skanuje stronę HTML i konwertuje fragment „myagentid” na widżety 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>

Inicjacja widżetu automatycznego

Aby mieć większą kontrolę nad konfiguracją, możesz włączyć automatyczne uruchamianie widżetu. Aby automatycznie zainicjować element, wywołaj bmwidget.init po wczytaniu biblioteki JavaScript Business Messages. Ta forma inicjowania nie wymaga oznaczania elementów atrybutem 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>

Sprawdź obsługę urządzenia

Użyj window.bmwidget.supported, aby sprawdzić, czy zespół obsługuje Wiadomości biznesowe na urządzeniu. W tym przykładzie sprawdzamy, czy obsługa urządzenia jest obsługiwana, zanim zainicjujesz element HTML o identyfikatorze „myCustomButton” jako widżet 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>

Inicjowanie widżetu dla aplikacji jednostronicowych

W aplikacjach z jedną stroną, w których atrybut data-bm-widget-agent-id jest tworzony w czasie działania, biblioteka JavaScript Business Messages udostępnia obiekt globalny window.bmwidget.

Po dodaniu nowego elementu do strony wywołaj window.bmwidget.scan(), aby zainicjować go jako widżet Business Messages.

window.bmwidget.scan();

Wywołaj window.bmwidget.scan() w wywołaniu aktualizacji DOM, aby atrybut data-bm-widget-agent-id ponownie zainicjował się po zmianie stanu strony.

Przykład Angular

Ten kod inicjuje window.bmwidget.scan() podczas wywołania zwrotnego wczytywania komponentu w Angular.

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

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

Przykład reakcji

Ten kod inicjuje funkcję window.bmwidget.scan() podczas renderowania elementu w 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>);
}

Dalsze kroki

Po zintegrowaniu widżetu Business Messages z witryną możesz rozpocząć w niej rozmowy z Business Messages i odbierać wartości kontekstowe dotyczące widżetów w wiadomościach od użytkowników.