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

1. Einführung

637766505206e0a1.png c604dca3ca211399.png

Zuletzt aktualisiert: 11.05.2022

Willkommen bei Business Messages!

In diesem Codelab erfahren Sie, wie Sie Business Messages einbinden können. Damit können Kunden über die Google Suche und Maps mit Unternehmen in Kontakt treten, die Sie verwalten. Vielleicht sind Sie ein Unternehmen, das Business Messages direkt einbinden möchte, oder Sie arbeiten bei einem unabhängigen Softwareanbieter, der Messaging-Lösungen für die Unternehmen entwickelt, mit denen Sie zusammenarbeiten. Vielleicht sind Sie aber auch nur auf Business Messages gestoßen und möchten die Plattform ausprobieren.

Ganz gleich, was Sie hierher geführt hat, dieses Codelab ist ein fantastischer Einstieg. Am Ende haben Sie Ihren ersten digitalen Agenten, mit dem Nutzer interagieren können. Wenn Sie bereit sind, Business Messages nach einigen weiteren Optimierungen zu starten, können Sie Millionen von Kunden erreichen.

Was macht einen guten digitalen Agenten aus?

Business Messages ist eine konversationelle Oberfläche, die auf Mobilgeräten eine app-ähnliche Erfahrung bietet. Nutzer können damit mit Unternehmen in Kontakt treten, ohne eine zusätzliche App installieren zu müssen. Ein digitaler Kundenservicemitarbeiter 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 Kundenservicemitarbeiter liefern Kontext, um Erwartungen zu wecken, die Kunden zu binden und Funktionen bereitzustellen, die den Anforderungen der Nutzer entsprechen.

Umfang

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

In diesem Codelab können Ihre Nutzer Artikel über den digitalen Agenten kaufen, den Nutzer an einen Zahlungsabwickler weiterleiten, um Geld einzuziehen, und dann eine Abholung ihrer fiktiven Artikel im Geschäft planen.

In diesem Codelab wird Ihre App

  • Über einen Vorschlagschip auf Fragen antworten
  • Nutzer dazu anleiten, Fragen zu stellen, die Ihr digitaler Kundenservicemitarbeiter beantworten kann
  • Bieten Sie umfangreiche dialogorientierte Funktionen, um das Interesse des Nutzers an der Unterhaltung aufrechtzuerhalten.

883b5a7f9f266276.png

Lerninhalte

  • Informationen zum Bereitstellen einer Webanwendung in App Engine auf der Google Cloud Platform. Alternativ können Sie ngrok verwenden, um Ihre lokale Anwendung öffentlich zu testen.
  • So konfigurieren Sie Ihr Business Messages-Konto mit einem Webanwendungs-Webhook, um Nachrichten von Nutzern zu empfangen
  • Rich-Media-Funktionen wie interaktive Chat-Nachrichten, Karusselle und Vorschläge für Antworten mit der Business Messages API senden
  • So werden Ihre Nachrichten in Business Messages gesendet

In diesem Codelab geht es darum, Ihren ersten digitalen Agenten zu erstellen.

Voraussetzungen

  • Für ein kostenloses Business Communications-Entwicklerkonto registrieren
  • Eine Anleitung dazu, wie
  • Android-Gerät mit Version 5 oder höher ODER iOS-Gerät mit der Google Maps App
  • Erfahrung in der Programmierung von Webanwendungen
  • Eine Internetverbindung.

2. Einrichtung

APIs aktivieren

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

So aktivieren Sie die Cloud Build API:

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

Dienstkonto erstellen

Für den Zugriff auf die Business Communications API und die Business Messages API müssen Sie ein Dienstkonto erstellen. Folgen Sie der Anleitung in der Dokumentation zum Erstellen eines Dienstkontos in der Business Communications Developer Console.

Django Python EchoBot-Startercode bereitstellen

