I'm trying to use Fulfillment with a Webhook to return a JSON to Dialogflow that will show a card in Google Assistant. I got the JSON directly from here:
https://developers.google.com/actions/conversation-api-playground
However, the card is not showing in the Google Assistant Simulator.
The simulator has a tab called "Response" and I can see the json response.
No errors in the error tab.
Have you added a subTitle to the basic card? That might be the issue here.
conv.ask(new BasicCard({
text: 'This is the Text',
title: 'Title',
subtitle: "This is a subtitle",
buttons: new Button({
title: 'Read More',
url: 'https://assistant.google.com/',
}),
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
}));
Please make these changes and try again.
Related
I have connected Dialogflow agent to a Facebook page, and i'm displaying Facebook card response using the fulfillment feature in Dialogflow. i can't figure out how to catch the card button click event. I need the chat to move to the next intent on button click. However button click doesn't trigger anything.
Here's the fulfillment code used to create button
function getState(agent){
state = agent.parameters.State;
return getAd()
.then(result => {
for(const item of result.result){
agent.add(new Card({
title: item.nmi,
imageUrl: 'url',
text: item.structuredAddress.singleAddressLine,
buttonText: item.nmi,
buttonUrl: 'uri'
})
);
}
})
.catch(() => {
agent.add(`I'm sorry.`);
});
}`
You can use the payload field in the postback button to send a
specific message back to dialogflow when the button is clicked.
If you combine this with the parameters, you can use them to trigger
specific intents, or just to send the information of the product
clicked
check the original answer Here
I currently have a node bot embedded on my web app via direct line but I am struggling to attach:
Spotify Audio
I am trying to do so by using the URL attachment or an adaptive card, but the spotify embed doesn't play
Below is the code I use:
var send = {
text: "stuff",
attachments: [
contentType: "audio/ogg",
contentUrl: "spotifyEmbedUrl"
]
}
await stepContext.context.sendActivity(send);
I am unsure on how I can get spotify audio to play.
Is there a way I can return HTML code (and so get around it by adding an iframe into the chat etc?)
OR maybe I could create a modal popup that I could create the embed iframe?
Any help would be appreciated!
Unfortunately, you can't just send a file to a web page and it automatically start playing. Additionally, while Spotify provides embed URLs, which are not a direct link to an audio file, you can't simply tell the browser to play the file.
However, Spotify provides the embed code for displaying a play button that can be used in a page to play a song. Assuming you are using Web Chat in a web site (and even if you're not, this will give you an idea) and that, from the code you supplied, you are wanting to send the song in an activity, you can achieve this by sending the embed code in the activity, instead, via Web Chat's store. When the activity is received, the embed code is passed to a function to update the page and, thus, display the play button.
Be aware, the play button is essentially a UI widget, not a media player. There is no functionality available for telling the play button to auto play, stop, or anything else. The most you can do is display the button after which the user will be required to interact with it.
Also, this is a someone bare bones, simplified implementation. There are many things that aren't accounted for - please don't consider this a complete solution. There are aspects you will need to consider (e.g. multiple cards that utilize a postBack action).
In your bot: You want to send the embed code in an activity. Whether that is an event, message, or something else, is up to you. As you can see below, I have chosen to send a hero card that initiates a postBack when the button is pressed (a postBack sends data behind the scenes without displaying the action to the user).
const card = CardFactory.heroCard(
"Rome Wasn't Built in a Day",
null,
CardFactory.actions([
{
type: 'postBack',
title: 'Read more',
value: `<iframe src="https://open.spotify.com/embed/track/6lzd7dxYNuVSvh7sJDHIa3" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>`
}
]),
{
subtitle: 'Artist: Morcheeba',
text: 'Album: Parts of the Process - released 2003'
}
);
await stepContext.context.sendActivity({ attachments: [card]});
Web Chat: First, use Web Chat's store to filter on incoming activities that include attachments where the button type (action) is postBack. When the condition is met, get the last card rendered and assign an event listener. When the card's button is clicked, get the 'spotify' container element and update the innerHTML with the embed code that was sent in the activity, thus displaying the play button.*
Please note, the setTimeout() used below is necessary for enabling the click action. Without the time out, the event listener being appended to the button would occur before the store finished processing the incoming activity.
<div id="webchat" role="main"></div>
<div class='spotify'></div>
[...]
const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => action => {
if ( action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' ) {
const activity = action.payload?.activity;
if (activity.attachments && activity.attachments[0].content.buttons[0]?.type === 'postBack') {
setTimeout(() => {
const spotifyIframe = activity.attachments[0].content.buttons[0].value
let cards = document.querySelectorAll( '.ac-adaptiveCard' )
let cardLength = cards.length;
let card = cards[ cardLength - 1 ];
card.querySelectorAll( 'button' ).forEach( button => {
button.addEventListener( 'click', ( e ) => {
e.preventDefault();
const spotifyContainer = document.querySelector( '.spotify' );
spotifyContainer.innerHTML = spotifyIframe
} )
} );
}, 300);
}
next( action );
} );
Hope of help!
I attempt to add a button onto my action on Google assistant, but the code only works for the first one. Here is where I add in the button for the ones that don't work:
'Biology': {
title: 'Biology',
text:'Press the button to visit our site for more info. Biology is an important subject for those who are willing to take it, and this website will provide you' +
'with the necessary skill for this subject.',
image: new Image({
url: 'https://www.edzuki.com/biology/Biology+Edzuki.jpg',
alt: 'Biology as a subject',
}),
button: new Button({
title:'Click for the Biology Page',
url: 'https://www.edzuki.com/biology/',
}),
and, for some reason, this one works
'Art': {
title: 'Art',
text:'Press the button to visit our site for more info. Art is an important subject for those who are willing to take it, and this website will provide you' +
'with the necessary skill for this subject.',
image: new Image({
url: 'https://www.edzuki.com/art/Art.jpg',
alt: 'Art as a subject',
}),
buttons: new Button({
title: 'Click for Art',
url: `https://www.edzuki.com/art/`,
}),
display: 'WHITE',
},
for const subjectCard (a basic card).
No errors are thrown by the assistant, just no button is visible. Why is this?
Thanks in advance.
In your first example you use the key button for your button, but in the second example you use buttons with an 's'. The docs also suggest you should be using the plural version buttons and your own code should show you this works based on your second working example
https://developers.google.com/actions/assistant/responses#basic_card
e.g
'Biology': {
title: 'Biology',
text:'Press the button to visit our site for more info. Biology is an important subject for those who are willing to take it, and this website will provide you' +
'with the necessary skill for this subject.',
image: new Image({
url: 'https://www.edzuki.com/biology/Biology+Edzuki.jpg',
alt: 'Biology as a subject',
}),
buttons: new Button({
title:'Click for the Biology Page',
url: 'https://www.edzuki.com/biology/',
}),
When using the telegram API (in my case using telebot:https://github.com/kosmodrey/telebot)
How can link to a bot_command with a parameter ?
For example i want a bot that shows information about some fruits and i have
['apples','pears','bananas']
i can do /show [fruit] to show details about each fruit and /list to
show a list of all fruits.
When i do /list i want to show it like this:
You currently have 3 fruit:
APPLES PEARS BANANAS
However i want these to be clickable and once the user clicks a fruitname, he
will be directed to /show [clicked fruit].
i tried with a normal a href in { parse_mode : HTML } but that doesn't
seem to work.
Use inline buttons. They work the way you described. For example:
var options = {
reply_markup: JSON.stringify({
inline_keyboard: [
[
{text: 'button 1', callback_data: '1'},
{text: 'button 2', callback_data: '2'},
{text: 'button 3', callback_data: '3'},
],
]
})
};
bot.sendMessage(chatId, 'Pick action:', options);
You can think of them as anchor tags. They appear along with the text in chat window, and scroll with the text, but you can click on them. Non-inline buttons are more like a permanent menu.
Example above is using this library.
what key should I use in
var notification = new Notification('hi', {
icon: 'xxx.png',
body: "click me",
})
to override the bottom text on notification ?