I've created a chatbot using Dialogflow and integrated it with Telegram, Facebook Messenger and Web.
The response for Dialogflow is created via Fulfillment written in Python.
In Telegram and Facebook Messenger I am getting replies as expected for each message from user.
But now when I am trying integration for Web, I've noticed that the replies from chatbot does not show multiple reply messages/lines and Quick Replies.
Below is screenshot when user say 'Hi' to the chat bot in Telegram, Facebook Messenger, Web and Dialogflow console respectively. Why is this happening and how can I fix this?
Below is the Fulfillment response JSON:
{
"fulfillmentMessages": [
{
"text": {
"text": [
"Greetings from Tulsi Village!!!",
"My name is Appu. I am your virtual assistant.",
"How can I help you?"
]
}
},
{
"quickReplies": {
"quickReplies": [
"Book",
"Rooms",
"Contact",
"Other"
]
}
}
]
}
The rendering of response depends on the client you are using.
Telegram, Facebook Messenger, are able to render the quick-replies and multi-line replies.
But the web-demo which you are using does not support these, hence you are not able to see quick-replies and multi-line replies.
If you want to integrate it with a website, you need to design it in such a way that it can render the json response and show it correctly. Web-demo is not designed to render these.
Related
I am trying to design a chatbot for my company. In my company we mainly build applications for the bank sector. I was asked to design a bot for one of our clients. The plateform I am using to do it is dialogflow. I have finished the first step of my application but I have somes problems.
We want to integrate this bot in Whatssap messenger.
The first question is that how can I enable a welcome message whenever a user opens the chat in whatssap ? is it possible to do it ?
**The Second problem is : When I add a Custom payload json data, the payload dont gets displayed whenever I try to use the web demo functionality to interact with my bot. How can I solve this problem ?.
the custom payload I have added is :
"richContent": [
[
{
"options": [
{
"text": "Effectuer un virement."
},
{
"text": "consulter solde."
},
{
"text": "procéder à une ouverture de compte."
}
],
"type": "chips"
}
]
]
}```**
All the informations get displayed in the bot except the payload I have added. Is there anyway to solve this problem ?
I guess this might be a stupid issue, solvable in a really easy way, but I'm really struggling.
I have the “old” chatbot, built in Dialogflow ES with 2 integrations (DF messenger, FB messenger). And because I set up 2 integrations I automatically have 2 tabs for responses available with every intent.
If I want to add a button, I need to use the Custom payload type of response. And since I have 2 different integrations which I need different code for, I need to set the custom payload for each of them (1 on every tab).
Custom payload for the DF messenger example:
{
"richContent": [
[
{
"icon": {
"color": "#F78A2D",
"type": "network_check"
},
"text": "Text on the button",
"type": "button",
"link": "https://www.example.com"
}
]
]
}
Custom payload for the FB messenger example with the similar functionality:
{
"facebook": {
"attachment": {
"type": "template",
"payload": {
"template_type": "button",
"buttons": [
{
"title": "Text on the button",
"url": "https://www.example.com",
"type": "web_url"
}
],
"text": "Required text"
}
}
}
}
Everything works as expected.
The issue
I want to achieve the same thing with Dialogflow CX.
I’ve set up same integrations (DF and FB messenger) and the first thing I noticed is that I don’t see any additional tab for FB messenger. Because I can’t find the separate FB tab I’ve been playing with the single Custom payload response and mixing both codes together (for DF messenger and FB messenger) with no success.
What I managed to do is:
If in this single Custom payload response I use just the code for DF messenger, it works with DF messenger as expected - the user gets the response with the button. The FB messenger just “ignores” the code and doesn’t show the button. The code:
{
"richContent": [
[
{
"icon": {
"color": "#F78A2D",
"type": "network_check"
},
"text": "Text on the button",
"type": "button",
"link": "https://www.example.com"
}
]
]
}
If I use just the code for the FB messenger, it works as expected - the user gets the response with the quick replies. The DF messenger just “ignores” the code and doesn’t show quick replies/chips. The code (different than in Dialogflow ES, but let’s start simple, using just quick replies :D):
{
"text": "Pick a color:",
"quick_replies":[
{
"content_type":"text",
"title":"Red",
"payload":"Red color"
},{
"content_type":"text",
"title":"Green",
"payload":"Green color"
}
]
}
And now we come to the problem. Because there’s no extra tab for FB messenger (as stated before) I’m trying to male things work by mixing both codes together. So the mixed code looks like this:
{
"richContent": [
[
{
"icon": {
"color": "#F78A2D",
"type": "network_check"
},
"text": "Text on the button",
"type": "button",
"link": "https://www.example.com"
}
]
],
"text": "Pick a color:",
"quick_replies":[
{
"content_type":"text",
"title":"Red",
"payload":"rdeč"
},{
"content_type":"text",
"title":"Green",
"payload":"zelen"
}
]
}
As you’d assume by now, this code works with DF messenger integration (the user gets the button), but it doesn’t work with FB integration (user doesn’t get the quick replies).
So the real questions are:
How do I get this to work?
Am I somewhere missing a different tab for FB messenger responses (similar to DF ES)?
Or is there just a thing or two missing inside the code?
Should I maybe use the conditional response aka “IF FB messenger integration THEN use FB
code ELSE use DF code”? If so, how can I check what integration is
being used at the moment by user?
Oh, BTW, does anyone have any quick link about how to debug the FB messenger integration? I'm familiar with the GCP Logs explorer, but I can't seem to find any FB related issues in those logs - I'm assuming they could help since the FB integration is not working as expected.
The answer I got on Google forum and which best describes the solution and is up to date:
The engineers are working on implementing using custom payloads for different integrations in a single agent for Dialogflow CX (LINK). You can subscribe to get automatic updates on the progress made on this feature request by selecting the star listed at the left side of the thread title.
In the meantime, a possible workaround would be to use different agents for the integrations.
EDIT: Just thought of another solution which I believe could be more than just a workaround and might actually stick around (maybe that's even the way Google imagined it). We could use the versioning in the way that we have different versions for different integrations. The only drawback worth mentioning and which I can see here is that we need to use all bot flows in all versions and therefore in all integrations. Which could be an issue if we want to use totally different communication flow for different integrations. The issue is kind of solvable by emptying flows for specific integrations (or not using/linking them at all), but on the other hand the totally different communication flow could also just simply mean a new agent.
Feel free to comment on this solution. I'm courious if you agree.
I have been dealing with this same issue. The best workaround I have found so far is to create two custom payloads (one using the syntax that works for Facebook messenger and the other one using the syntax that works for Dialogflow messenger for exemple). Then once you do the integrations, Facebook will ignore the payload of the Dialogflow messenger, but the one designed for Facebook will work. Dialogflow messenger will also ignore the payload for Facebook messenger but the correct one designed for DialogFlow messenger will work. I hope this helps. Payload for Fb messenger and DF messenger on the same page
I had create a chatbot using Dialogflow and integrated it with Facebook Messenger & Telegram. I noticed that for the Quick Replies in Telegram (Link 1) appears differently in FB Messenger (Link 2). Is there any way to make it nicer and more presentable in Telegram?
Telegram
Facebook Messenger
This is my Quick Replies settings in Dialogflow.
Dialogflow
in DialogFlow you can indeed (as Marc pointed out) use a Custom Payload for Telegram, here it is an example:
{
"telegram": {
"text": "What would you like help with?",
"reply_markup": {
"inline_keyboard": [
[
{
"text": "Daily News",
"callback_data": "news"
}
],
[
{
"text": "New Features",
"callback_data": "features"
}
]
]
}
}
}
The quick replies appear a buttons you can click (notice the actual response is sent but not displayed within the chat).
All the best!
Beppe
SHORT ANSWER:
That is NOT possible.
DETAILED ANSWER:
Each Channel (Facebook Messenger, Telegram etc.) has its own UI components and its own styling. Those can't be changed as they are rendered/controlled by the channel it self.
What Dialogflow doing is giving you the ability to show these UI components in each channel without making you handle the different implementation needed for each channel.
Dialogflow also gives you the ability to send Custom Payloads where you can send a custom JSON (that should be compatible with the channel you are connected to) That can be used if the channel for example has a UI component that is not yet supported by Dialogflow.
If the channel gives you an option to change a property in the UI components you are using, you could do that using Custom JSON, But still you are always limited to how each channel renders the UI components and what features they provide us
I had written a node js server code so that dialog-flow can connect to my server through web-hook and integrated dialog-flow phone gateway. I am able to get the voice transcript text when made call to that number. But if i type any number on dial-pad i am not getting it. Is there any thing i should do to get the number input from dial-pad on call.
The response is something like this if i say 'hello' on call.
{
"responseId":"b5644842-75bf-41f3-bf84-cf7b4f02c71f",
"queryResult": :{
"queryText":"Hello.","action":
"input.welcome",
"parameters":{},
"allRequiredParamsPresent":true,
"intent":{
"name":"projects/maps-ec9e1/agent/intents/54f5f623-2011-4d95-92a7-b8e873cd55a7",
"displayName":"Default Welcome Intent"
},
"intentDetectionConfidence":1,
"languageCode":"en-us"
},
"originalDetectIntentRequest":{
"source":"GOOGLE_TELEPHONY",
"payload":{
"telephony":{
"caller_id":"REDACTED_IN_STANDARD_TIER_AGENT"
}
}
},
"session":"projects/maps-ec9e1/agent/sessions/l0vQqOpaSsq9rvJc0sMMYA"
}
}
You are looking for DTMF detection. Google's Dialogflow Phone Gateway does not support this, but you can get this capability from some third party Dialogflow Gateway products like Voximplant, Audiocodes' VoiceAI Gateway, and drachtio.org.
There is no standard method for how to do this, but generally the telephony gateway needs to detect a digit and then sends a text query or event to Dialogflow where your bot can handle it.
I wrote reviews at cogint.ai with details on how to do this for Voximplant and Audiocodes.
I'm building a Node.js ChatBot with Wit.ai on Messenger and I just want to know if it's possible to track user action when they open The Share part on Messenger.
"recipient":{
"id":"USER_ID"
},
"message":{
"attachment":{
"type":"template",
"payload":{
"template_type":"generic",
"elements":[
{
"title":"Breaking News: Record Thunderstorms",
"subtitle":"The local area is due for record thunderstorms over the weekend.",
"image_url":"https://thechangreport.com/img/lightning.png",
"buttons":[
{
"type":"element_share"
}
]
}
]
}
}
}
There is no post back, no payload send to the ChatBot so How can I achieve this please ?
There is not a way in the Messenger api currently to detect users sharing an item.
You could load the share url with parameters to identify the user, and listen for them on your server when loading the page. That could help attribute shares to users.
There is also the Messenger Extensions sdk which can get the page scoped id of a user on your site.