Klonen Sie in einem Terminal das Django Echo Bot Sample 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 JSON-Datei mit den Anmeldedaten, die für das Dienstkonto erstellt wurde, 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, mit dem Sie sich für die APIs registriert 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 gerade bereitgestellte Startcode enthält eine Webanwendung mit einem Webhook zum Empfangen von Nachrichten von Business Messages. Die Anwendung gibt Nachrichten an den Nutzer zurück und kann einige der Rich Media-Funktionen der Konversationsschnittstelle präsentieren.

Webhook konfigurieren

Nachdem Ihr Dienst bereitgestellt wurde, verwenden Sie die URL der Anwendung, um die Webhook-URL auf der Seite Kontoeinstellungen in der Business Communications Developer Console festzulegen.

Die Webhook-URL ist die URL der Anwendung + „/callback/“. Beispiel: https://PROJECT_ID.appspot.com/callback/

Rufen Sie die Seite „Kontoeinstellungen“ in der Business Communications Console auf. Oben rechts unter der Navigationsleiste sollte der Name Ihres GCP-Projekts angezeigt werden. Wenn ein Drop-down-Menü angezeigt wird, wählen Sie Ihr GCP-Projekt aus.

Geben Sie die Details für den technischen Ansprechpartner ein und aktualisieren Sie dann Webhook mit der Webhook-URL für Ihre bereitgestellte Anwendung.

ceb66c905ded40be.png

Klicken Sie neben dem Verweis auf Ihr GCP-Projekt auf Speichern.

3. Ersten Agent erstellen

Business Communications Developer Console verwenden

Klicken Sie in der Business Communications Console links oben auf das Logo, um zum Konsolen-Dashboard zurückzukehren, und klicken Sie dann auf Agent erstellen. Sie erstellen eine Marke gleichzeitig mit dem Agent. Wählen Sie Business Messages für Agent-Typ aus und prüfen Sie, ob die Partnerinformationen korrekt sind.

Geben Sie unter Marke den Namen der Marke ein, die Sie erstellen. Die Marke ist das Unternehmen, mit dem Sie zusammenarbeiten. Nutzer können sich mit dem Agent unterhalten. Geben Sie unter Agent name (Agentname) an, was Nutzer im Business Messages-Unterhaltungsverlauf sehen sollen. Im Fall des fiktiven Unternehmens Bonjour Meal ist Bonjour Rail das Eisenbahnunternehmen, das die Restaurants von Bonjour Meal betreibt. Ich gebe also Bonjour Rail als Marke und Bonjour Meal als Agent an.

Der Agent ist die dialogorientierte Einheit, die die Marke repräsentiert.

88a9798e6546eb4e.png

Klicken Sie auf KI-Agent erstellen und lassen Sie die Konsole die Arbeit erledigen. Bei dieser Anfrage werden innerhalb weniger Sekunden mehrere Anfragen an die Business Communications API gesendet, um die Marke und den Kundenservicemitarbeiter zu erstellen. Sie können die Business Communications API direkt verwenden, um einen Agenten und eine Marke zu erstellen. In der Dokumentation finden Sie Informationen dazu, wie eine curl-Anfrage aussehen würde, um dieselben Aktionen wie die Console auszuführen.

Erste Unterhaltung

Öffnen Sie den gerade erstellten Agenten. Es wird eine Übersichtsseite angezeigt, auf der Sie mit der Überprüfung der Details Ihres Agenten beginnen können. Sehen Sie sich die Agent-Test-URLs an. Diese URLs werden verwendet, um die Konversationsoberfläche auf Ihrem Gerät aufzurufen.

f6bd8ded561db36f.png

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 verwenden. Senden Sie diese kopierte Nachricht auf beliebige Weise an Ihr Gerät.

Wenn Sie auf Ihrem Mobilgerät auf den Link tippen, wird der Business Messages Agent Launcher mit der Test-URL Ihres Agenten geöffnet.

Tippen Sie auf Starten, um die Konversationsoberfläche Ihres Agents aufzurufen.

2bf9f282e09062de.png

Interagieren Sie mit dem Agent und machen Sie sich ein Bild davon, was er kann. In den meisten Fällen werden Ihre Nachrichten nur wiederholt. Senden Sie beispielsweise „Hallo Welt!“ und Sie werden sehen, dass der Kundenservicemitarbeiter dieselbe Nachricht an Sie zurücksendet.

