Contenuti avanzati con Dialogflow Messenger

Questa guida spiega come inviare contenuti avanzati a Dialogflow Messenger.

Passaggio 1: crea uno strumento addRichContent nel tuo agente

Crea uno strumento di funzione denominato addRichContent con i seguenti dati:

Input dello strumento:

properties: {}
type: object

Output dello strumento:

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

Passaggio 2: spiega all'agente come utilizzare questo strumento

Indica all'agente come usare lo strumento nelle istruzioni e negli esempi.

Ad esempio, aggiungi qualcosa di simile al seguente alle tue istruzioni:

-  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

Crea un esempio simile al seguente:

Tieni presente che la sintassi per i contenuti avanzati è la stessa che useresti se restituissi un payload personalizzato in un agente virtuale basato sul flusso.

Passaggio 3: definisci il codice JavaScript

Nel codice della pagina che ospita df-messenger, devi creare un codice JavaScript che definisca una funzione che indichi a df-messenger di eseguire il rendering dei contenuti avanzati. Devi anche registrare la funzione con df-messenger, in modo che sappia di eseguire la funzione quando l'agente virtuale ne ha bisogno.

Assicurati che la variabile dfMessenger sia dichiarata e rimandi alla tua istanza di df-messenger.

Ecco alcuni esempi di codice che puoi utilizzare a questo scopo:

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