Cards are not showing the Dialogflow messenger? - dialogflow-es

I am new to google Dialogflow and trying to add cards in Dialogflow messenger.
Below is my code to display the cards on Dialogflow messenger. Please help me out.
Cards are not showing up in the messenger.
I have created an intent to call the cards as well.
function welcome(agent) {
agent.add(`Welcome to my agent!`);
}
function fallback(agent) {
agent.add(`I didn't understand`);
agent.add(`I'm sorry, can you try again?`);
}
// // Uncomment and edit to make your own intent handler
// // uncomment `intentMap.set('your intent name here', yourFunctionHandler);`
// // below to get this function to be run when a Dialogflow intent is matched
function cards(agent) {
agent.add(`This message is from Dialogflow's Cloud Functions for Firebase editor!`);
agent.add(new Card({
title: 'Title: this is a card title',
imageUrl: 'https://developers.google.com/actions/images/badges/XPM_BADGING_GoogleAssistant_VER.png',
text: 'This is the body text of a card. You can even use line\n breaks and emoji! 💁',
buttonText: 'This is a button',
buttonUrl: 'https://assistant.google.com/'
})
);}
// Run the proper function handler based on the matched Dialogflow intent name
let intentMap = new Map();
intentMap.set('Default Welcome Intent', welcome);
intentMap.set('Default Fallback Intent', cards);
//intentMap.set('Dialogflow Cards', cards);
// intentMap.set('your intent name here', googleAssistantHandler);
agent.handleRequest(intentMap);
});

Cards are a Google Assistant element and will only show on devices or platforms that support Google Assistant. The web simulator of Dialogflow only supports text based responses.
If you want to see the card response, you should integrate your project with Google Assistant via the integrations tab and test your bot in the Google Assistant simulator or on a real Google Assistant device.

Related

How to add Suggestion Chips through Fulfillment for the Dialogflow Messenger integration?

So I have the Dialogflow Messenger embedded in a website and want to add some Suggestion chips. It's easy through the Custom Payload Response type and they show up just fine.
But how do I add them through fulfillment?
I currently have a custom webhook setup and the idea is to have something like this:
if (x) {
agent.add('blablabla');
agent.add(new Suggestion('One');
} else {
agent.add('blablabla');
agent.add(new Suggestion('Two');
}
new Suggestion doesn't work though, so is there another way of doing this?
I was thinking about something like this:
agent.add(new Payload(
"richContent": [
[
{
"options": [
{
"text": "One"
},
{
"text": "Two"
}
],
"type": "chips"
}
]
]));
Essentially trying to insert the Custom Payload directly into the response JSON, if that makes any sense. But yeah no idea how to actually do it. Anyone know how?
It is unclear to me what you exactly mean by new Suggestion() doesn't work. You mean the suggestion chips do not show in Dialogflow Messenger? Do they show in Dialogflow itself?
Let me share a few points:
As far as I know the structure agent.add(new Suggestion(“One”)); should work. I tried a simple example and it is working fine in Dialogflow UI, with the code:
const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion} = require('dialogflow-fulfillment');
process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
const agent = new WebhookClient({ request, response });
console.log('Dialogflow Request headers: ' + JSON.stringify(request.headers));
console.log('Dialogflow Request body: ' + JSON.stringify(request.body));
let intentMap = new Map();
intentMap.set('Default Welcome Intent', welcome);
intentMap.set('Default Fallback Intent', fallback);
function welcome(agent){
agent.add("What is your favorite animal?");
agent.add(new Suggestion("Dog"));
agent.add(new Suggestion("Cat"));
}
function fallback(agent) {
agent.add(`I didn't understand`);
agent.add(`I'm sorry, can you try again?`);
}
agent.handleRequest(intentMap);
});
If suggestions chips are not rendered even in Dialogflow UI I would suggest trying the previous code to discard any potential issues with your Dialogflow setup. You may need to upgrade some dependencies e.g. "dialogflow-fulfillment": "^0.6.1".
Some integrations, like Google Assistant use the Suggestions library from actions-on-google. See for example official Google Assistant code example. You may try to follow a similar behavior if it fits your use case although I do not think it is the case. As a reference you can check this github issue.

How can i send Quick Replies to Facebook Through Dialogflow Fulfillment

