I am trying to integrate DialogFlow bot with Hangouts Chat (for G Suite). I have enabled the integration on DialogFlow and the basic intents are working fine.
In order to perform backend operations using fulfillment, I have created a firebase cloud function and added this as the webhook URL on DialogFlow fulfillment page.
I have written the cloud function code to identify the intent, and to generate the Webhook response format for a simple text response. This is working, and I am seeing the firestore data being modified in response to the intent.
However for a more complicated intent, I wish to use more of the dynamic card based response that Chat offers. In order to achieve this, I have looked at the documentation for dialogflow card response.
I saw this following code at https://cloud.google.com/dialogflow/docs/integrations/hangouts. When I paste this into the dialogflow intent editor UI under hangouts custom payload (after disabling webhook integration), it works
{
"hangouts": {
"header": {
"title": "Pizza Bot Customer Support",
"subtitle": "pizzabot#example.com",
"imageUrl": "..."
},
"sections": [{
"widgets": [{
"keyValue": {
"icon": "TRAIN",
"topLabel": "Order No.",
"content": "12345"
}
},
{
"keyValue": {
"topLabel": "Status",
"content": "In Delivery"
}
}]
},
{
"header": "Location",
"widgets": [{
"image": {
"imageUrl": "https://dummyimage.com/600x400/000/fff"
}
}]
},
{
"header": "Buttons - i could leave the header out",
"widgets": [{
"buttons": [{
"textButton": {
"text": "OPEN ORDER",
"onClick": {
"openLink": {
"url": "https://example.com/orders/..."
}
}
}
}]
}]
}]
}
}
This is exactly what I need, but I need this response from the webhook. I'm not getting the correct response format to map between the two.
When I try to integrate the same code with the webhook, I am not getting any reply on hangouts chat. When I check the history section on dialogflow UI, here is the response structure as mentioned in Raw interaction log
{
"queryText": "<redacted>",
"parameters": {},
"intent": {
"id": "<redacted>",
"displayName": "<redacted>",
"priority": 500000,
"webhookState": "WEBHOOK_STATE_ENABLED"
},
"intentDetectionConfidence": 1,
"diagnosticInfo": {
"webhook_latency_ms": 284
},
"languageCode": "en",
"slotfillingMetadata": {
"allRequiredParamsPresent": true
},
"id": "<redacted>",
"sessionId": "<redacted>",
"timestamp": "2020-07-30T12:05:29.094Z",
"source": "agent",
"webhookStatus": {
"webhookUsed": true,
"webhookPayload": {
"hangouts": {
"header": {
"subtitle": "pizzabot#example.com",
"title": "Pizza Bot Customer Support",
"imageUrl": "..."
},
"sections": [
{
"widgets": [
{
"keyValue": {
"content": "12345",
"topLabel": "Order No.",
"icon": "TRAIN"
}
},
{
"keyValue": {
"topLabel": "Status",
"content": "In Delivery"
}
}
]
},
{
"widgets": [
{
"image": {
"imageUrl": "https://dummyimage.com/600x400/000/fff"
}
}
],
"header": "Location"
},
{
"widgets": [
{
"buttons": [
{
"textButton": {
"text": "OPEN ORDER",
"onClick": {
"openLink": {
"url": "https://example.com/orders/..."
}
}
}
}
]
}
],
"header": "Buttons - i could leave the header out"
}
]
}
},
"webhookStatus": {
"message": "Webhook execution successful"
}
},
"agentEnvironmentId": {
"agentId": "<redacted>",
"cloudProjectId": "<redacted>"
}
}
I also found this link on chat docs which explains how to show an interactive card based UI https://developers.google.com/hangouts/chat/how-tos/cards-onclick. However I'm not able to understand how to integrate the same with the webhook.
UPDATE
I have followed a tutorial at https://www.leeboonstra.com/Bots/custom-payloads-rich-cards-dialogflow/ and was able to get the card response to show up using the sample code they mention. It is using this deprecated library (https://github.com/dialogflow/dialogflow-fulfillment-nodejs). Here is the code for that to work,
let payload = new Payload("hangouts", json, {
rawPayload: true,
sendAsMessage: true,
});
agent.add(payload);
Here the json variable should be the previous JSON structure I have mentioned. So now, I'm able to map to the correct response format using the deprecated API. However, I'm not able to get the button to send the right response to the back end. Here is the buttons field that I modified from the previous json,
"buttons": [
{
"textButton": {
"text": "Click Me",
"onClick": {
"action": {
"actionMethodName": "snooze",
"parameters": [
{
"key": "time",
"value": "1 day"
},
{
"key": "id",
"value": "123456"
}
]
}
}
}
}
]
As far as I know, responding to a Google Chat (formerly Hangouts Chat) button isn't possible when using the direct Dialogflow integration.
The problem is that the button response can be sent one of two ways:
An event will be sent back to the bot code indicating the click.
Using the onClick.openLink.url property, as most of your test show.
This will take the person clicking it to the URL in question. But once there, you're taken out of the bot flow.
However, the documentation for the Hangouts Chat integration with Dialogflow doesn't provide any information about how this event is passed to Dialogflow, and the last time I tested it - it isn't.
You can write your own integration using Google Chat's API on something like Cloud Functions or Apps Script and have your script call Dialogflow's Detect Intent API to determine what Intent would be triggered by the user (and determine replies or call the webhook for additional processing). Under this scheme, you can choose how to handle the onClick event. Making your own integration also provides you a way to do Incoming Webhooks, which isn't possible when using the Dialogflow integration.
I had integrated Dialogflow in both Facebook Messenger & Telegram. In FB messenger, when a user press a button, it will opens the user's phone dialing pad and calls the number. Here's the code:
//FB Messenger code
{
"facebook": {
"attachment": {
"type": "template",
"payload": {
"template_type": "button",
"text": "Sorry but I didn't quite catch that. If it's urgent, do give us a call instead. Thanks!",
"buttons": [
{
"type": "phone_number",
"title": "Call Us",
"payload": "+60123456789"
}
]
}
}
}
}
How to i do this in Telegram?? Thanks
I'm creating a voice application in Action on Google with the Actions SDK. It contains the Sign In helper (oAuth with Authorization Code).
When asking for a sign in the user has a Yes/No option. Both options are redirected to a new intent with the name actions.intent.SIGN_IN
The intent triggering the Sign In process:
app.intent('actions.intent.MAIN', async (conv) => {
conv.ask(new SignIn('To access your account'));
});
The intent that is triggered after the sign in process:
app.intent('actions.intent.SIGN_IN', (conv, input, signin) => {
if (signin.status === 'OK') {
conv.ask(`Great, thanks for signing in! What do you want to do next?`);
} else {
conv.ask(`I won't be able to save your data, but what do you want to do next?`);
}
});
When starting the sign in process and answering 'No' to the question if you want to connect your account, the user goes to the actions.intent.SIGN_IN intent and gets the message that data can't be saved.
When answering 'Yes' the authorization flow is started and when logging in I have an access token in my request JSON. But then my app crashes with the following error:
Error: Input text not set.
I have compared both the JSON requests and it seems that when returning from logging in there is no Raw Input in the request.
Request when choosing No at Sign In:
"inputs": [{
"intent": "actions.intent.SIGN_IN",
"rawInputs": [{
"inputType": "TOUCH",
"query": "Nee"
}],
"arguments": [{
"name": "SIGN_IN",
"extension": {
"#type": "type.googleapis.com/google.actions.v2.SignInValue",
"status": "CANCELLED"
}
},
{
"name": "text",
"rawText": "Nee",
"textValue": "Nee"
}
]
}]
Request when choosing Yes at Sign In:
"inputs": [{
"intent": "actions.intent.SIGN_IN",
"rawInputs": [{
"inputType": "VOICE"
}],
"arguments": [{
"name": "SIGN_IN",
"extension": {
"#type": "type.googleapis.com/google.actions.v2.SignInValue",
"status": "OK"
}
},
{
"name": "text"
}
]
}]
Does anyone know what causes this and how I can solve this problem?
In my case I am creating a slack chat bot using dialogflow. On saying "Hi" to the bot, it responds with 3 buttons out of which user has to chose. Based on the choice made the subsequent intent has to be triggered.
I am able to create buttons in slack chat bot but cant able to get the selection back to dialogflow and trigger the desired intent.
Sample code:
function welcome (agent) {
agent.add( new Payload(agent.SLACK, {
"text":'Welcome ',
"attachments": [
{
"text": "Please choose any of the following options",
"actions": [
{`enter code here`
"name": "General Enquiries",
"type": "button",
"text": "General Enquiries",
"value": "General Enquiries"
},
{
"name": "Account Related Queries",
"type": "button",
"text": "Account Related Queries",
"value": "Account Related Queries"
},
{
"name": "Complaints",
"type": "button",
"text": "Complaints",
"value": "Complaints"
}
]
}
]
}) );
}
function accountQueries (agent){
agent.add('Hi buddy');
}
function Complaints (agent){
agent.add('Hi teddy');
}
let intentMap = new Map();
intentMap.set(WELCOME_INTENT, welcome);
intentMap.set(ACCOUNT_RELATED_QUERIES, accountQueries);
intentMap.set(COMPLAINTS, Complaints);
agent.handleRequest(intentMap);
This problem is arising when using events. Say, after a particular event 'A' occurs, intent 'X' is called. 'X' has fulfillment webhook which tries to render a SimpleResponse response and a BasicCard response. But, in the simulator, only the SimpleResponse can be seen and not the BasicCard. There are no errors reported in the simulator also. Below is the JSON response:
{
"payload": {
"google": {
"expectUserResponse": true,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": "Sample Text1"
}
},
{
"basicCard": {
"title": "Sample Text2 ",
"formattedText": " Sample Text3",
"image": {
"url": "Sample working URL1"
},
"buttons": [
{
"title": "Sample Text4",
"openUrlAction": {
"url": "Sample working URL2"
}
}
]
}
}
]
}
}
}
}
Now what is surprising, the same JSON response renders both SimpleResponse as well as BasicCard response when another intent 'Y' is called by one of its utterance. 'Y' is also linked to a webhook fulfillment.
Any reason why?