Integracja z witryną

Aby zwiększyć zasięg agentów Business Messages, możesz dodać rozmowy punktów wejścia w witrynach za pomocą widżetu Business Messages.

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

Dodawanie widżetu Business Messages do witryny

Aby włączyć rozmowy z witryny, musisz wczytać aplikację Business Messages z biblioteki JavaScript, skonfigurować położenie widżetu na stronie i określić kontekst; w widżecie.

Listę funkcji, właściwości i zdarzeń dostępności znajdziesz w sekcji Biznes Wiadomości . Zobacz przewodnik stylu dotyczący widżetu Business Messages . i ich używanie.

Utwórz widżet

Zaktualizuj te wartości, aby utworzyć widżet Business Messages, do którego zostanie wstawiony widżet do Twojej witryny.

Wartość Opis
LAYOUT Sposób wyświetlania przycisku do Twojej witryny. Może to być button, floating, inline lub advanced. Do użyj własnych stylów, użyj advanced, skopiuj arkusz stylów na swoją stronę internetową, i w razie potrzeby wprowadzić odpowiednie zmiany.
AGENT_ID Twój identyfikator agenta.
BUTTON_TEXT Tekst taki jak przycisk do wyświetlenia. 
    <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 został wygenerowany 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 ten kod i wklej bezpośrednio w tagu <head> na każdej stronie, na której chcesz go wyświetlać widżet Business Messages. Potrzebujesz tylko jednej biblioteki JavaScript uwzględnienie na stronie.

<!-- 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 pobiera i wczytuje bibliotekę JavaScript, która uruchamia istniejących elementów strony z atrybutem data-bm-widget-agent-id. Biblioteka JavaScript przekształca zidentyfikowane elementy strony w elementy klikalne. które ładują panel konwersacyjny Business Messages po dotknięciu.

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

Skonfiguruj położenie widżetu

Po wczytaniu biblioteki JavaScript Business Messages skanuje ona witrynę w poszukiwaniu elementów z atrybutem data-bm-widget-agent-id i przekształca je w proste widżety Business Messages. Każdy element, który ma być skonwertowany do widżetu musi zawierać atrybut data-bm-widget-agent-id z wartością odpowiadający identyfikatorowi 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>

Przekazuj wartości kontekstowe

Aby skonfigurować kontekst widżetu i przekazać go do webhooka, dołącz opcjonalny element data-bm-widget-context w elemencie HTML zawierającym data-bm-widget-agent-id. Podaj wartość ciągu znaków dla data-bm-widget-context Wiadomości wysyłane do webhooka zawierają kontekst. .

data-bm-widget-context może mieć dowolną wartość, np. wartość związane z miejscem, w którym widżet wyświetla się w czasie działania na stronie. W następujących przykładów, wartość atrybutu "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" jest ciągu znaków JSON {"product":"dryer","offer-code":"ASDADSA"} zakodowanego w formacie base64.

Plik 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 funkcji <head>, który następnie automatycznie skanuje stronę HTML i dokonuje konwersji &quot;myagentid&quot; w widżetach 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>

Inicjowanie automatycznych widżetów

Aby zyskać większą kontrolę nad konfiguracją, możesz zainicjować automatycznie. Aby automatycznie zainicjować element, wywołaj bmwidget.init po wczytaniu biblioteki JavaScript Business Messages. Ta forma nie wymaga oznaczania elementów za pomocą 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ź, czy urządzenie jest obsługiwane

Używaj window.bmwidget.supported , aby sprawdzić, czy funkcja Business Messages jest obsługiwana przez urządzenie. Oto przykładowe testy w celu obsługi urządzenia przed zainicjowaniem elementu HTML z identyfikatorem „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 na jednej stronie

W przypadku aplikacji jednostronicowych, w których data-bm-widget-agent-id jest tworzony w czasie działania, biblioteka JavaScript Business Messages ujawnia obiekt globalny window.bmwidget.

Za każdym razem, gdy do strony dodajesz nowy element, wywołaj window.bmwidget.scan() , aby zainicjować nowy element jako widżet Business Messages.

window.bmwidget.scan();

Wywołaj window.bmwidget.scan() w wywołaniu zwrotnym aktualizacji DOM, aby upewnić się, że Atrybut data-bm-widget-agent-id jest inicjowany ponownie po zmianie stanu strony.

Przykład Angular

Ten kod inicjuje window.bmwidget.scan() podczas wczytywania komponentu. wywołanie zwrotne 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 jak renderowanie 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 ze swoją witryną możesz rozpoczynania rozmów Business Messages z poziomu witryny otrzymaj wartości kontekstowe specyficzne dla widżetu w wiadomościach od użytkowników.