I have been trying to get the carousel list on Skype. I have used the JSON specified in
https://dialogflow.com/docs/reference/api-v2/rest/v2beta1/projects.agent.intents#CarouselSelect
but the Skype isn't rendering it or the facebook messenger. If I'm sending a list of cards using
https://dialogflow.com/docs/reference/api-v2/rest/v2beta1/projects.agent.intents#Card
then the Skype is rendering a vertical listview and Messenger is rendering a carousel list. And the carousel select is working fine in V1 of Dialogflow using the message object
https://dialogflow.com/docs/reference/agent/message-objects#custom_payload_message_object_2 using which I'm able to send a custom payload to get the individual platforms, and also sending it in a payload in V2 didn't help.
Is there's a way to achieve the carousel list in Skype using DialogFlow V2? If it's possible to make this happen using payload, please reply with the JSON.
Thanks in advance!
Finally, I cracked it!
The default list view in messenger in a carousel and the default list view of Skype is normal vertical list view. For most of the official documents that I have seen for Skype bot development, Skype encourages its developers to use defined libraries using which the JSON is created and sent to the bot. Messenger, on the other hand, has many resources on the JSON format.
in DialogFlow V1:
In the message object, we get to add the details like the type of payload and the platform we are expected to send it to. More can be read at
https://dialogflow.com/docs/reference/agent/message-objects
So, the carousel in Skype is achieved by adding the Skype bot's attribute attachmentType
This specifies if the item is of carousel else is of normal list view.
The JSON format is specified at
https://miningbusinessdata.com/dialogflow-api-ai-skype-integration/
This is how a custom payload data is sent to Skype bot. Here, we can send a list of items in attachments array with the type and Skype shall interpret it.
in DialogFlow V2-Beta:
There are 2 ways I have identified using which we can send data to Skype/Messenger using V2-Beta.
Using the predefined templates given by dialogflow
https://dialogflow.com/docs/reference/api-v2/rest/v2beta1/projects.agent.intents#Message
This provides the card, image, carousel views. When a list of card objects is sent to Skype, it displays it as a vertical list and when sent to Messenger, it displays it as Carousel list. But, the Skype and Messenger didn't seem to support the carousel template
So the other option we are left with is sending data in the custom payload.
For sending it in a custom payload, there are 2 payloads in V2.
Inside Message object of the webHookResponse
https://dialogflow.com/docs/reference/api-v2/rest/v2beta1/projects.agent.intents#Message
The other payload is in the webHookResponse we shall send.
https://dialogflow.com/docs/reference/api-v2/rest/v2beta1/WebhookResponse
Both of these are JSON objects and sending it in the Message object actually works and with a proper JSON format. The JSON format of the Skype when being sent as a custom payload has very fewer resources available.
"platform":"SKYPE",
"payload":
{
"skype":
{
"attachmentLayout":"carousel",
"attachments":[
{
"contentType":"application/vnd.microsoft.card.hero",
"content":{
"title":
"subtitle":
"images":[{"url":}],
"buttons":[{
"type":"postBack",
"title":
"value":
}]
}
]
}
}
Using this the list of cards are sent to Skype and the list is displayed as Carousel list. On later searching I found out
https://tsmatz.wordpress.com/2016/08/31/microsoft-bot-framework-messages-howto-image-html-card-button-etc/
It has the list of different JSONs that we can send to Skype
Happy Coding!
Related
I have a built a list in my app and I can call my API. However, when I paste my $..title.rendered path in the variable in each card it shows me all the titles rather than having in each card 1 title and second title in second card so on...
Try to render it in various paths still same issue
The issue was that the API should be added outside the column.
I am relatively new to programming and I am making a HTML website where I want to show weather data. I have got an API from openweathermap.org.
When I type the API in google I get data in JSON code.
{"coord":{"lon":5.46,"lat":51.35},
"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],
"base":"stations","main":
{"temp":5.72,"feels_like":1.32,"temp_min":5.56,"temp_max":6.11,
"pressure":998,"humidity":70},"visibility":10000,"wind":{"speed":3.6,"deg":160},
"clouds":{"all":90},"dt":1607178963,"sys":
{"type":1,"id":1527,"country":"NL","sunrise":1607153201,"sunset":1607182290},
"timezone":3600,"id":2745860,"name":"Valkenswaard","cod":200}
The problem is that I don't know how to get the data into my HTML website.
I would like to know how to get JSON code into a HTML website.
I am getting a JSON response back from my API get request. Within the response, there are some HTML elements like anchor tags and line breaks.
How can I display that response and have those html elements appear as actual elements instead of JSON?
For example, this is part of my response:
[
{
"commentDescriptions": [
{
"commentDescription": "Corrections can be made 24 hours after
submitting your application by logging back into your application at <a
href=http://www.somewebsite.org/ style=font-size:inherit;font-
weight:bold;>www.website.org</a>. You must use your User ID and password to
retrieve your application. If you need additional help with your application,
contact the Customer Relations Branch by email at <a
href=mailto:support#email.com style=font-size:inherit;font-
weight:bold;>websitelink</a>.<br/> If your mailing address or email address
changes, you must make the correction on your Application. </br><a
href=https://www.mywebsite.com/ style=font-size:inherit;font-
weight:bold;>Click here</a>
},
]
}
]
I cannot use any external libraries, packages or jquery. All must be done with Angular 7.
here's a newb question. I created an adaptive-card for use in outlook that has an action.http that sends a POST to a webhook url with a single variable entered by the user, which is an email address. This is working great, now i want to use that to send the same message to the user in Teams and as a notification in Windows. I am using Flow and selected the "Post your own adaptive card as the Flow bot to a user". I then entered my json code that i used for the adaptive card for outlook but it doesnt work. So I would assume since the action.http seems to only be available for outlook that I have to change that action for teams to be an action.submit, but then im stuck, where is it submitting to? how do i have it do a POST to my webhook url with the variable data entered by the user?
I did make sure i have the flow bot added to teams and logged in and approved for use for my user for testing. I have also added App Studio to teams and then used it's "card editor" to tweak and practice with the code for the adaptive-card in Teams. I changed my action to be action.submit and finally got a button to appear in the card in Teams but i dont know how to deliver the data which should be the email the user enters, "{\"email\":\"{{email.value}}\"}" to a url using a POST. I dont know what happens when they hit the action.submit button. I have also scoured the internet and microsoft docs for a better understanding but there are no examples of this that I have been able to find.
I used this in the original Adaptive.Card for outlook
{
"type": "ActionSet",
"horizontalAlignment": "Center",
"actions": [
{
"type": "Action.Http",
"title": "Button Text",
"method": "POST",
"body": "{\"email\":\"{{email.value}}\"}",
"url": "mywebhookurl"
}
You are correct that Action.Http is currently not supported in non-Outlook Adaptive Cards. Therefore, you currently have no way of using a Teams Adaptive card to reach your webhook URL.
Action.Submit is generally meant to go to a bot. In this case, it would be Flow, but this isn't currently supported in Flow.
Thankfully,
The fully-custom / interactive card is a scenario we have on our radar.
So unfortunately, you're not doing anything wrong. It just isn't supported yet. I'd imagine that this is why the "Post your own adaptive card..." flow is still in preview:
Google, Twitter, Facebook all seem to have their own styles, colors and worst - sizes. Is there any way to use custom images WHILE also retaining the share 'counts'? A simple API or workaround for all 3 services?
These API's usually render markup to your page which can be targeted & styled through CSS. So, implementing your own CSS that targets the rendered markup may be the simplest and cleanest approach.
Another option is to create your own HTML, CSS and JavaScript that acts as a fascade between the underlying API (Facebook, G+, Twitter) and the client.
These will return simple JSON responses with counts for property of re-Tweets & Likes for a specific URL:
http://urls.api.twitter.com/1/urls/count.json?url=SOME_URL_HERE
http://graph.facebook.com/SOME_URL_HERE
Examples:
TWITTER API CALL:
http://urls.api.twitter.com/1/urls/count.json?url=http://stackoverflow.com
:: JSON RESPONSE:
{"count":4504,"url":"http://stackoverflow.com/"}
FACEBOOK GRAPH CALL:
http://graph.facebook.com/http://stackoverflow.com
:: JSON RESPONSE:
{
"id": "http://stackoverflow.com",
"shares": 7004,
"comments": 3
}
Currently there is no public API method for Google...