Diese Seite wurde von der Cloud Translation API übersetzt.

Online-Abholung im Geschäft: Bonjour-Mahlzeit – Teil 1 – Erste Schritte

1. Einführung

Zuletzt aktualisiert:11.05.2022

Willkommen bei Business Messages!

In diesem Codelab wird die Integration in Business Messages vorgestellt. Damit können Kunden über die Google Suche und Google Maps mit Unternehmen in Kontakt treten, die Sie verwalten. Vielleicht arbeiten Sie mit einem unabhängigen Softwareanbieter zusammen, der Messaging-Lösungen für die Unternehmen entwickelt, mit denen Sie zusammenarbeiten, oder dass Sie gerade erst Business Messages entdeckt haben und an der Plattform üben möchten.

Unabhängig davon, was Sie hierher gebracht hat, ist dieses Codelab ein großartiger Einstieg. Am Ende haben Sie Ihren ersten digitalen Agenten, mit dem Nutzer interagieren können. Wenn Sie mit der Einführung von Business Messages noch ein wenig aufgepolstert sind, haben Sie die Chance, Millionen von Kunden zu erreichen.

Was macht einen guten digitalen Kundenservicemitarbeiter aus?

Business Messages ist eine dialogorientierte Oberfläche mit einer App-ähnlichen Oberfläche auf Mobilgeräten, über die Nutzer mit Unternehmen in Kontakt treten können, ohne eine zusätzliche App installieren zu müssen. Ein digitaler Agent ist die Logik, mit der Ihre Kunden interagieren. Die Logik wird von einer Webanwendung verwaltet, die in der Cloud oder in Ihrer Infrastruktur bereitgestellt wird. Es liegt ganz bei Ihnen, wie Sie auf den Nutzer reagieren. Die besten Agents liefern Kontext, um Erwartungen zu setzen, das Interesse der Kunden aufrechtzuerhalten und Funktionen bereitzustellen, die die Anforderungen der Nutzer erfüllen.

Inhalt

In diesem Codelab erstellen Sie einen digitalen Agenten in Business Messages für ein fiktives Unternehmen namens Bonjour Meal. Dieser digitale Agent beantwortet ein paar einfache Fragen wie „Um wie viel Uhr schließen Sie?“ oder „Kann ich online einkaufen?“.

In diesem Codelab können deine Nutzer Artikel über den digitalen Agenten kaufen, sie an einen Zahlungsabwickler verweisen, um Geld zu erhalten, und dann eine Abholung der fiktiven Artikel im Geschäft vereinbaren.

In diesem Codelab

Mithilfe eines Vorschlags-Chips auf Fragen antworten
Bitten Sie den Nutzer, Fragen zu stellen, die Ihr digitaler Kundenservicemitarbeiter beantworten kann.
Umfangreiche Konversationsfunktionen bereitstellen, um den Nutzer in die Unterhaltung aufrechtzuerhalten

Lerninhalte

Hier erfahren Sie, wie Sie eine Webanwendung in App Engine auf der Google Cloud Platform bereitstellen. Alternativ können Sie Ihre lokale Anwendung mit ngrok öffentlich testen.
Business Messages-Konto mit einem Webanwendungs-Webhook konfigurieren, um Nachrichten von Nutzern zu empfangen
Mit der Business Messages API umfangreiche Funktionen wie Karten, Karussells und Vorschläge in der Konversation senden
So sendet Business Messages Ihre Nachrichten

In diesem Codelab erfährst du, wie du deinen ersten digitalen Agenten erstellst.

Voraussetzungen

Für ein kostenloses Business Communications-Entwicklerkonto registrieren
Auf unserer Entwicklerwebsite finden Sie eine Anleitung dazu,
Ein Android-Gerät mit Version 5 oder höher ODER ein iOS-Gerät mit der Google Maps App
Erfahrung mit der Programmierung von Webanwendungen
Eine Internetverbindung.

2. Einrichtung

APIs aktivieren

Da wir in diesem Codelab mit einer Django-Anwendung arbeiten, nutzen wir die Cloud Build API, um die Anwendung in App Engine bereitzustellen. Wenn Sie ngrok verwenden, müssen Sie die Cloud Build API alternativ nicht aktivieren.

So aktivieren Sie die Cloud Build API:

Öffnen Sie die Cloud Build API in der Google Cloud Console.
Klicken Sie auf Aktivieren.

Dienstkonto erstellen

Sie müssen ein Dienstkonto erstellen, um auf die Business Communications API und die Business Messages API zugreifen zu können. Folgen Sie der Anleitung in der Dokumentation zum Erstellen eines Dienstkontos in der Business Communications Developer Console.

Python EchoBot-Startcode für Django bereitstellen

Klonen Sie in einem Terminal das Django Echo Bot Sample-Beispiel mit dem folgenden Befehl in das Arbeitsverzeichnis Ihres Projekts:

$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code

Kopieren Sie die für das Dienstkonto erstellte JSON-Datei mit den Anmeldedaten in den Ressourcenordner des Beispiels und benennen Sie die Anmeldedaten in "bm-agent-service-account-credentials.json" um.

bm-bonjour-meal-django-starter-code/bonjourmeal-codelab/step-1/resources/bm-agent-service-account-credentials.json

