Rich Content mit Dialogflow Messenger

In diesem Leitfaden erfahren Sie, wie Sie Rich Content bis Dialogflow Messenger.

Schritt 1: addRichContent-Tool im Agent erstellen

Erstellen: Funktionstool addRichContent mit den folgenden Daten aufgerufen:

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

Agent anweisen, wie das Tool verwendet wird in Anleitungen und Beispielen.

Beispiel: fügen Sie Ihrer Anleitung 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

Beispiel: erstellen Sie ein Beispiel wie das folgende:

Screenshot des Beispiels

Beachten Sie, dass die Syntax für den Rich Content die gleiche ist wie Sie eine benutzerdefinierte Nutzlast in einem ablaufbasierten virtuellen Agenten zurückgeben.

Schritt 3: JavaScript definieren

Im Code für die Seite, die df-messenger hostet, müssen Sie JavaScript-Code erstellen, definiert eine Funktion, die df-messenger anweist, den Rich Content zu rendern. Sie müssen diese Funktion auch bei df-messenger registrieren, sodass er weiß, dass er die Funktion ausführt, wenn der virtuelle Kundenservicemitarbeiter sie benötigt.

Die Variable dfMessenger muss deklariert sein und verweist auf Ihre Instanz von df-messenger.

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