I created a chatbot using dialogflow and I added a website link to the response, I have integrated the bot in Telegram and the website link is working perfectly, but on the web demo, it is not. Is it possible that when I integrate the chatbot on a website using Kommunicate, the hyperlink will work?
Kommunicate has a link button template, create a Dialogflow intent using below metadata.
{
"message": "click on the buttons",
"platform":"kommunicate",
"metadata": {
"contentType": "300",
"templateId": "3",
"payload": [{
"type": "link",
"url": "https://www.google.com",
"name": "Go To Google"
},
{
"type": "link",
"url": "https://www.facebook.com",
"name": "Go To Facebook",
"openLinkInNewTab": false
}
]
}
}
The openLinkInNewTab: false to open any link in the same tab. Default value is true, which will open the links in the new tab.
Here is more information about the same.
Also, you can render HTML content as a message and Kommunicate will render the HTML in the UI. Here is the metadata for that.
Sadly the web demo only supports plain text responses, so adding an clickable url within your chatbot for the webdemo isn't possible. Luckily, this is a limitation for web demo, so any other integration that do support URL's in their chats will work as you have seen with Telegram.
Related
I have a nodejs application by which I am trying to figure out if we can send adaptive cards in email using a third party layer like Amazon SES. As per microsoft documentation the adaptive card data needs to be in header under script tags.
https://learn.microsoft.com/en-us/outlook/actionable-messages/send-via-email
I am receiving the emails but the card is not visible in the email, the text apart of adaptive card is visible. But when I go to View source of the email I do see the adaptive card content in the raw email data.
Email data -
<script = type=3D"application/adaptivecard+json"> { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "originator": "", "body": [ { "size": "large", "text": "Hello Actionable message", "wrap": true, "type": "TextBlock" } ], "actions": [ { "type": "Action.InvokeAddInCommand", "title": "Open Actionable Messages Debugger", "addInId": "3d1408f6-afb3-4baf-aacd-55cd867bb0fa", "desktopCommandId": "amDebuggerOpenPaneButton" } ] } </script>If the card doesn't appear, install Actionable Me= ssages Debugger Outlook add-in to debug the issue.
I tried sending adaptive card using https://amdesigner.azurewebsites.net/ which works as expected.
Not sure if using a third party layer for sending adaptive card requires any additional setting.
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 am using microsoft teams bot framework and I want a adaptive card with a button to open url in popout(other browser)
By using (Actions.openUrl) it Opens a URL in the default browser.
and want it to open in other browser
This is what i have tried and I am using node.js
var card = {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [{
"type": "Container",
"items": [{
"type": "TextBlock",
"text": `${session.message.text}`,
"weight": "bolder",
"size": "medium"
}
]
},
{
"type": "Image",
"url": `${bodyData.img}`
},
{
"type": "Container",
"items": [{
"type": "TextBlock",
"text": `${bodyData.calendar}`,
"wrap": true
}]
}
],
"actions": [
{
"type": "Action.openUrl",
"title": "Open in Popout",
"url": `${bodyData.url}`
}
]};
Like paul cheung said, you cannot specify the browser in an openUrl button. Not only that, you cannot specify the URL's "target" in an openUrl button. You can see here that the only thing you can specify is the URL itself. The details of how the URL gets opened are the responsibility of the client and the bot has no control over them.
I think you have a few options.
Option 1
If you really want to open a browser window like a popup, you can try creating a sort of redirect page that the card would link to. When the user clicks the button, your redirect page would open in a new tab of the current browser window and then whatever client-side code you've set up would open the target page in a new window and close the redirect page's tab.
Option 2
The conventional way to do what you're talking about in Teams is to use a task module. Depending on what your URL contains, you might even consider putting a card in your task module instead of a web page.
This action type specifies a URL to launch in the default browser, You can NOT specify the browser at moment. BTW, the default browser is a system level setting(default program) as you know.
Update:
like Kyle said, if task module is your option, Here is a repository you can take a quick look, it includes all necessary code. popout window was triggered in javascript and adaptive card.
Hello there :)
Challenge Skype; Bot Framework; receive downloadable files
I have an issue. My project is to ask something to the bot (using Bot Framework Emulator currently but later I will use Skype) and the bot answers with an attached image/chart.
I can display through the interface the answer and the image. However, the user cannot download this image.
How can I do that ?
There is an option in an AdaptiveCard message to be able to download the attached image thanks to a Button ?
I tried with HeroCard, ThumbnailCard, AdaptiveCard and a simple attachment but it did not solve my problem.
Thanks in advance :)
There's a couple of different ways you can go about this.
Using Cards
First, cards don't allow you to directly download an attachment. At best, they can link you to the image (or other file) you want your user to download. Example json for an Adaptive Card that can do this:
{
"type": "AdaptiveCard",
"body": [
{
"type": "Image",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://dev.botframework.com/Client/Images/ChatBot-BotFramework.png"
},
"url": "https://dev.botframework.com/Client/Images/ChatBot-BotFramework.png"
},
{
"type": "TextBlock",
"text": "This card's action will open an image"
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Open Image",
"url": "https://dev.botframework.com/Client/Images/ChatBot-BotFramework.png"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
And looks like this:
This card displays an image and includes a link for a user to open and download it. Because I added an Action.OpenUrl directly to the image, the user can click the image to open and then download it--the "Open Image" button is just to show another method.
Here's a great website for Adaptive Card Documentation, Schema, and a user-friendly Designer. Note that the Designer doesn't allow you to easily add Actions at this time. You have to manually add them in the JSON portion.
Sending Attachments
You can, however, directly send a message that includes the ability to download files.
You can define an attachment with:
const attachment = {
name: 'PDF',
contentType: 'application/pdf',
contentUrl: 'https://media.readthedocs.org/pdf/microsoftbotframework/latest/microsoftbotframework.pdf',
}
And then send it to the user with:
await step.context.sendActivity({
text: 'Attachment',
attachments: [attachment],
});
Two important notes:
This method works well for sending files. If you use an image, it will display an unclickable image. This means Adaptive Cards would be better for sending downloadable images.
Your code might use something other than step.context. This is for sending it as part of a Waterfall Dialog. You may need some other version of context.sendActivity for your bot.
If you found this answered your question, please mark it as "Answered" and I can clear it off of my support ticket tracker. Otherwise, feel free to comment and I can help you further.
I am connecting Actions on Google (on my Android) to my webhook via API.AI
When a user orders, say pizza online, API.AI creates a fallback intent and the webhook sends a json with Carousel.
This works fine. If user clicks on Carousel item, the response is sent to webhook too.
I am responding to that click by asking "How many pizzas" and use a suggestion chip.
However, no fallback intent is activated in API.AI and the app crashes.
Earlier, I was giving a simple text response to carousel select "Thanks for the order" and it was working.
Can someone help me solve this problem?
I realize that the problem is not in API.AI or fallback intent but in JSON I am sending. If I reply to user's selection in Carousel with a simple text/speech response it works. It also works if I send a Carousel chip again. However, if I try to send a list or card, it crashes. Perhaps, I don't have right json formatting for them.
If someone has any json sent by their webhook (working with API.AI) for list/suggestion chip or card, it would be very helpful!
#matthewayne When I send the following as a reply (json), it works:
speech = "Thank you. People also looked at these:"
print(speech)
webhook_result={
"speech": speech,
"contextOut": [
{
"name": "_actions_on_google_,complementary",
"lifespan": 100,
"parameters": {}
}
],
"data": {
"google": {
"expectUserResponse": True,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": speech
}
}
],
"suggestions": []
},
"systemIntent": {
"intent": "actions.intent.OPTION",
"data": {
"#type": "type.googleapis.com/google.actions.v2.OptionValueSpec",
"carouselSelect": {}
}
}
}
}
}
I also populate carouselSelect with list of things in carousel. But if I change it to listSelect, and respond, it crashes.
When I say crash, it means that Google says that my app has stopped responding.
It would be very helpful to have a template or sample listResponse json.
After a carousel response is sent to the user the next request that will be sent will likely be a list selection event. You need to handle this either:
in API.AI (by creating an intent with the event actions_intent_OPTION, docs here)
or
in your webhook using the Google Assistant client library (docs here).