Rich Content mit Dialogflow Messenger

Vorschau

Dieses Produkt oder diese Funktion unterliegt den „Nutzungsbedingungen für Pre-GA-Angebote“ im Abschnitt „Allgemeine Nutzungsbedingungen“ der dienstspezifischen Nutzungsbedingungen. Pre-GA-Produkte und -Funktionen sind unverändert verfügbar und werden möglicherweise nur eingeschränkt unterstützt. Weitere Informationen finden Sie in den Beschreibungen der Startphase.

In dieser Anleitung wird erläutert, wie Sie Rich Media-Inhalte an Dialogflow Messenger senden.

Schritt 1: addRichContent-Tool im Agent erstellen

Erstellen Sie ein Funktionstool namens addRichContent mit den folgenden Daten:

Tool-Eingabe:

properties: {}
type: object

Tool-Ausgabe:

properties:
  status:
    type: string
  reason:
    type: string
type: object

Schritt 2: Kundenservicemitarbeitern mitteilen, wie dieses Tool verwendet werden soll

Teilen Sie dem Agent in Anleitungen und Beispielen mit, wie er das Tool verwenden soll.

Fügen Sie Ihrer Anleitung zum Beispiel Folgendes hinzu:

-  Greet  the  user
-  Ask  the  user  what  their  favorite  color  is.
   At  the  same  time  run  ${TOOL:  addRichContent}  to  display  buttons
   for  blue,  red,  yellow,  and  green.
-  Thank  the  user

Erstellen Sie beispielsweise ein Beispiel wie das folgende:

Beachten Sie, dass die Syntax für die komplexen Inhalte mit derjenigen übereinstimmt, die Sie verwenden würden, wenn Sie eine benutzerdefinierte Nutzlast in einem ablaufbasierten virtuellen Agent zurückgeben.

Schritt 3: JavaScript definieren

Im Code für die Seite, die df-messenger hostet, musst du JavaScript-Code erstellen, der eine Funktion definiert, die df-messenger anweist, den Rich Content zu rendern. Sie müssen diese Funktion außerdem bei df-messenger registrieren, damit sie weiß, dass die Funktion ausgeführt wird, wenn der virtuelle Kundenservicemitarbeiter sie benötigt.

Achten Sie darauf, dass die Variable dfMessenger deklariert ist und auf Ihre Instanz von df-messenger verweist.

Hier ist Beispielcode, den Sie zu diesem Zweck verwenden können:

const dfMessenger = document.querySelector('df-messenger');

function  addRichContent(customPayload)  {
  dfMessenger.renderCustomCard(customPayload.richContent);

  // add error handling

  return  Promise.resolve({  status:  "OK",  reason:  null  });
}

// substitute your own tool id

const  toolId  =  'projects/PROJECT_ID/locations/LOCATION/agents/AGENT_ID/tools/TOOL_ID'
dfMessenger.registerClientSideFunction(toolId,  addRichContent.name,  addRichContent);