Die bereitgestellte Anwendung enthält auch eine Logik, mit der die umfangreichen Funktionen von Business Messages demonstriert werden.

  • Wenn Sie „card“ senden, wird eine interaktive Chat-Nachricht aufgerufen.
  • Wenn Sie „Chips“ senden, werden Vorschlagschips aufgerufen.
  • Wenn Sie „Karussell“ senden, wird ein Karussell mit interaktiven Chat-Nachrichten aufgerufen.

Glückwunsch! Dies ist die erste Unterhaltung Ihres KI-Agents mit Ihnen.

Mit den Rich-Funktionen können Sie der Person, die mit Ihrem Agent kommuniziert, mehr Kontext liefern. Senden Sie grafische Assets in interaktiven Chat-Nachrichten, um Ideen besser zu vermitteln, oder verwenden Sie Vorschlagschips, um das Gespräch zu lenken.

Begrüßungsnachricht aktualisieren und Konversations-Chips verwenden

Sehen wir uns die Developer Console an und erfahren Sie, wie Sie die Willkommensnachricht des Agents bearbeiten und Vorschlagschips verwenden können, um die Kommunikation des Nutzers zu erleichtern.

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

4323f988216fa054.png

Aktualisieren Sie die Willkommensnachricht (das gelbe Eingabefeld) so, dass sie Folgendes enthält:

Willkommen beim Bonjour Meal Starter-Agenten. Ich kann deine Nachrichten wiedergeben und dir einige der Rich-Media-Funktionen zeigen, die auf der Plattform unterstützt werden. Probiere diese Vorschläge aus.

Klicken Sie auf + Unterhaltungsbeginn hinzufügen (siehe lila Feld im Bild oben), um Unterhaltungsbeginne hinzuzufügen, mit denen Vorschlags-Chips, Karussells und Karten aufgerufen werden. Die von Ihnen hinzugefügten Gesprächsanfänge benötigen eine „text“- und eine „postbackData“-Komponente. Der Text wird dem Nutzer angezeigt, während die postBack-Daten an den Webhook Ihres Agents gesendet werden. Der Webhook parst die Postback-Daten und sendet die entsprechende Antwort an den Nutzer. 906bc74668a1b215.png

Die Agent information (Agenteninformationen) in der Konsole sehen nach der Änderung so aus:

8e96b0a10edd20af.png

Auf der rechten Seite der Konsole sehen Sie eine Vorschau des KI-Agenten. Beachten Sie, dass die Begrüßungsnachricht die Änderungen widerspiegelt, die Sie gerade vorgenommen haben, und dass darunter Vorschlagschips angezeigt werden.

So können Sie sich ein Bild davon machen, wie die Nutzererfahrung aussehen wird. Sie können es verwenden, während Sie Ihren Agent erstellen und die User Journeys planen, die Sie unterstützen möchten.

Leider werden diese Änderungen nicht sofort in der Unterhaltung angezeigt, da die vorherigen Daten in der Business Messages-Infrastruktur zwischengespeichert werden. Der Cache wird etwa alle 2 Stunden geleert. Du kannst es also morgen noch einmal versuchen.

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

4. Starter-Code analysieren

Quellcode aus der Vogelperspektive

Der bereitgestellte Startcode gibt Nachrichten an Nutzer zurück und kann eine Rich Card, ein Karussell oder Vorschlagschips präsentieren. Sehen wir uns den Quellcode genauer an, um zu verstehen, wie das funktioniert. Dann sehen wir, was wir ändern müssen.

Der Startcode ist ein Django-Projekt. Später in 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 und am Ende dieses Codelabs wissen Sie, wie es funktioniert.

Grob gesagt 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 Logik ausführen kann, wenn diese beiden URLs erkannt werden. Wenn die Projekt-URL https://PROJECT_ID.appspot.com/ lautet, sind die Routen, die dem Projekt bekannt sind, folgende:

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

