Ce guide explique comment envoyer contenu enrichi à Dialogflow Messenger.
Étape 1: Créez un outil addRichContent dans votre agent
Créez un outil pour les fonctions addRichContent avec les données suivantes:
Entrée de l'outil:
properties: {}
type: object
Résultat de l'outil:
properties:
status:
type: string
reason:
type: string
type: object
Étape 2: indiquer à votre agent comment utiliser cet outil
Indiquez à votre agent comment utiliser l'outil dans les instructions et les exemples.
Par exemple, ajoutez ce qui suit à vos instructions:
- 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
Par exemple, créez un exemple semblable à celui-ci:
Notez que la syntaxe du contenu enrichi est la même que celle utilisée si vous deviez renvoyer une charge utile personnalisée dans un agent virtuel basé sur le flux.
Étape 3: Définissez le code JavaScript
Dans le code de la page qui héberge df-messenger,
vous devez créer du code JavaScript
qui définit une fonction qui indique à df-messenger d'afficher le contenu enrichi.
Vous devez également enregistrer cette fonction avec df-messenger,
pour qu'il sache qu'il doit exécuter la fonction
lorsque l'agent virtuel en a besoin.
Assurez-vous que la variable dfMessenger est déclarée
et pointe vers votre instance de df-messenger.
Voici un exemple de code que vous pouvez utiliser:
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);