Answer with an image + button in dialogflow chat with fulfillment

问题

I'm busy with learning more and more about dialogflow and the different possibilities that it has to offer but I'm stuck at the moment.

What do I have now? Via my dialogflow agent it is possible at the moment to request the present travel advice from the Dutch gouverment to a specific country. So when an user is asking: 'give me the travel advice to Spain' the dialogflow will respond with the current travel advice from the gouverment.

The data is being imported from a Google Sheet. In this Google Sheet I fetch the realtime travel advice data from the gouverment webpage. The code I use to give the travel advice as feedback to the user is:

`function reisadviesHandler(agent) {
  const bestemming = agent.parameters.bestemming;
  return getSpreadsheetDataReisadvies().then(res => {
    res.data.map(land => {
      if(land.bestemming === bestemming)
      agent.add(`Momenteel staat het reisadvies voor ${bestemming} op ${land.kleurcode}. Het Ministerie van Buitenlandse Zaken zegt verder: ${land.melding}. Is er nog iets anders waar ik je mee kan helpen?`);
    });
  });
}`

Within the spreadsheet (where the data is coming from) I also added an url to the map (picture) of the travel advice (example) in column D called 'mapimage'. With ${land.mapimage} I can pull the correct url to the right image for a specific country (the country is the dynamic value input from the user).

What I want to do After the present answer:

Momenteel staat het reisadvies voor ${bestemming} op ${land.kleurcode}. Het Ministerie van Buitenlandse Zaken zegt verder: ${land.melding}. Is er nog iets anders waar ik je mee kan helpen?

I want to ask if the user want to see the present travel advice map (image). If they respond / click on 'yes' the chatbot has to sent the picture(map) of the destination. Beside that I also want to add a button that makes it possible to forward the user to the correct gouverment webpage for more information regarding the travel advice.

At this moment sending the map (image) is the main issue, I don't know how to preform this within my present fulfillment code. Hope that anyone can help / explain this so I can continue building this chatbot happily :) Thx!

回答1:

Based on your use-case description, a follow-up intent could be used, since it is a child of its associated parent intent and is commonly used for replies like ‘yes’, ’no’ or ‘cancel’. Also, you could use one of the predefined follow-up intents or create a custom one.

Additionally, since the answer is in function of the country value given by the user, the information of the selected country has to be persisted within the active context, so it could be used within a follow-up intent. In order to persist data into the active context the function agent.setContext() can be used, by adding the data as parameters within your fulfillment code as follows.

function reisadviesHandler(agent) { 
   const bestemming = agent.parameters.bestemming; 
   return getSpreadsheetDataReisadvies().then(res => { 
      res.data.map(land => { 
          if(land.bestemming === bestemming) {
             agent.add(`Momenteel staat het reisadvies voor ${bestemming} op ${land.kleurcode}. Het Ministerie van Buitenlandse Zaken zegt verder: ${land.melding}. Is er nog iets anders waar ik je mee kan helpen?`);
             agent.setContext({ name: 'your context name here', lifespan: 1, parameters: { [param-name]: land.mapimage , [param-name]: land.website }}); // You can use your current context name or a new one is created with the name provided.
         }
      }); 
   }); 
}

By using the Dialogflow simulator you could see which are the contexts and active parameters during the intents interaction.

In order to access the previous persisted data within the follow-up intent configure the intent parameters pointing to the context parameters with that information.

Finally, you can use the Dialogflow Card response to send images or interactive buttons, like the below example.

function yes(agent) {
    const mapimage = agent.parameters.mapimage;
    const webpage = agent.parameters.webpage;
    agent.add(new Card({
         title: `Title: this is a card title`,
         imageUrl: mapimage,
         text: `This is the body text of a card.`,
         buttonText: 'This is a button',
         buttonUrl: webpage
         })
      );
   }

Please note that the fulfillment option within the follow-up intent has to be enabled and also within the fulfillment code, the intent has to be map to a function.

intentMap.set('your intent name here', yourFunctionHandler);

来源：https://stackoverflow.com/questions/63724904/answer-with-an-image-button-in-dialogflow-chat-with-fulfillment