Beide URL-Routen verweisen auf bopis_views aus bopis/views.py. Sehen wir uns an, was in dieser Datei passiert. Sehen wir uns zuerst 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 für das Stammverzeichnis des Projekts empfängt. Hier passiert nichts Besonderes: Wir geben einfach eine HTTPResponse mit etwas HTML an den Browser zurück, der die Anfrage gesendet hat. Sie können also die Stamm-URL des Projekts öffnen, aber dort gibt es nicht viel zu tun, da Sie wieder 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 also 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.")
...

Die Logik parst den Anfragetext nach einer message oder einer suggestionResponse und übergibt diese Informationen an eine Funktion namens route_message. Anschließend wird eine HttpResponse 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. So können Sie verstehen, was ein Nutzer sagt, und eine Antwort auf Grundlage dieser Informationen erstellen. Sie können die Nachricht auch weiterleiten, damit der Nutzer mit einem Kundenservicemitarbeiter in Kontakt treten kann. Sehen Sie sich das folgende Diagramm an:

b10113f9d037e6a5.png

Business Messages sendet den Nachrichteninhalt als JSON-Nutzlast an Ihren Webhook, wo er an einen Kundenservicemitarbeiter oder an eine Logik weitergeleitet wird, um als Bot zu antworten. In unserem Fall ist dieser Routingmechanismus 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)
...

Mit diesem Logikabschnitt wird die vom Nutzer empfangene Nachricht untersucht. Zuerst wird die Nachricht normalisiert, indem alle Zeichen in Kleinbuchstaben umgewandelt werden. Nach der Normalisierung wird geprüft, ob die Nachricht eine der Konstanten ist, die oben in der Datei definiert sind.

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 sucht also nach Nachrichten, die einen der Strings enthalten, die wir im vorherigen Schritt dieses Codelabs in die postback_data der Gesprächseinstiege eingefügt haben. Wenn keiner dieser Strings angezeigt wird, wird die Nachricht einfach an eine Funktion namens echo_message übergeben, die Nachrichten ausgibt.

Nachrichten senden

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

Wie sendet die Anwendung aber eine ausgehende Nachricht an einen Nutzer über Business Messages?

a9475b1da93a83e8.png

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

Für die Business Messages API sind Bibliotheken in Python, Node.js und Java verfügbar. Wir haben auch eine REST API, an die Sie Anfragen direkt senden können, wenn Ihre Infrastruktur nicht in einer Sprache ist, für die wir eine Bibliothek haben. Unter Nachrichten senden erfahren Sie, wie cURL verwendet wird, um eine Nachricht an eine bestimmte Konversations-ID zu senden.

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

Sehen wir uns die Funktion echo_message an und 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)
...

In 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 send_message-Funktion verwendet lediglich Ihre Dienstkontoanmeldedaten, um zu bestätigen, dass Sie Nachrichten an diese Unterhaltung senden können. Dazu wird ein Business Messages-Client instanziiert und eine Anfrage zum Senden der Nachricht an die angegebene conversation ID erstellt.

Auch für die Rich-Funktionen wird diese send_message-Funktion verwendet. Die Nachrichten, die damit erstellt werden, sind jedoch speziell auf interaktive Chat-Nachrichten, Karusselle und Vorschlagschips ausgerichtet. Rich Cards und Karussells können grafische Assets enthalten, während Vorschlagschips postback_data haben, damit die Callback-Logik sie entsprechend parsen kann.

Nachdem wir uns angesehen haben, wie eine Nachricht gesendet wird, sehen wir uns nun an, wie im Beispiel Rich Cards, Karussells und Vorschlagschips gesendet werden. Im folgenden Abschnitt ändern wir den Quellcode, um Nachrichten mit einigen dieser Rich-Media-Funktionen zu senden.

Wenn Sie bereit sind, können wir den Bonjour Meal-Agenten anpassen.

5. KI-Agent anpassen

Wenn Sie dem Codelab bisher gefolgt sind, sollte Ihr Agent jetzt angezeigt werden.

906bc74668a1b215.png

