Integration in eine Website

Wenn Sie die Reichweite Ihrer Business Messages-Agents vergrößern möchten, können Sie Unterhaltungen hinzufügen auf Ihren Websites mit dem Business Messages-Widget.

Das Business Messages-Widget unterstützt nur Mobilgeräte mit Android 5 oder höher. Andere mobile Betriebssysteme und Desktopumgebungen werden nicht unterstützt.

Business Messages-Widget einer Website hinzufügen

Wenn Sie Unterhaltungen auf einer Website aktivieren möchten, müssen Sie Business Messages laden JavaScript-Bibliothek, konfigurieren die Widget-Platzierung auf der Seite und geben Sie den Kontext an innerhalb des Widgets.

Eine Liste der Verfügbarkeitsfunktionen, Eigenschaften und Ereignisse finden Sie unter Business Nachrichten Widget Weitere Informationen finden Sie unter Styleguide für das Business Messages-Widget für Styling- und Designempfehlungen verwenden.

Widget erstellen

Aktualisieren Sie die folgenden Werte, um ein Business Messages-Widget zu erstellen, das in Ihrer Website.

Wert Beschreibung
LAYOUT So sieht die Schaltfläche auf Ihrer Website. Kann button, floating, inline oder advanced sein. Bis eigene Stile verwenden, advanced verwenden, das Stylesheet auf Ihre Webseite kopieren und bei Bedarf anpassen.
AGENT_ID Ihre Agent-ID.
BUTTON_TEXT Der Text, den Sie etwa die Schaltfläche, die angezeigt werden soll. 
    <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>

Beispiel-Widget

Das Widget Vorschau des Web-Widgets wird durch den folgenden Code generiert:

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

Integration des Business Messages-Widgets anpassen

JavaScript-Bibliothek laden

Um die JavaScript-Bibliothek für Business Messages zu laden, kopieren Sie den folgenden Code und fügen Sie ihn direkt im <head>-Tag auf jeder Seite ein, auf der Business Messages-Widget anzuzeigen. Sie benötigen nur eine JavaScript-Bibliothek Seiten enthalten sind.

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

Das Snippet lädt die JavaScript-Bibliothek herunter, die initialisiert wird, vorhandene Seitenelemente mit einem data-bm-widget-agent-id-Attribut. Die Die JavaScript-Bibliothek wandelt die identifizierten Seitenelemente in anklickbare Elemente um. die beim Antippen die Konversationsoberfläche von Business Messages laden.

Der optionale Parameter cb enthält den Namen einer Funktion, die automatisch aufgerufen, sobald die JavaScript-Bibliothek geladen ist.

Widget-Platzierung konfigurieren

Wenn die JavaScript-Bibliothek für Business Messages geladen wird, wird die Website nach Elemente mit einem data-bm-widget-agent-id-Attribut und konvertiert diese Elemente Business Messages-Widgets erstellen. Jedes Element, das konvertiert werden soll einem Widget muss ein data-bm-widget-agent-id-Attribut mit einem Wert die der Agent-ID für Ihren gestarteten Agent entspricht.

Beispiel: Widget-Definitionen

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

Kontextwerte übergeben

Fügen Sie zum Konfigurieren des Widget-Kontexts und zum Weiterleiten an den Webhook das optionale Feld data-bm-widget-context-Attribut im HTML-Element, das den Parameter data-bm-widget-agent-id-Attribut. Geben Sie einen Stringwert für data-bm-widget-context Nachrichten, die an den Webhook gesendet werden, enthalten den Kontext Wert.

data-bm-widget-context kann einen beliebigen Wert haben, z. B. einen Wert die für die Position relevant ist, an der das Widget zur Laufzeit auf der Seite angezeigt wird. Im Folgenden kann der Attributwert des "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" ist ein base64-codierter JSON-String von {"product":"dryer","offer-code":"ASDADSA"}.

data-bm-widget-context hat ein Limit von 512 Byte.

Beispiel: Widget-Definitionen mit Kontext

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

Beispielwebsite

Im folgenden Beispiel wird die Business Messages-JavaScript-Bibliothek im <head>-Tag, das dann automatisch die HTML-Seite scannt und konvertiert &quot;myagentid&quot; Business Messages-Widgets.

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

Initialisierung des programmatischen Widgets

Für eine differenziertere Kontrolle über Ihre Einrichtung können Sie Ihr Um ein Element programmatisch zu initialisieren, rufen Sie bmwidget.init nachdem die JavaScript-Bibliothek für Business Messages geladen wurde. Diese Form von müssen Sie bei der Initialisierung nicht Attribut „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>

Gerätesupport prüfen

Verwenden Sie window.bmwidget.supported um die Unterstützung von Business Messages für ein Gerät zu bestätigen. Im folgenden Beispiel wird geprüft, vor der Initialisierung des HTML-Elements mit der ID „myCustomButton“ als Business Messages-Widget.

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

Widget-Initialisierung für Single-Page-Anwendungen

Für Single-Page-Anwendungen, bei denen der data-bm-widget-agent-id wird die Business Messages JavaScript-Bibliothek ein globales Objekt window.bmwidget verfügbar macht.

Sobald ein neues Element zur Seite hinzugefügt wird, rufen Sie window.bmwidget.scan() um das neue Element als Business Messages-Widget zu initialisieren.

window.bmwidget.scan();

Rufen Sie window.bmwidget.scan() beim Callback für die DOM-Aktualisierung auf, um sicherzustellen, Das data-bm-widget-agent-id-Attribut wird neu initialisiert, wenn sich der Status der Seite ändert.

Angular-Beispiel

Mit dem folgenden Code wird window.bmwidget.scan() während des Ladens der Komponente initialisiert. in Angular zurück.

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

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

Beispiel für React

Mit dem folgenden Code wird die Funktion window.bmwidget.scan() während der Rendering eines Elements in 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>);
}

Nächste Schritte

Nachdem Sie ein Business Messages-Widget in Ihre Website integriert haben, können Sie Unterhaltungen über Business Messages auf Ihrer Website Empfangen Widget-spezifische Kontextwerte in Meldungen von Nutzern.