Wechseln Sie in einem Terminal zum Verzeichnis "step-1" des Beispiels.

Führen Sie die folgenden Befehle in einem Terminal aus, um das Beispiel bereitzustellen:

$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy

PROJECT_ID ist die Projekt-ID des Projekts, das Sie zur Registrierung bei den APIs verwendet haben.

Notieren Sie sich die URL der bereitgestellten Anwendung in der Ausgabe des letzten Befehls:

Deployed service [default] to [https://PROJECT_ID.appspot.com]

Der Startcode, den Sie gerade bereitgestellt haben, enthält eine Webanwendung mit einem Webhook, über den Nachrichten von Business Messages empfangen werden können. Die Anwendung gibt Nachrichten an den Nutzer zurück und kann einige der umfassenden Funktionen der Konversationsoberfläche präsentieren.

Webook konfigurieren

Nachdem der Dienst bereitgestellt wurde, können Sie die Webhook-URL auf der Seite Kontoeinstellungen in der Business Communications Developer Console über die URL der Anwendung festlegen.

Die Webhook-URL ist die URL der Anwendung + „/callback/“. Dieser könnte beispielsweise so aussehen: https://PROJECT_ID.appspot.com/callback/

Rufen Sie die Seite mit den Kontoeinstellungen der Business Communications Console auf. In der oberen rechten Ecke unter der Navigationsleiste sollten Sie den Namen Ihres GCP-Projekts sehen. Wenn Sie ein Drop-down-Menü sehen, wählen Sie Ihr GCP-Projekt aus.

Geben Sie die Informationen unter Technischer Ansprechpartner ein und aktualisieren Sie den Webhook mit der Webhook-URL der bereitgestellten Anwendung.

Klicken Sie neben der Referenz Ihres GCP-Projekts auf Save (Speichern).

3. Ersten Agent erstellen

Business Communications Developer Console verwenden

Klicken Sie in der Business Communications Console oben links auf das Logo, um zum Dashboard der Konsole zurückzukehren. Klicken Sie dann auf Agent erstellen. Sie erstellen die Marke gleichzeitig mit dem Erstellen Ihres Agents. Wählen Sie Business Messages als Agent type (Agent-Typ) aus und prüfen Sie, ob die Partnerinformationen korrekt sind.

Geben Sie im Feld Brand (Marke) den Namen der Marke ein, die Sie erstellen.Die Marke ist das Unternehmen, mit dem Sie zusammenarbeiten, und Nutzer können mit dem Agent interagieren. Geben Sie im Feld Agent-Name an, was die Nutzer in der Business Messages-Unterhaltung sehen sollen. Im Fall der fiktiven Bonjour-Mahlzeit ist Bonjour Rail das Eisenbahnunternehmen, das die Bonjour-Essensrestaurants verwaltet. Also gebe ich Bonjour Rail als Marke und Bonjour Meal als Agent an.

Der Agent ist die Unterhaltungseinheit, die die Marke repräsentiert.

Klicken Sie auf Agent erstellen und lassen Sie die Konsole für sich arbeiten. Es dauert einige Sekunden, bis mehrere Anfragen an die Business Communications API gesendet werden, um die Marke und den Agent zu erstellen. Sie können die Business Communications API direkt verwenden, um einen Agent und eine Marke zu erstellen. In der Dokumentation können Sie sich darüber informieren, wie eine curl-Anfrage genauso aussehen würde wie in der Konsole.

Die erste Unterhaltung

Öffnen Sie den Agent, den Sie gerade erstellt haben. Daraufhin wird die Seite Übersicht angezeigt, auf der Sie die Details des Agents prüfen können. Sehen Sie sich die Agent-Test-URLs an. Diese URLs werden verwendet, um die Unterhaltungsoberfläche auf Ihrem Gerät aufzurufen.

Sie können die Test-URL kopieren, indem Sie auf einen der Chips klicken. Kopieren Sie natürlich die Test-URL für das Gerät, das Sie zum Testen zur Verfügung haben. Senden Sie die kopierte Nachricht auf beliebige Weise an Ihr Gerät.

Wenn Sie auf Ihrem Mobilgerät auf den Link tippen, wird der Agent Launcher von Business Messages aufgerufen und Ihre Agent-Test-URL ist bereits ausgefüllt.

Tippen Sie auf Launch (Starten), um die Unterhaltungsoberfläche des Agents aufzurufen.

Interagieren Sie mit dem Agent, um ein Gefühl dafür zu bekommen, was er leisten kann. In den meisten Fällen werden Sie feststellen, dass die Unterhaltungsoberfläche nur Ihre Nachrichten wiedergibt. Senden Sie eine Nachricht wie „Hello, World!“ und Sie werden sehen, dass der Agent Ihnen dieselbe Nachricht zurücksendet.

Die bereitgestellte Anwendung enthält auch einige Logiken, um die umfassenden Funktionen von Business Messages zu präsentieren.

Wenn Sie „card“ senden, wird eine Rich Card aufgerufen.
Wenn Sie „Chips“ senden, rufen Sie Vorschlags-Chips auf
Wenn Sie „carousel“ senden, rufen Sie ein Karussell mit Rich Cards auf.

Glückwunsch! Dies ist das Eröffnungsgespräch deines Agenten mit dir.

Jede der Rich-Funktionen können Sie nutzen, um der Person, die mit Ihrem Agent kommuniziert, einen besseren Kontext bereitzustellen. Senden Sie grafische Assets in Rich Cards, um Ideen besser zu kommunizieren, oder verwenden Sie Vorschlags-Chips, um die Unterhaltung zu lenken.

Willkommensnachricht aktualisieren und Unterhaltung-Chips verwenden

Machen wir uns ein wenig mit der Developer Console vertraut, sehen wir uns an, wie Sie die Willkommensnachricht des Agents bearbeiten und Vorschlags-Chips verwenden können, um dem Nutzer die Kommunikation zu erleichtern.

Rufen Sie die Seite Übersicht für den Agent auf und wählen Sie Agent-Informationen aus. Scrollen Sie nach unten zum Abschnitt „Willkommensnachricht“ und „Gesprächseinstiege“.

Ändern Sie die Willkommensnachricht (das gelbe Eingabefeld) wie folgt:

Willkommen bei der Bonjour-Mahlzeit-Starter-App. Ich kann deine Nachrichten wiederholen und dir einige der umfassenden Funktionen zeigen, die von der Plattform unterstützt werden. Probiere diese Vorschläge aus.

Klicken Sie auf + Gesprächseinstieg hinzufügen, wie im lilafarbenen Feld im Bild oben angegeben, um einen Gesprächseinstieg hinzuzufügen und Vorschlags-Chips, ein Karussell und eine Karte aufzurufen. Für den Gesprächseinstieg sind eine Textkomponente und eine PostbackData-Komponente erforderlich. Der Text wird dem Nutzer angezeigt, während die PostBack-Daten an den Webhook des Agents gesendet werden. Der Webhook parst die Postback-Daten und sendet die entsprechende Antwort an den Nutzer.

Die Agent-Informationen in der Konsole sehen nach der Änderung so aus:

Auf der rechten Seite der Konsole sehen Sie eine Vorschau des Agents. Sehen Sie, wie die Willkommensnachricht wiedergibt, was Sie gerade geändert haben, und wie die Vorschlags-Chips darunter angezeigt werden?

Dies ist ein großartiges Tool, um eine Vorstellung von der User Experience zu erhalten. Sie können sie verwenden, während Sie Ihren Agent erstellen und die User Journeys planen, die Sie unterstützen möchten.

Leider werden wir diese Änderungen nicht sofort in der Unterhaltung sehen können, da die bisherigen Daten in der Business Messages-Infrastruktur zwischengespeichert werden. Der Cache wird etwa alle zwei Stunden geleert, Sie sollten das also morgen ausprobieren können.

Sehen wir uns in der Zwischenzeit an, wie alles im Hintergrund funktioniert.

4. Startcode analysieren

Eine 3.000 Meter umfassende Ansicht des Quellcodes

Der von Ihnen bereitgestellte Startcode gibt Nachrichten an Nutzer zurück und kann eine Rich Card, ein Karussell oder Vorschlags-Chips präsentieren. Sehen wir uns den Quellcode genauer an, damit wir verstehen, wie das funktioniert. Dann überlegen wir, was wir ändern müssen.

Beim Startcode handelt es sich um ein Django-Projekt. In einem späteren Teil dieser Codelab-Reihe verwenden wir Google Datastore, um Daten wie Einkaufswagen und zugehörige Unterhaltungen zu speichern. Keine Sorge, wenn Sie Django noch nicht verwendet haben. Es ist ziemlich einfach. Am Ende dieses Codelabs werden Sie wissen, wie es funktioniert.

Auf übergeordneter Ebene leitet Django URLs an Ansichten weiter und die Ansichtslogik erzeugt eine Vorlage, die im Browser gerendert wird. Sehen wir uns die Datei urls.py des Projekts an.

bm-django-echo-bot/bmcodelab/urls.py [Zeilen 31–37]

from django.urls import include, path
import bopis.views as bopis_views

urlpatterns = [
    path('', bopis_views.landing_placeholder),
    path('callback/', bopis_views.callback),
]

Hier sind zwei Routen definiert, sodass Django die Logik ausführen kann, wenn diese beiden URLs erkannt werden. Wenn die Projekt-URL https://PROJECT_ID.appspot.com/ lautet, sind die vom Projekt erkannten Routen:

https://PROJECT_ID.appspot.com/
https://PROJECT_ID.appspot.com/callback/

Beide URL-Routen verweisen auf bopis_views, das aus bopis/views.py stammt. Sehen wir uns an, was in dieser Datei passiert. Sehen wir uns zuerst etwas über bopis_views.landing_placeholder an.

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [Zeilen 302–309]

... 
def landing_placeholder(request):
    return HttpResponse("<h1>Welcome to the Bonjour Meal Codelab</h1>
    <br/><br/>
    To message your Bonjour Meal agent, go to the Developer Console and retrieve
    the Test URLs for the agent you have created as described in the codelab
    <a href='https://codelabs.developers.google.com/codelabs/'>here</a>.")
...

Diese Logik wird von Ihrem Webserver ausgeführt, wenn er eine Webanfrage empfängt, die auf das Stammverzeichnis des Projekts verweist. Hier passiert nichts allzu ausgefallener: Wir geben einfach eine HTTPResponse mit HTML zurück an den Browser, der die Anfrage gestellt hat. Ja, Sie können zwar die Stamm-URL des Projekts öffnen, aber Sie müssen nicht viel tun, da Sie zu diesem Codelab zurückkehren.

Die andere URL leitet zu einer Funktion namens callback weiter, die sich ebenfalls in bopis/views.py befindet. Sehen wir uns diese Funktion an.

bm-django-echo-bot/bopis/views.py [Zeilen 60–101]

...
def callback(request):
    """
    Callback URL. Processes messages sent from user.
    """
    if request.method == "POST":
        request_data = request.body.decode('utf8').replace("'", '"')
        request_body = json.loads(request_data)

        print('request_body: %s', request_body)

        # Extract the conversation id and message text
        conversation_id = request_body.get('conversationId')
        print('conversation_id: %s', conversation_id)

        # Check that the message and text body exist

        if 'message' in request_body and 'text' in request_body['message']:
            message = request_body['message']['text']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'suggestionResponse' in request_body:
            message = request_body['suggestionResponse']['postbackData']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'userStatus' in request_body:
            if 'isTyping' in request_body['userStatus']:
                print('User is typing')
            elif 'requestedLiveAgent' in request_body['userStatus']:
                print('User requested transfer to live agent')

        return HttpResponse("Response.")

    elif request.method == "GET":
        return HttpResponse("This webhook expects a POST request.")
...

Diese Logik parst den Anfragetext für eine message oder eine suggestionResponse und übergibt diese Informationen an eine Funktion namens route_message. Dann wird eine HttpResponse zurück an die Business Messages-Infrastruktur zurückgegeben, um den Empfang der Nachricht zu bestätigen.

Das ist eine wichtige Funktion. Diese Logik ist der Webhook Ihrer Webanwendung, der Nachrichten von Nutzern empfängt, die mit Ihrem Agent interagieren. Sie können den Webhook erweitern, um Nachrichten an ein Automatisierungstool wie Dialogflow zu senden, um zu verstehen, was ein Nutzer sagt, und um eine Antwort aus dieser Inferenz zu generieren. Sie können die Nachricht auch weiterleiten, damit der Nutzer sich mit einem Kundenservicemitarbeiter verbinden kann. Siehe folgendes Diagramm:

Business Messages sendet die Nachrichteninhalte als JSON-Nutzlast an Ihren Webhook, wo sie an einen Live-Agent oder eine Logik weitergeleitet werden, damit sie als Bot antworten. Dieser Routingmechanismus, in unserem Fall, ist route_message. Werfen wir mal einen Blick darauf.

bm-django-echo-bot/bopis/views.py [Zeilen 105–122]

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    else:
        echo_message(message, conversation_id)
...

Diese Logik beginnt, die vom Nutzer empfangene Nachricht zu untersuchen. Zunächst wird die Nachricht normalisiert, indem alle Zeichen reduziert werden. Nach der Normalisierung wird überprüft, ob die Nachricht eine der am Anfang der Datei definierten Konstanten ist.

bm-django-echo-bot/bopis/views.py [Zeilen 40–42]

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
...

Der Bot parst also nach Nachrichten, die einen der Strings enthalten, die wir dem postback_data der Gesprächseinstiege aus dem vorherigen Schritt in diesem Codelab hinzugefügt haben. Wenn keiner dieser Strings angezeigt wird, übergibt er die Nachricht einfach an eine Funktion namens echo_message, die Nachrichten wiedergeben würde.

Nachrichten senden

Sie sollten jetzt eine Vorstellung davon haben, wie Nachrichten von der Webanwendung empfangen werden. Das alles erfolgt über den Webhook.

Aber wie sendet die Anwendung eine ausgehende Nachricht über Business Messages an einen Nutzer?

Wenn Ihre Infrastruktur auf den Nutzer antwortet, senden Sie die Antwort an die Business Messages API, die die Nachricht an den Nutzer sendet.

Die Business Messages API hat Bibliotheken in Python, Node.js und Java. Es gibt auch eine REST API, an die Sie direkt Anfragen senden können, wenn Ihre Infrastruktur nicht in einer Sprache verfasst ist, für die wir eine Bibliothek haben. Unter Nachrichten senden erfahren Sie, wie cURL zum Senden einer Nachricht an eine bestimmte Unterhaltungs-ID verwendet wird.

In diesem Codelab konzentrieren wir uns auf die Verwendung der Python-Clientbibliothek, die bereits in den Bonjour Meal-Startcode integriert ist, der in App Engine in Ihrem GCP-Projekt bereitgestellt wurde oder lokal über ngrok ausgeführt wird.

Sehen wir uns die Funktion echo_message an, um zu sehen, wie wir mit der API interagieren, um die Nachricht an Business Messages zu senden.

bm-django-echo-bot/bopis/views.py [Zeilen 199–212]

...
def echo_message(message, conversation_id):
    '''
    Sends the message received from the user back to the user.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

Bei dieser Funktion wird eine BusinessMessagesMessage mit der Nachrichtenvariablen instanziiert, die an die echo_message-Funktion übergeben wird. Nach der Instanziierung wird das Objekt zusammen mit der Unterhaltungs-ID an send_message übergeben.

bm-django-echo-bot/bopis/views.py [Zeilen 214–236]

...
def send_message(message, conversation_id):
    '''
    Posts a message to the Business Messages API, first sending
    a typing indicator event and sending a stop typing event after
    the message has been sent.

    Args:
        message (obj): The message object payload to send to the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    credentials = ServiceAccountCredentials.from_json_keyfile_name(
        SERVICE_ACCOUNT_LOCATION,
        scopes=['https://www.googleapis.com/auth/businessmessages'])

    client = bm_client.BusinessmessagesV1(credentials=credentials)

    # Create the message request
    create_request = BusinessmessagesConversationsMessagesCreateRequest(
        businessMessagesMessage=message,
        parent='conversations/' + conversation_id)

    bm_client.BusinessmessagesV1.ConversationsMessagesService(
        client=client).Create(request=create_request)
...

Die Funktion send_message verwendet lediglich Ihre Dienstkonto-Anmeldedaten, um zu prüfen, ob Sie Nachrichten an diese Unterhaltung senden können. Außerdem wird ein Business Messages-Client instanziiert und eine Anfrage zum Senden der Nachricht an die angegebene conversation ID erstellt.

Diese send_message-Funktion wird ebenfalls für die Rich-Funktionen genutzt, aber die von ihnen erstellten Nachrichten beziehen sich speziell auf Rich Cards, Karussells und Vorschlags-Chips. Rich Cards und Karussells können grafische Inhalte enthalten, während Vorschlags-Chips postback_data haben, damit die Callback-Logik sie entsprechend parsen kann.

Sie wissen nun, wie Nachrichten gesendet werden. Sehen wir uns nun an, wie das Beispiel Rich Cards, Karussells und Vorschlags-Chips sendet. Im folgenden Abschnitt ändern wir den Quellcode, um Nachrichten mit einigen dieser Rich-Funktionen zu senden.

Wenn Sie bereit sind, passen wir den Bonjour-Mahlzeit-Agenten an.

5. Agent anpassen

Wenn Sie das Codelab bisher befolgt haben, sollten wir unseren schönen Agent sehen.

Okay, nicht so schön, es sieht eigentlich etwas nackt aus und repräsentiert unser Unternehmen nicht wirklich. Glücklicherweise verfügen wir über grundlegende Kenntnisse des Codes, der den Agent unterstützt, und haben die Tools, die wir benötigen, um unseren Agent nach Belieben anzupassen.

Im restlichen Codelab erweitern wir den Agent um Folgendes:

Verwenden Sie ein echtes Logo.
Verbesserte Willkommensnachricht
Informationen zu Öffnungszeiten angeben
Nutzern mitteilen, dass der Onlinekauf von Artikeln bald verfügbar ist
Verwendung von Chips für Konversationsvorschläge, um die Unterhaltung zu erleichtern

Wir nutzen die Business Communications Console, um das Logo und die Willkommensnachricht zu aktualisieren. Sie haben aber auch immer die Möglichkeit, die Business Communications APIs direkt zu verwenden, um das Logo zu aktualisieren. Dann müssen wir den Quellcode aktualisieren, um entsprechende Nachrichten mit Informationen zu den Öffnungszeiten zu senden, und dass Bonjour Meal bald eine Online-Shopping-Funktion anbieten wird. Wenn das erledigt ist, kehren wir zur Business Communications Console zurück und erstellen Chips für Konversationsvorschläge, um das Gespräch zu den Happy Path-Erlebnissen zu lenken, die der digitale Kundenservicemitarbeiter unterstützt.

Logo einfügen

Wählen Sie in der Business Communications Console Ihren Agent aus und rufen Sie Agent-Informationen auf. In diesem Fall sollten Sie das Firmenlogo (siehe Gelb unten) aktualisieren.

Klicken Sie auf Hochladen. Sie können dann ein Bild auswählen, das Sie hochladen oder von einer URL importieren möchten.

In den Richtlinien für das Logodesign in der Dokumentation erhalten Sie weitere Informationen zu den Best Practices, die wir für die Verwendung Ihrer eigenen Logos empfehlen.

Laden Sie das Logo hoch, das sich im Quellcode befindet, den Sie zu Beginn dieses Codelabs geklont haben. Sie finden sie im Verzeichnis „./assets/“ des Repositorys. Sie heißt „bonjour_meal-logo.png“. Ziehen Sie die Datei in das modale Fenster des Webbrowsers. Es wird ein Bearbeitungstool angezeigt, mit dem Sie die Bildqualität anpassen und das Bild zuschneiden können. Passen Sie die Bildauflösung an und schneiden Sie das Bild so zu, dass es maximal 50 KB groß ist. Wenn Sie mit dem Bild zufrieden sind, klicken Sie zur Bestätigung auf das Häkchen im blauen Kreis und dann unten im Dialogfenster auf Auswählen.

Klicken Sie abschließend rechts oben auf der Seite Agent-Informationen auf Save (Speichern). Es kann einige Zeit dauern, bis diese Änderung auf Ihrem Gerät angezeigt wird, da die Agent-Informationen auf unseren Servern zwischengespeichert werden und innerhalb von zwei Stunden sichtbar sein sollten.

Willkommensnachricht aktualisieren

Wir haben die Willkommensnachricht bereits in diesem Codelab aktualisiert. Lassen Sie uns das wieder tun, aber dieses Mal eine Willkommensnachricht konfigurieren, die besser auf die User Journey von Bonjour Meal passt.

Wählen Sie in der Business Communications Console Ihren Agent aus und rufen Sie Agent-Informationen auf. Scrollen Sie nach unten zum Eingabefeld Willkommensnachricht, in dem Sie die Nachricht aktualisieren können.

Da wir wissen, dass wir Gesprächseinstiege hinzufügen, können wir sie in unserer Willkommensnachricht erwähnen. Ersetzen wir es im Eingabefeld durch den folgenden Text:

„Willkommen bei Bonjour-Mahlzeit. Ich bin ein Assistent und helfe Ihnen bei Fragen zu Bonjour-Mahlzeiten. Probieren Sie einige der folgenden Optionen aus.“

Klicken Sie abschließend rechts oben auf der Seite Agent-Informationen auf Save (Speichern). Auch hier kann es eine Weile dauern, bis diese Änderung wirksam wird, da unser Caching-Mechanismus dafür sorgt, dass alles schnell und problemlos funktioniert.

Öffnungszeiten angeben

Dazu senden wir mithilfe der Business Messages API eine benutzerdefinierte Nachricht an den Nutzer.

Wie Sie sich erinnern, werden Nachrichten in der route_message-Funktion von views.py geparst. Die Funktion normalisiert zuerst den String und beginnt dann zu prüfen, ob die normalisierte Nachricht mit einem der hartcodierten Parameter übereinstimmt. Fügen wir der Einfachheit halber eine zusätzliche Bedingung hinzu, mit der wir überprüfen, ob die normalisierte Nachricht mit einer neuen Konstante übereinstimmt, die wir CMD_BUSINESS_HOURS_INQUIRY nennen und den Wert "business-hours-inquiry" enthalten. Wenn die Bedingung als wahr ausgewertet wird, wird eine Funktion namens send_message_with_business_hours aufgerufen.

Die Funktion route_message sieht jetzt so aus:

bm-django-echo-bot/bopis/views.py

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    else:
        echo_message(message, conversation_id)
...

Damit der Code funktioniert, müssen wir zwei weitere Änderungen vornehmen: Definieren Sie CMD_BUSINESS_HOURS_INQUIRY zusammen mit den anderen Konstanten. Im zweiten Schritt definieren Sie die Funktion send_message_with_business_hours und senden eine Nachricht über die Business Messages API.

Definieren wir zunächst die Konstante am Anfang der Datei mit den anderen Konstantendeklarationen:

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
...

Definieren Sie jetzt send_message_with_business_hours. Sie können diese Funktion an beliebiger Stelle in der Datei definieren, wobei Sie die entsprechende Python-Syntax befolgen. Da diese Funktion einfach eine Nachricht sendet, ähnlich wie echo_message, können Sie sie als Vorlage verwenden, um die Funktion zu definieren.

bm-django-echo-bot/bopis/views.py

...
def send_message_with_business_hours(conversation_id):

    message = '''Thanks for contacting us! The hours for the store are:\n
    MON 8am - 8pm\n
    TUE 8am - 8pm\n
    WED 8am - 8pm\n
    THU 8am - 8pm\n
    FRI 8am - 8pm\n
    SAT 8am - 8pm\n
    SUN 8am - 8pm
    '''

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

Damit sollte unser Bot in der Lage sein, dem Nutzer mit diesen Öffnungszeiten zu antworten, wenn er die folgende Nachricht sendet: „business-hours-inquiry“. Das kann ungefähr so aussehen:

Sobald Sie den Quellcode in der GCP bereitstellen, werden die Änderungen sofort sichtbar. Wir speichern die Webanwendung nicht in der gleichen Weise wie Agent-Informationen in der Google Cloud Platform, sodass Sie die Anwendung sofort testen können.

Änderungen an den Quellen haben bereits eine gewisse Dynamik parat. Nun nehmen wir jedoch eine weitere Änderung vor, mit der sich Nutzer über das Online-Shopping informieren können. Ihr digitaler Kundenservicemitarbeiter wird Ihnen mitteilen, dass die Funktion noch nicht verfügbar ist, aber er wird zu einem späteren Zeitpunkt noch einmal nachsehen.

Nutzer darüber informieren, dass bald Online-Shopping verfügbar ist

Wir nehmen eine ähnliche Änderung vor, wie wir den Nutzer über die Öffnungszeiten informieren. Dieses Mal fügen wir die Informationen zusammen mit einem ansprechenden Bild in eine interaktive Karte ein.

Parst die normalisierte Nachricht und prüfen eine Bedingung für eine Konstante namens CMD_ONLINE_SHOPPING_INQUIRY mit dem Wert „online-shopping-inquiry“, der send_online_shopping_info_message aufruft, wenn die Bedingung erfüllt ist.

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
CMD_ONLINE_SHOPPING_INQUIRY = 'online-shopping-inquiry'
...
...
...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
        send_online_shopping_info_message(conversation_id)
    else:
        echo_message(message, conversation_id)
...

Definieren Sie jetzt send_online_shopping_info_message. Wir möchten, dass diese Nachricht in einer Rich Card mit einem Bild gesendet wird. Kopieren wir also die Funktion send_rich_card, um sie als Vorlage zur Definition von send_online_shopping_info_message zu verwenden.

Zunächst muss der Fallback-Text mit einer entsprechenden Meldung aktualisiert werden. Der Fallback-Text wird verwendet, wenn das Gerät aus irgendeinem Grund keine Rich Card erhalten kann. Als Nächstes sollten wir BusinessMessagesRichCard aktualisieren und einen relevanten Titel, eine Beschreibung, Vorschläge und ein Medienfeld hinzufügen. Die Funktion sollte so aussehen:

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
    fallback_text = ('Online shopping will be available soon!')

    rich_card = BusinessMessagesRichCard(
        standaloneCard=BusinessMessagesStandaloneCard(
            cardContent=BusinessMessagesCardContent(
                title='Online shopping info!',
                description='Thanks for your business, we are located in SF near the Golden Gate Bridge. Online shopping is not yet available, please check back with us in a few days.',
                suggestions=[],
                media=BusinessMessagesMedia(
                    height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
                    contentInfo=BusinessMessagesContentInfo(
                        fileUrl=SAMPLE_IMAGES[4],
                        forceRefresh=False
                    ))
                )))

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        richCard=rich_card,
        fallback=fallback_text)

    send_message(message_obj, conversation_id)
...

Endlich! Unser digitaler Agent kann jetzt auf Anfragen von Nutzern zum Online-Shopping antworten. Derzeit wird Online-Shopping von unserem digitalen Agenten noch nicht unterstützt. Wir senden dem Nutzer daher eine Nachricht, dass die Funktion bald verfügbar ist. So sieht unser digitaler Agent aus, wenn der Nutzer sich zum Online-Shopping anfragt.

Genau wie bei der vorherigen Änderung, die wir vorgenommen haben, um Nutzern die Möglichkeit zu geben, sich nach den Öffnungszeiten zu erkundigen, wird diese Änderung sofort sichtbar, wenn Sie ngrok verwenden oder wenn Sie den Code in der GCP App Engine bereitstellen.

Im nächsten Teil verwenden wir Gesprächseinstiege und Vorschlags-Chips, um das Gespräch auf den Happy Path zu lenken.

Unterhaltungen mithilfe von Chips steuern

Wir haben einige Änderungen am Quellcode vorgenommen und den aktualisierten digitalen Agenten bereitgestellt. Wir erwarten jedoch nicht, dass Nutzer „business-hours-inquiry“ oder „online-shopping-info“ eingeben, um sich nach ihrem Unternehmen zu erkundigen. Aktualisieren wir die Gesprächseinstiege so, dass der Nutzer beim Öffnen der Unterhaltung nicht nur mit einer netten Willkommensnachricht begrüßt wird, sondern auch mit einem Gesprächseinstieg.

Gehen Sie zur Business Communications Console und öffnen Sie die Seite Agent-Informationen für Ihren Agent. Zuvor haben wir Gesprächseinstiege für „Chips“, „Karte“ und „Karussell“ definiert. Diese funktionieren zwar noch, sind für unsere Geschäftsfunktion jedoch nicht mehr relevant. Sie können sie lassen, um diese umfassenden Funktionen weiterhin zu präsentieren, oder sie entfernen, damit Ihr digitaler Agent einen Gesprächseinstieg speziell für das Bonjour-Essensgeschäft anzeigt.

Wir erstellen zwei neue Gesprächseinstiege. Setzen Sie für die erste Option den Text auf „Wie sind Ihre Öffnungszeiten?“ und die Postback-Daten auf „business-hours-inquiry“. Setzen Sie für den zweiten Gesprächseinstieg den Text auf „Kann ich hier etwas kaufen?“ und für Postback-Daten „online-shopping-info“.

Das Ergebnis sollte die Konfiguration wie im folgenden Screenshot sein:

Wie bei anderen Änderungen, die in der Business Communications Console vorgenommen werden, dauert es einige Zeit, bis die Änderungen wirksam werden, bevor Sie die Änderungen auf Ihrem Mobilgerät sehen können.

Nachdem wir nun mit den Gesprächseinstiegen fertig sind, möchten wir auch eine Möglichkeit bieten, die Nutzenden zu einem glücklichen Weg zu führen, sobald das Gespräch begonnen hat. Es ist möglich, Chips im Kontext zu verwenden, nachdem eine Nachricht gesendet wurde, um den Nutzer zu anderen Funktionen zu leiten, die der digitale Agent unterstützt. Immer wenn sich der Nutzer nach Öffnungszeiten oder Online-Shopping erkundigt, senden wir dem Nutzer dann eine Nachricht mit dem Vorschlag, etwas anderes zu tun.

Fügen Sie am Ende der Funktion Folgendes hinzu:

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Business hours',
                postbackData='business-hours-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

# Let's do the same with the business hours
def send_message_with_business_hours(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Can I purchase online?',
                postbackData='online-shopping-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

Wie in der Dokumentation beschrieben, darf das Textfeld innerhalb von BusinessMessagesSuggestion auf 25 Zeichen beschränkt sein.

Hier sind ein paar Screenshots, die zeigen, wie sich die Erwartungen der Nutzer auf die Nutzer auswirken. Die überarbeiteten Gesprächseinstiege und die strategische Verwendung von Chips mit Vorschlägen.

6. Glückwunsch

Sie haben Ihren ersten digitalen Agent für Business Messages erstellt.

Sie haben eine Webanwendung zur Unterstützung Ihres digitalen Agenten in Business Messages bereitgestellt, den Agent mithilfe der Business Communications Console modifiziert und die Nutzererfahrung mit einem digitalen Agenten durch Änderungen am Quellcode verändert.

Sie kennen jetzt die wichtigsten Schritte zum Erstellen einer interaktiven Business Messages-Erfahrung und die neuen Möglichkeiten, die Ihnen von nun an zur Verfügung stehen. Ihr Agent kann so erweitert werden, dass er die Inventarsuche unterstützt oder einen Einkaufswagen eingeführt, um zu verfolgen, woran der Nutzer interessiert sein könnte. Sie könnten ein Karussell verwenden, um die Menüpunkte zu präsentieren, und die Nutzenden mithilfe von Vorschlägen die Möglichkeit bieten, Artikel auszuwählen, die sie interessieren.

Hier ist ein Teaser, wie das aussehen könnte.

Wie sorge ich für eine optimale Kommunikation?

Die besten Agents stellen dem Nutzer Kontextinformationen zur Verfügung und bieten ihm während des Gesprächs Funktionen, sodass er so mit dem Unternehmen interagieren und mit dem Unternehmen interagieren kann, wie sie es normalerweise am Telefon oder sogar persönlich tun würden. Überlegen Sie, wie die folgenden Themen auf ein Gespräch mit einem Unternehmen zutreffen könnten, mit dem Sie zusammenarbeiten.

Kontext angeben und Erwartungen definieren

Bei der Bereitstellung von Kontext kann es sich um eine explizite Erklärung, wie Sie den Nutzenden helfen können, den digitalen Agenten mit einer Persona vorstellen, mit der sich die Nutzenden identifizieren können. Erfolgreiche Kundenservicemitarbeiter in Business Messages verwenden den repräsentativen Avatar, um dem Nutzer zu zeigen, mit wem sie sich unterhalten.

Das Festlegen von Erwartungen hängt von der User Experience ab, die Sie entwickeln. Wenn Ihr Agent beispielsweise die Inventarsuche unterstützt, teilen Sie dem Nutzer zuerst mit, dass die Verfügbarkeit möglicherweise niedrig ist, bevor Sie die Antwort geben.

Nutzern Funktionen bereitstellen

Verbraucher sind ständig mit Unternehmen in Kontakt. Business Messages kann komplexe Nutzerinteraktionen unterstützen – von Anfragen wie der Überprüfung des Bestellstatus bis hin zur Überprüfung, ob ein Artikel auf Lager ist. Viele Nutzer rufen Unternehmen weiterhin per Telefon an, um Antworten auf ihre Fragen zu erhalten, auch wenn die Antworten auf der Unternehmenswebsite verfügbar sind. Das hat zur Folge, dass Unternehmen mehr Ressourcen investieren müssen, um das Anrufvolumen zu bewältigen, insbesondere in der Weihnachtszeit.

Nutzer zur Interaktion anregen

Stellen Sie dialogorientierte Berührungspunkte bereit, um den Nutzer aufrechtzuerhalten. Zwischen den Nachrichten können Sie Eingabeanzeigen aufrufen, um den Nutzer darüber zu informieren, dass Sie eine Antwort für den Nutzer verarbeiten.

Mit vielfältigen Funktionen wie Eingabeanzeigen, Vorschlags-Chips, Rich-Karten und Karussells können Sie die Nutzenden durch Happy Paths und User Experiences führen, um ihnen zu helfen, bestimmte Aufgaben zu erledigen, z. B. die Bestellung über ein Menü mit Elementen. Ziel ist es, die Zahl der Anrufe an die Telefonleitung eines Unternehmens zu verringern.

Es ist wichtig, dass eine Unterhaltung Funktionen für die Nutzenden bietet. Nutzer, die sich über Nachrichten mit einem Unternehmen in Verbindung setzen, erwarten, dass ihre Fragen schnell beantwortet werden. In einer nicht idealen Situation kann der digitale Kundenservicemitarbeiter die Unterhaltung nicht moderieren, was zu einer negativen Nutzererfahrung führen kann. Glücklicherweise gibt es aber Möglichkeiten, dies zu umgehen. Beispielsweise können Sie die Unterhaltung an einen Kundenservicemitarbeiter übertragen, auf die wir in einem späteren Codelab eingehen werden.

Was liegt als Nächstes an?

In den folgenden Abschnitten erfahren Sie mehr über komplexere Interaktionen in Business Messages.

Referenzdokumente

SuggestedReply
Referenzdokument zu Business Messages-Nachrichten
JSON-Definition für RichCard