Okay, das ist nicht so schön. Es sieht ziemlich kahl aus und repräsentiert unser Unternehmen nicht wirklich gut. Glücklicherweise haben wir ein grundlegendes Wissen über den Code, der den Agent unterstützt, und die Tools, die wir benötigen, um unseren Agenten nach Belieben anzupassen.

Im weiteren Verlauf dieses Codelabs erweitern wir den Agenten mit den folgenden Funktionen:

  • Ein echtes Logo einfügen
  • Verbesserte Willkommensnachricht
  • Informationen zu Öffnungszeiten angeben
  • Den Nutzer darüber informieren, dass der Onlinekauf von Artikeln bald möglich sein wird
  • Verwendung von Vorschlägen für Unterhaltungen, um die Unterhaltung zu erleichtern

Wir nutzen die Business Communications Console, um das Logo und die Begrüßungsnachricht zu aktualisieren. Sie haben aber jederzeit die Möglichkeit, die Business Communications APIs direkt zu verwenden, um dasselbe zu tun. Dann müssen wir den Quellcode aktualisieren, damit entsprechende Nachrichten gesendet werden, in denen Informationen zu den Öffnungszeiten angegeben werden und darauf hingewiesen wird, dass Bonjour Meal bald eine Online-Shopping-Funktion anbieten wird. Anschließend kehren wir zur Business Communications Console zurück und erstellen Vorschläge für Konversationschips, um die Konversation auf die unterstützten Happy-Path-Erlebnisse des digitalen Kundenservicemitarbeiters auszurichten.

Wählen Sie in der Business Communications Console Ihren Agent aus und rufen Sie die Agent-Informationen auf. Wir müssen das Firmenlogo aktualisieren, wie unten gelb dargestellt.

eb6b8ac6b62387ee.png

Klicken Sie auf Hochladen. Sie können dann ein Bild zum Hochladen auswählen oder über eine URL importieren.

In der Dokumentation finden Sie Richtlinien für das Logodesign mit Best Practices für die Verwendung eigener Logos.

Laden wir das Logo hoch, das sich im Quellcode befindet, den Sie zu Beginn dieses Codelabs geklont haben. Sie finden es im Verzeichnis „./assets/“ des Repositorys. Die Datei heißt „bonjour_meal-logo.png“. Sie können die Datei in das Modal im Webbrowser ziehen. Es wird ein einfaches Bearbeitungstool angezeigt, mit dem Sie die Bildqualität und den Zuschnitt anpassen können. Passen Sie die Bildauflösung an und schneiden Sie das Bild so zu, dass es die maximale Dateigröße von 50 KB nicht überschreitet. Wenn Sie mit dem Bild zufrieden sind, klicken Sie auf das Häkchen im blauen Kreis, um es zu bestätigen, und klicken Sie unten im Modal auf Auswählen.

1856081f59623ae2.png

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

Willkommensnachricht aktualisieren

Die Willkommensnachricht haben wir bereits früher in diesem Codelab aktualisiert. Wir wiederholen das, konfigurieren aber diesmal eine Willkommensnachricht, die besser zum Nutzerverhalten von Bonjour Meal passt.

Wählen Sie in der Business Communications Console Ihren Agent aus und rufen Sie Agent information (Agent-Informationen) auf. Scrollen Sie nach unten, bis Sie das Eingabefeld Begrüßungsnachricht sehen. Dort können Sie die Nachricht aktualisieren.

6598fec47021136e.png

Da wir Gesprächsanfänge hinzufügen werden, können wir in unserer Willkommensnachricht darauf verweisen. Ersetzen wir den Text im Eingabefeld durch Folgendes:

„Willkommen bei Bonjour Meal. Ich bin ein Assistent, der Ihnen bei Fragen zu Bonjour Meal helfen kann. Probieren Sie einige der folgenden Optionen aus.“

Klicken Sie abschließend oben rechts auf der Seite Agent information (Informationen zum Kundenservicemitarbeiter) auf Save (Speichern). Auch hier kann es aufgrund unseres Caching-Mechanismus etwas dauern, bis die Änderung übernommen wird.

Öffnungszeiten angeben