I am trying to send Quick Replies to Facebook users through Dialogflow Fulfillment and I have not been able to achieve that I have tried a lot and have not succeeded Is there any help
Codes i have tried:
#1 :
function QuickReplies(agent) {
agent.add(“Select one”);
agent.add(new Suggestion(“Quick Reply”));
agent.add(new Suggestion(“Suggestion”));
}
#2 :
function QuickReplies(agent)
{
const quickReplies1 = new Suggestion({
title: "What do you want to do?",
reply: "Next",
platform: 'FACEBOOK'
})
quickReplies1.addReply_("Cancel");
agent.add(quickReplies1);
}
So, the first step is to import the Suggestion module as:
const {Suggestion} = require('dialogflow-fulfillment')
Then you can do something like your first function (I do not see any problem in your code).
Finally, you have to associate it with one of your intents:
let intentMap = new Map();
intentMap.set('Your intent's name', QuickReplies);
agent.handleRequest(intentMap);
Keep in mind that even if your intent has other components (text, cards) you can still append quick replies to it.

Dialogflow Fulfillment - Mutiple Intents

I need some help in creating the fulfillment for the intents that i have created in Dialog flow. There are 15 intents that i have created and i have integrated them and tested and it works fine. I am stuck in fulfillment and unable to proceed since i am confused whether the fulfillment setup. Since has to be done for every intent that i have created i believe. I am unsure how to do this to complete by one click using fulfillment link on the left pane. does it work if i just directly click on fulfillment and deploy. I am really confused. Please help me out.
Setting up Fulfillment is a multi-step process.
Enabling Fulfillment
Select Fulfillment on the left navigation
If your fulfillment code will be running at a remote webhook, enable "Webhook" and enter the URL for your webhook.
If you don't have a place to run your fulfillment code, you can also use the Inline Editor to get started. Enable this, and you'll be entering your code here directly.
Save the configuration.
Enabling for each Intent
While this sets the Fulfillment that will be used for your project, you must still enable this for each Intent that should call it.
Go back to the Intent listing and select an Intent.
Scroll towards the bottom of the page in the Fulfillment section.
Turn "Enable webhook call for this intent" on.
Save the configuration.
Repeat this for every Intent that you want to process using Fulfillment.
Deploying your webhook
You will also need to write your webhook to handle the various Intents that are triggered. The code for the Inline Editor can be a good place to start.
In the intentMap, you will need to add a map from the Intent name to a function that will do the handling when that Intent triggers the webhook. You can have a different handler function for each Intent, use the same function for some, have those functions call other functions, whatever you need.
A couple of things to note, however:
If your handler needs to do an asynchronous function (access a database, make a network call, etc), then you need to make sure you return a Promise.
If you're using the Inline Editor and you're making network calls outside of Google's network, then you need to upgrade your Firebase subscription to the Blaze plan. (You will still likely be able to work with the free tier of that plan.)
'use strict';
const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion} = require('dialogflow-fulfillment');
process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
const agent = new WebhookClient({ request, response });
console.log('Dialogflow Request headers: ' + JSON.stringify(request.headers));
console.log('Dialogflow Request body: ' + JSON.stringify(request.body));
function welcome(agent) {
agent.add(`Welcome to my agent!`);
}
function fallback(agent) {
agent.add(`I didn't understand`);
agent.add(`I'm sorry, can you try again?`);
}
function handlerOne(agent) {
agent.add(`This is handler one`);
}
function handlerThree(agent) {
agent.add(`This is handler three`);
}
// Run the proper function handler based on the matched Dialogflow intent name
let intentMap = new Map();
intentMap.set('Default Welcome Intent', welcome);
intentMap.set('Default Fallback Intent', fallback);
intentMap.set('intent.one', handlerOne);
intentMap.set('intent.two', handlerOne);
intentMap.set('intent.three', handlerThree);
agent.handleRequest(intentMap);
});
You can create a map in the API, where all intent will be mapped to a correspondence handler in fulfillment.
Here is sample code,
const express = require("express");
const { WebhookClient } = require("dialogflow-fulfillment");
const { welcome, defaultFallback } = require("./intents/welcomeExit");
const app = express();
app.post("/dialogflow", express.json(), (req, res) => {
const agent = new WebhookClient({ request: req, response: res });
let intentMap = new Map();
intentMap.set("Default Welcome Intent", welcome);
intentMap.set("Default Fallback Intent", defaultFallback);
agent.handleRequest(intentMap);
});
app.listen(process.env.PORT || 8080);
This has been done in NodeJS. You can use other languages supported by Dialogflow.
How it gets configured in Dialogflow check this link.

Custom fallback intents when using confirmation helper

I'm trying to create custom fallbacks for intents that contain confirmations. Here is the code:
const functions = require('firebase-functions');
const {
dialogflow,
Confirmation
} = require('actions-on-google');
const app = dialogflow({
debug: true,
});
app.intent('vitals-confirmation', (conv, input, confirmation) => {
conv.ask(new Confirmation(`Great! Have you fainted recently?`));
});
app.intent('vitals-confirmation-fallback', (conv, input, confirmation) => {
conv.ask(new Confirmation(`Sorry I didn't understand what you said. Did you faint?`));
})
app.intent('S1-confirmation', (conv, input, confirmation) => {
if (confirmation) {
conv.ask(new Confirmation(`I have recorded that you have fainted. Have your feet been hurting?`));
} else {
conv.ask(new Confirmation(`I have recorded that you have not fainted. Have your feet been hurting?`));
}
});
My app asks the user if they have fainted in "vitals-confirmation" and the user is expected to answer with a yes or no type answer that will be identified by the confirmation helper, if they do this correctly they will go to "S1-confirmation" and will be asked the next question.
However the following is outputted when I respond with an answer that is not a yes/no type answer (for example: "red"):
Sorry, Great! Have you fainted recently?
It seems as though there is a default fallback that responds with "Sorry, [repeats previous text output]" and does not go to a custom fallback intent which I have created (which is my desired result).
Take a look at the documentation for Confirmation helper of Actions SDK for Node.js.
You have to setup an intent with the actions_intent_CONFIRMATION event in DialogFlow in order to retrieve the user response. My advice is to check how you configured your intents and use this method, otherwise be sure to create the follow-up intents with the desired context lifespan.
Example from documentation:
app.intent('Default Welcome Intent', conv => {
conv.ask(new Confirmation('Are you sure you want to do that?'))
})
// Create a Dialogflow intent with the `actions_intent_CONFIRMATION` event
app.intent('Get Confirmation', (conv, input, confirmation) => {
if (confirmation) {
conv.close(`Great! I'm glad you want to do it!`)
} else {
conv.close(`That's okay. Let's not do it now.`)
}
})

