在对话流中用图像+按钮进行回答与充实 [英] Answer with an image + button in dialogflow chat with fulfillment

问题描述

我正忙于越来越多地了解dialogflow及其必须提供的各种可能性，但此刻我一直处于困境之中.

我现在有什么?通过我的dialogflow代理，现在可以从荷兰政府到特定国家/地区请求当前的旅行建议.因此，当用户问:给我西班牙的旅行建议"时，对话流将使用政府部门的当前旅行建议进行响应.

正在从Google表格导入数据.在此Google表格中，我从政府网站获取实时旅行建议数据.我用来向用户提供旅行建议的代码是:

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

在电子表格(数据来自其中)中，我还向旅行建议的地图(图片)添加了一个网址(

为了访问后续意图中的先前持久数据，请配置

最后，您可以使用 Dialogflow卡响应发送图像或交互式按钮，如下面的示例.

  function yes(agent){const mapimage = agent.parameters.mapimage;const webpage = agent.parameters.webpage;agent.add(new Card({title:`Title:这是卡片标题，'imageUrl:mapimage，文字:这是卡片的正文."，buttonText:这是一个按钮"，buttonUrl:网页}));} 

请注意，下面的实现选项-up意向必须启用，并且在实现代码中，该意向必须映射到一个函数.

  intentMap.set('您的意图名称在这里'，yourFunctionHandler); 

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!

解决方案

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

这篇关于在对话流中用图像+按钮进行回答与充实的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！