Um diese Informationen an Nutzer weiterzugeben, senden wir über die Business Messages API eine benutzerdefinierte Nachricht an den Nutzer.

Sie erinnern sich vielleicht, dass Nachrichten in der Funktion route_message von views.py geparst werden. Die Funktion normalisiert zuerst den String und prüft dann, ob die normalisierte Nachricht mit einem der fest codierten Parameter übereinstimmt. Der Einfachheit halber fügen wir eine zusätzliche Bedingung hinzu, mit der geprüft wird, ob die normalisierte Nachricht gleich einer neuen Konstanten ist, die wir CMD_BUSINESS_HOURS_INQUIRY nennen und die den Wert „business-hours-inquiry“ enthält. Wenn die Bedingung als „true“ ausgewertet wird, rufen wir eine Funktion namens send_message_with_business_hours auf.

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: Zuerst müssen wir CMD_BUSINESS_HOURS_INQUIRY zusammen mit den anderen Konstanten definieren und dann die Funktion send_message_with_business_hours definieren und eine Nachricht über die Business Messages API senden.

Definieren wir zuerst die Konstante oben in 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'
...

Und jetzt definieren wir send_message_with_business_hours. Sie können diese Funktion an beliebiger Stelle in der Datei definieren, sofern Sie die entsprechende Python-Syntax einhalten. Da diese Funktion nur eine Nachricht sendet, ähnlich wie echo_message, können Sie sie als Vorlage verwenden, um diese 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)
...

Unser Bot sollte dann in der Lage sein, dem Nutzer mit diesen Geschäftszeiten zu antworten, wenn er die folgende Nachricht sendet: „business-hours-inquiry“. Die Ausgabe sollte in etwa so aussehen:

125802166995afd5.png

Sobald Sie den Quellcode in GCP bereitstellen, sind die Änderungen sofort sichtbar. Die Webanwendung wird in Google Cloud Platform nicht auf dieselbe Weise wie Agent-Informationen im Cache gespeichert. Sie können diese Funktion also sofort testen.

Da wir gerade dabei sind, Änderungen an der Quelle vorzunehmen, sollten wir noch eine weitere Änderung vornehmen, damit ein Nutzer nach Online-Shopping fragen kann. Ihr digitaler Kundenservicemitarbeiter antwortet, dass die Funktion noch nicht verfügbar ist, Sie aber später noch einmal nachsehen können.

Nutzer darüber informieren, dass Online-Shopping bald möglich sein wird

Wir nehmen eine ähnliche Änderung vor wie bei der Benachrichtigung des Nutzers über die Geschäftszeiten. Dieses Mal platzieren wir die Informationen in einer Rich Card zusammen mit einem ansprechenden Bild.

Die normalisierte Nachricht wird geparst und es wird eine Bedingung für eine Konstante namens CMD_ONLINE_SHOPPING_INQUIRY mit dem Wert „online-shopping-inquiry“ geprüft, die send_online_shopping_info_message aufruft, wenn die Bedingung wahr 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 wir nun send_online_shopping_info_message. Wir möchten, dass diese Nachricht in einer Rich Card mit einem Bild gesendet wird. Kopieren wir also die send_rich_card-Funktion, um sie als Vorlage zum Definieren von send_online_shopping_info_message zu verwenden.

Zuerst sollten wir den Fallback-Text mit einer geeigneten Meldung aktualisieren. Der Fallback-Text wird verwendet, wenn das Gerät aus irgendeinem Grund keine Rich Card empfangen kann. Als Nächstes sollten wir BusinessMessagesRichCard aktualisieren, um einen relevanten Titel, eine Beschreibung, Vorschläge und ein Media-Feld einzufügen. Unsere 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 Kundenservicemitarbeiter kann jetzt auf Nutzer reagieren, die sich nach Online-Shopping erkundigen. Derzeit unterstützt unser digitaler Kundenservicemitarbeiter noch nicht den Onlinekauf. Wir informieren den Nutzer daher darüber, dass die Funktion bald verfügbar sein wird. So sieht unser digitaler Kundenservicemitarbeiter aus, wenn der Nutzer sich nach Online-Shopping erkundigt.

