Diese Seite wurde von der Cloud Translation API übersetzt.

Integration in eine Website

Wenn Sie die Reichweite Ihrer Business Messages-Agents erhöhen möchten, können Sie mit dem Business Messages-Widget Unterhaltungseinstiegspunkte auf Ihren Websites hinzufügen.

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

Business Messages-Widget zu einer Website hinzufügen

Um Unterhaltungen von einer Website zu ermöglichen, laden Sie die JavaScript-Bibliothek für Business Messages, konfigurieren die Widget-Platzierung auf der Seite und geben Kontextwerte innerhalb des Widgets an.

Eine Liste der Verfügbarkeitsfunktionen, Attribute und Ereignisse finden Sie unter Widgets „Business Messages“. Im Styleguide für Business Messages-Widgets finden Sie Empfehlungen zu Stil und Verwendung.

Widget erstellen

Aktualisieren Sie die folgenden Werte, um ein Business Messages-Widget zum Einfügen in Ihre Website zu erstellen.

Wert	Beschreibung
`LAYOUT`	wie die Schaltfläche auf Ihrer Website angezeigt wird. Kann `button`, `floating`, `inline` oder `advanced` sein. Wenn Sie Ihre eigenen Stile verwenden möchten, verwenden Sie `advanced`, kopieren Sie das Stylesheet auf Ihre Webseite und ändern Sie es nach Bedarf.
`AGENT_ID`	Deine Agent-ID.
`BUTTON_TEXT`	Der Text, den die Schaltfläche anzeigen 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

Dieses Widget Web-Widget-Vorschau 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>

Einbindung des Business Messages-Widgets anpassen

JavaScript-Bibliothek laden

Wenn Sie die Business Messages JavaScript-Bibliothek laden möchten, kopieren Sie den folgenden Code und fügen Sie ihn sofort in das <head>-Tag auf jeder Seite ein, auf der ein Business Messages-Widget angezeigt werden soll. Pro Seite ist nur eine JavaScript-Bibliothek erforderlich.

<!-- 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 und lädt sie. Sie initialisiert vorhandene Seitenelemente mit dem Attribut data-bm-widget-agent-id. Die JavaScript-Bibliothek konvertiert die ermittelten Seitenelemente in anklickbare Elemente, die die Business Messages-Unterhaltungsoberfläche laden, wenn sie darauf tippen.

Der optionale Parameter cb enthält den Namen einer Funktion, die nach dem Laden der JavaScript-Bibliothek automatisch aufgerufen wird.

Widget-Platzierung konfigurieren

Wenn die JavaScript-Bibliothek für Business Messages geladen wird, durchsucht sie die Website nach Elementen mit dem Attribut data-bm-widget-agent-id und wandelt diese Elemente in antippbare Business Messages-Widgets um. Jedes Element, das Sie in ein Widget konvertieren möchten, muss ein data-bm-widget-agent-id-Attribut mit einem Wert enthalten, der der Agent-ID für den 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 das optionale Attribut data-bm-widget-context in das HTML-Element mit dem Attribut data-bm-widget-agent-id ein, um den Widget-Kontext zu konfigurieren und an den Webhook zu übergeben. Geben Sie einen Stringwert für data-bm-widget-context an. An Ihren Webhook gesendete Nachrichten enthalten den Kontextwert.

data-bm-widget-context kann einen beliebigen Wert haben, z. B. einen Wert, der für die Anzeige des Widgets zur Laufzeit auf der Seite relevant ist. In den folgenden Beispielen ist der Attributwert "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" ein base64-codierter JSON-String von {"product":"dryer","offer-code":"ASDADSA"}.

data-bm-widget-context ist auf 512 Byte begrenzt.

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 JavaScript-Bibliothek für Business Messages in das Tag <head> geladen, das dann automatisch die HTML-Seite scannt und „myagentid“ in Business Messages-Widgets konvertiert.

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

Programmatische Widget-Initialisierung

Für eine präzisere Kontrolle der Einrichtung können Sie Ihr Widget programmatisch initialisieren. Wenn Sie ein Element programmatisch initialisieren möchten, rufen Sie nach dem Laden der Business Messages JavaScript-Bibliothek bmwidget.init auf. Bei dieser Art der Initialisierung müssen Sie Elemente nicht mit dem Attribut data-bm-widget-agent-id markieren.

<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 prüfen. Im folgenden Beispiel wird vor der Initialisierung des HTML-Elements mit der ID "myCustomButton" als Business Messages-Widget geprüft, ob ein Gerät unterstützt wird.

<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

Bei Single-Page-Anwendungen, bei denen das Attribut data-bm-widget-agent-id zur Laufzeit erstellt wird, macht die JavaScript-Bibliothek von Business Messages ein globales Objekt window.bmwidget verfügbar.

Immer, wenn der Seite ein neues Element hinzugefügt wird, kannst du window.bmwidget.scan() aufrufen, um das neue Element als Business Messages-Widget zu initialisieren.

window.bmwidget.scan();

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

Beispiel für Angular

Mit dem folgenden Code wird window.bmwidget.scan() beim Laden des Komponenten-Callbacks in Angular initialisiert.

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

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

Reaktionsbeispiel

Mit dem folgenden Code wird die Funktion window.bmwidget.scan() beim Rendern eines Elements in React initialisiert.

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 eingebunden haben, können Sie Business Messages-Unterhaltungen von Ihrer Website starten und Widget-spezifische Kontextwerte in Nachrichten von Nutzern empfangen.