Contenu enrichi avec Dialogflow Messenger

Ce guide explique comment envoyer contenu enrichi à Dialogflow Messenger.

Étape 1 : Créez un outil addRichContent dans votre agent

Créez un outil de fonction appelé 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: Expliquez à votre agent comment utiliser cet outil

Indiquez à votre agent comment utiliser l'outil en lui fournissant des instructions et des exemples.

Par exemple, ajoutez quelque chose comme 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:

Capture d'écran d'un exemple

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