5cd63c57c1b84f9a.png

Genau wie bei der vorherigen Änderung, die es Nutzern ermöglichte, nach Geschäftszeiten zu fragen, ist diese Änderung sofort sichtbar, wenn Sie ngrok verwenden, oder sobald Sie den Code in GCP App Engine bereitstellen.

Im nächsten Teil verwenden wir Gesprächseinstiege und Vorschlagschips, um die Unterhaltung auf den Happy Path zu lenken.

Chips verwenden, um die Unterhaltung zu steuern

Wir haben einige Änderungen am Quellcode vorgenommen und den aktualisierten digitalen Kundenservicemitarbeiter bereitgestellt. Wir würden aber nie erwarten, dass Nutzer „business-hours-inquiry“ oder „online-shopping-info“ eingeben, um sich nach dem Unternehmen zu erkundigen. Wir aktualisieren die Gesprächseinstiege so, dass der Nutzer beim Öffnen der Unterhaltung nicht nur mit einer freundlichen Begrüßungsnachricht begrüßt wird, sondern auch Gesprächseinstiege erhält.

Rufen Sie die Business Communications Console auf und greifen Sie auf die Seite Agent-Informationen Ihres Agents zu. Wir haben bereits Gesprächseinstiege für „Chips“, „Karte“ und „Karussell“ definiert. Sie funktionieren zwar noch, sind aber für unsere Geschäftsfunktion nicht mehr relevant. Sie können sie beibehalten, um diese umfangreichen Funktionen weiterhin zu präsentieren, oder entfernen, damit Ihr digitaler Agent Unterhaltungsanfänge speziell für das Unternehmen Bonjour Meal anzeigt.

Wir erstellen zwei neue Gesprächseinstiege. Legen Sie für die erste Antwort den Text auf „What are your business hours?“ (Wie sind Ihre Geschäftszeiten?) und die Postback-Daten auf „business-hours-inquiry“ (Anfrage zu Geschäftszeiten) fest. Legen Sie für den zweiten Gesprächseinstieg den Text auf „Kann ich hier Einkäufe tätigen?“ und die Postback-Daten auf „online-shopping-info“ fest.

Das Ergebnis sollte die Konfiguration wie im folgenden Screenshot sein:

ef6e6888acea93e3.png

Wie bei anderen Änderungen, die in der Business Communications Console vorgenommen werden, dauert es einige Zeit, bis die Änderungen übernommen werden und auf Ihrem Mobilgerät sichtbar sind.

Nachdem wir uns mit Gesprächseinstiegen beschäftigt haben, brauchen wir auch eine Möglichkeit, den Nutzer auf den richtigen Weg zu lenken, sobald die Unterhaltung begonnen hat. Chips können kontextbezogen verwendet werden, nachdem eine Nachricht gesendet wurde, um den Nutzer zu anderen Funktionen zu führen, die der digitale Agent bietet. Wenn der Nutzer nach den Geschäftszeiten oder nach Online-Shopping fragt, senden wir eine Nachricht mit einem Vorschlag, etwas anderes mit dem Agent 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)
...

Das Textfeld in einem BusinessMessagesSuggestion-Objekt ist auf 25 Zeichen begrenzt, wie in der Dokumentation beschrieben.

Hier sind einige Screenshots der erwarteten Benutzeroberfläche mit aktualisierten Gesprächsanfängen und der strategischen Verwendung von Vorschlagschips.

ef57695e2bacdd20.png

6. Glückwunsch

Herzlichen Glückwunsch! Sie haben Ihren ersten digitalen Business Messages-Agenten erstellt.

Sie haben eine Webanwendung zur Unterstützung Ihres digitalen Kundenservicemitarbeiters in Business Messages bereitgestellt, den Kundenservicemitarbeiter mit der Business Communications Console geändert und die Nutzerfreundlichkeit durch Änderungen am Quellcode verbessert.