How to uniquely identify a user on Dialogflow fullfilment?

I need to send a unique identifier to my web service through Dialogflow Fulfillment so that I can recognize who is making the request.
For that I need to uniquely identify a user on Dialogflow Fulfillment, but I can't find how to get a token or something like that inside the Inline Editor so that I can identify the device that is making the request.
I tried to see what there is inside the agent variable.
But I found nothing that I could use to identify the user who is making the request to my web service.
I also tried to get the userStorage, like seen at How to identify unique users with Diagflow, but it returns me the error:
Cannot read property 'userStorage' of undefined
at verificarBiologia (/user_code/index.js:37:76)
at WebhookClient.handleRequest (/user_code/node_modules/dialogflow-fulfillment/src/dialogflow-fulfillment.js:273:44)
at exports.dialogflowFirebaseFulfillment.functions.https.onRequest (/user_code/index.js:52:9)
at cloudFunction (/user_code/node_modules/firebase-functions/lib/providers/https.js:26:47)
at /var/tmp/worker/worker.js:686:7
at /var/tmp/worker/worker.js:670:9
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickDomainCallback (internal/process/next_tick.js:128:9)
Probably because the variable user is undefined.
This is my code:
// See https://github.com/dialogflow/dialogflow-fulfillment-nodejs
// for Dialogflow fulfillment library docs, samples, and to report issues
'use strict';
const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion} = require('dialogflow-fulfillment');
process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
const agent = new WebhookClient({ request, response });
console.log('Dialogflow Request headers: ' + JSON.stringify(request.headers));
console.log('Dialogflow Request body: ' + JSON.stringify(request.body));
function welcome(agent) {
agent.add(`Welcome to my agent!`);
}
function fallback(agent) {
agent.add(`I didn't understand`);
agent.add(`I'm sorry, can you try again?`);
}
function verificarBiologia(agent) {
agent.add('Inicio do metodo');
console.log('Build 059');
console.log(agent);
let payload = request.body.originalDetectIntentRequest.payload;
console.log(payload);
let userStorage = request.body.originalDetectIntentRequest.payload.user.userStorage || JSON.stringify({});
let userId;
console.log("userStorage", userStorage);
userStorage = JSON.parse(userStorage);
console.log("userStorage_after_parsing", userStorage);
agent.add('Final do metodo');
}
// Run the proper function handler based on the matched Dialogflow intent name
let intentMap = new Map();
intentMap.set('Default Welcome Intent', welcome);
intentMap.set('Default Fallback Intent', fallback);
intentMap.set('VerificarBiologia', verificarBiologia);
agent.handleRequest(intentMap);
});
EDIT
The request body is as follow:
{
"responseId":"f4ce5ff7-ac5f-4fec-b5bd-4e5007e4c2de",
"queryResult":{
"queryText":"Quando tenho prova de biologia?",
"parameters":{
"disciplinaBiologia":"biologia"
},
"allRequiredParamsPresent":true,
"fulfillmentText":"Voc� tem uma prova de biologia no dia 30. Tire suas d�vidas com o professor.",
"fulfillmentMessages":[
{
"text":{
"text":[
"Voc� tem uma prova de biologia no dia 30. N�o deixe de fazer os exerc�cios."
]
}
}
],
"intent":{
"name":"projects/verificadorprovas/agent/intents/020017a0-e3a9-46f0-9a2e-d93009f5ac42",
"displayName":"VerificarBiologia"
},
"intentDetectionConfidence":1,
"languageCode":"en"
},
"originalDetectIntentRequest":{
"payload":{
}
},
"session":"projects/verificadorprovas/agent/sessions/3700fddf-3572-4221-fffc-a0dc1bf28330"
}
Can someone help me to do that? What do I have to do to get something that I can use to identify the user?
Thanks in advance
Testing things in the Dialogflow simulator with "Try it now" does not simulate the Actions on Google environment. To do that, you need to use the Actions on Google Simulator, which you can get to by clicking on "See how it works in the Google Assistant" a few lines down.
If you are planning to go for Google Assistant using Actions on Google, then the best way to identify a user is by using Account Linking. Check out the following link for more around fetching user information for Google Assistant.

Resources