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
Related
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'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.
Is it possible to format a conversation so that the bot initiates conversation using dialogflow in a web demo integration?
The objective is to say something like “Hi, I’m a bot, I can do x” to establish that it’s a chatbot rather than a human.
Can anyone suggest any idea for this?
You can set a welcome intent, then send a /query request containing an event parameter. Set the event parameter to WELCOME and your chatbot will respond with whatever conversation opening you set.
More info here: https://dialogflow.com/docs/events
If you are using something other than the API for interacting with your Dialogflow agent (Slack, Facebook Messenger, etc.) you will need to add an appropriate event under "intents" in your console (such as the "Facebook Welcome" event).
For interacting with your Dialogflow agent via the API, see below.
In the API interaction quickstart documentation, Dialogflow gives you the SessionClient's detectIntent method for sharing messages with your bot.
Each language has a different solution. But on an abstract level, you want to change the request object that you send to Dialogflow to include a "Welcome" event (no input message required), as Omegastick described.
For example, in Node.js, your request object would look like this:
// The text query request.
const request = {
session: sessionPath,
queryInput: {
event: {
name: "Welcome",
languageCode: languageCode
}
},
};
This assumes you have an appropriate intent set up in your Dialogflow console to handle Welcome events. One is provided by default that you can observe.
You can also add contexts, so that your agent gives a different greeting message based on some condition.
Following this guide:
https://actions-on-google.github.io/actions-on-google-nodejs/
I created an action for DialogFlow
import { dialogflow, Image, Conversation, BasicCard } from 'actions-on-google';
const app = dialogflow();
app.intent('test', (conv, input) => {
conv.contexts.set('i_see_context_in_web_demo', 1);
conv.ask(`i see this only into actions on google simulator`);
conv.ask(new Image({
url: 'https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/imgs/160204193356-01-cat-500.jpg',
alt: 'cat',
}));
});
I then activated Web Demo integration
I saw that the Web Demo integration does not show the cards, the images. I hypothesize that it only shows text, no rich text
I understand that it elaborates only JSON like this:
{
"fulfillmentText": "Welcome!",
"outputContexts": []
}
But I did not find any method in the library used to enhance fulfillmentText
can you help me?
You're using the actions-on-google library, which is specifically designed to send messages that will be used by the Google Assistant. The Web Demo uses the generic messages that are available for Dialogflow. The actions-on-google library does not send these generic messages.
If you want to be able to create messages that are usable by both, you'll need to look into the dialogflow fulfillment library, which can create messages that are usable by the Google Assistant as well as other platforms. Be aware, however, that not all rich messages are available on all platforms, but that the basic text responses should be.
You also don't need to use a library - you can create the JSON response yourself.
Microsoft Bot Framework messages with buttons in Facebook Messenger
My question relates to the question linked aboved. I am writing a bot using node.js that does not use the bot builder sdk. I manually returning a compatible response for the ms bot connector service. This is working fine for a text response, but I wish to return more complicated responses, e.g the buttons/carousel you can return with messenger. Based on the question I linked above, I guessed the format and added the below:
response.attachments = [ { "Title": "Choose One: ", "Actions": [{ "Title": "Postback!", "Message": "Postback from button" }, { "Title": "Postback2!", "Message": "Postback2 from button" }] } ];
The top level title seems to do nothing but the actions render as postback type buttons correctly (they send the Message as the postback content). With messenger you also have the option to return url based buttons, and image urls.
As far as I can tell there is zero documentation on returning attachments using the node bot builder sdk. If there were I'd just write the bot with the sdk in order to obtain the response format.
So my question is, does anyone know how to correctly return both postback and url based buttons to the bot connnector service, including accompanying images, with or without the bot builder sdk?
Update 05/05/2016
So I found the link below and you can see a definition of the attachments property:
http://docs.botframework.com/sdkreference/nodejs/interfaces/_botbuilder_d_.imessage.html
If you follow it to the IAttachment specification, it makes me wonder how/why my code above works at all? As a test of that format I wrote in the following:
var att = {};
att.content = "I am content";
att.contentType = "text/plain";
att.contentUrl = "http://www.google.com";
att.fallbackText = "I am fallback text";
att.text = "I am text";
att.thumbnailUrl = "https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png";
att.title ="I am title";
att.titleLink = "http://yahoo.com";
Now in slack I get a fairly nice output from this:
However in messenger I get "Service Error:Value cannot be null. Parameter name: source"
I found the info I needed. Not sure if it hadn't been published at the time or whether I was just hunting in the bot builder docs, but it's all detailed fairly well below.
http://docs.botframework.com/connector/message-actions/#navtitle
You have to tweak your message a little for certain integrations, e.g Skype doesn't really seem to support attachments.