Sie kennen jetzt die wichtigsten Schritte, die erforderlich sind, um eine interaktive Business Messages-Funktion zu erstellen. Die Möglichkeiten sind vielfältig. Ihr Agent kann erweitert werden, um die Suche nach Inventar zu unterstützen oder einen Einkaufswagen einzuführen, um zu verfolgen, wofür sich der Nutzer interessiert. Sie können ein Karussell verwenden, um Elemente im Menü zu präsentieren, und dem Nutzer mithilfe von Vorschlägen ermöglichen, Elemente auszuwählen, die ihn interessieren.

Hier ist ein kleiner Vorgeschmack darauf, wie das aussehen könnte.

57d2bb7b0ec38c81.png

Wie kann ich eine gute dialogbasierte Erfahrung schaffen?

Die besten Agents liefern dem Nutzer Kontextinformationen und bieten ihm gleichzeitig Funktionen über die Konversation, damit er mit dem Unternehmen interagieren kann, wie er es normalerweise am Telefon oder sogar persönlich tun würde. Überlegen Sie, wie die folgenden Themen auf ein Gespräch zutreffen könnten, das Sie mit einem Unternehmen führen möchten, mit dem Sie zusammenarbeiten.

Kontext bereitstellen und Erwartungen festlegen

Kontext kann alles sein, von der expliziten Angabe, wie Sie dem Nutzer helfen können, bis hin zur Einführung des digitalen Agenten mit einer Persona, mit der sich der Nutzer identifizieren kann. Bei erfolgreichen Agents in Business Messages wird der repräsentative Avatar verwendet, um dem Nutzer zu zeigen, mit wem er spricht.

Das Festlegen von Erwartungen hängt von der Nutzererfahrung ab, die Sie entwickeln. Wenn Ihr Agent beispielsweise die Inventarsuche unterstützt, informieren Sie den Nutzer zuerst darüber, dass die Verfügbarkeit möglicherweise gering ist, bevor Sie die Antwort geben.

Funktionen für den Nutzer bereitstellen

Verbraucher treten ständig mit Unternehmen in Kontakt. Business Messages kann komplexe Nutzerinteraktionen unterstützen, z. B. Anfragen zum Status einer Bestellung oder zur Verfügbarkeit eines Artikels. Viele Nutzer rufen Unternehmen weiterhin an, um Antworten auf ihre Fragen zu erhalten, auch wenn die Antworten auf der Website des Unternehmens verfügbar sind. Das Ergebnis ist, dass Unternehmen mehr Ressourcen investieren müssen, um das Anrufvolumen zu bewältigen, insbesondere während der Feiertage.

Nutzer bei der Stange halten

Stellen Sie dialogorientierte Touchpoints bereit, um den Nutzer in der Unterhaltung zu halten. Zwischen den Nachrichten können Sie Tippanzeigen aufrufen, um dem Nutzer mitzuteilen, dass Sie eine Antwort für ihn verarbeiten.

Mit umfangreichen Funktionen wie Tippanzeigen, Vorschlagschips, Rich Cards und Karussells können Sie den Nutzer durch die Happy-Path-Nutzererfahrung führen, damit er bestimmte Aufgaben wie das Bestellen aus einem Menü erledigen kann. Ziel ist es, die Anzahl der Anrufe an die Telefonnummer eines Unternehmens zu verringern.

Es ist wichtig, dass ein Gespräch dem Nutzer Funktionen bietet. Nutzer, die über Messaging mit einem Unternehmen in Kontakt treten, erwarten, dass ihre Fragen schnell beantwortet werden. In einer nicht idealen Situation kann der digitale Kundenservicemitarbeiter die Unterhaltung nicht fortsetzen, was zu einer schlechten Nutzererfahrung führen kann. Glücklicherweise gibt es Möglichkeiten, dies zu umgehen, z. B. die Übertragung des Gesprächs an einen Kundenservicemitarbeiter. Dies wird in einem zukünftigen Codelab behandelt.

Nächste Schritte

Wenn Sie bereit sind, können Sie sich die folgenden Themen ansehen, um mehr über komplexere Interaktionen zu erfahren, die Sie in Business Messages ermöglichen können.

Referenzdokumente