I am using cards to show output to the user. I can only be able to show maximum of two chat bubbles and one card. But i want to add more than one card to the intent response in the webhook. I am using nodejs webhook using actions-on-google npm module, is there a way i can add more than one card in the response in single turn?
My use case is, i want to show multiple images in the response.
No, it is not. Basic Card can be only rich response element on response. If you want to show more than one element you may consider to use Table Card element.
Here is the all fields you can use with Table Card. You can remove some of fields.
conv.ask(new Table({
title: 'Table Title',
subtitle: 'Table Subtitle',
image: new Image({
url: 'https://developers.google.com/actions/images/badges/XPM_BADGING_GoogleAssistant_VER.png',
alt: 'Alt Text'
}),
columns: [
{
header: 'header 1',
align: 'CENTER',
},
{
header: 'header 2',
align: 'LEADING',
},
{
header: 'header 3',
align: 'TRAILING',
},
],
rows: [
{
cells: ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
dividerAfter: false,
},
{
cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
dividerAfter: true,
},
{
cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
},
],
buttons: new Button({
title: 'Button Text',
url: 'https://assistant.google.com'
}),
}))
Also, you can use Carousel or Browsing Carousel for multiple cards with touch selection option. But, don't forget, you need use these element with option response or web urls.
For more information:
Google Assistant Responses
Related
I may be missing something really obvious, but I haven't figured out how I can build a List programatically in v2 of tne actions-on-google Nodejs client library.
In other words, I want to do something like the conv.ask code below, but don't know the items beforehand, so need to create a list, add the items to the list, and then ask the list in dynamic way. I could do this in v1 with:
var rList = app.buildList("Please select one option:");
for (var r =0; r < resp_text.length; r++) {
rList.addItems(app.buildOptionItem(resp_value[r], resp_matches[r]).setTitle(resp_text[r]));
}
app.askWithList(question_str, rList);
... so am basically looking for the v2 equivalent of the above.
Any help appreciated, thanks!
conv.ask(new List({
title: 'Things to learn about',
items: {
// Add the first item to the list
'MATH_AND_PRIME': {
synonyms: [
'math',
'math and prime',
'prime numbers',
'prime',
],
title: 'Title of the First List Item',
description: '42 is an abundant number',
image: new Image({
url: 'https://example.com/math_and_prime.jpg',
alt: 'Math & prime numbers',
}),
},
// Add the second item to the list
'EGYPT': {
synonyms: [
'religion',
'egypt',
'ancient egyptian',
],
title: 'Ancient Egyptian religion',
description: '42 gods ruled on the fate of the dead in the afterworld',
image: new Image({
url: 'http://example.com/egypt',
alt: 'Egypt',
}),
},
// Add the last item to the list
'RECIPES': {
synonyms: [
'recipes',
'recipe',
'42 recipes',
],
title: '42 recipes in 42 ingredients',
description: 'A beautifully simple recipe',
image: new Image({
url: 'http://example.com/recipe',
alt: 'Recipe',
}),
},
},
}));
Ok, answering my own question just in case it will help someone else...
The way (or at least one way) to do this is to dynamicaly create an item array and using that in the list constructor:
var ritems = {}
for (var r=0; r < resp_text.length; r++) {
ritems[resp_value[r]] = {
synonyms: [resp_matches[r]],
title: resp_text[r]
}
}
conv.ask(question_str);
conv.ask(new List({
title: "Please select one option:",
items: ritems
}))
I have seen most of the examples related to how to return rich content via webhooks involving just basic response and Card.
https://github.com/dialogflow/fulfillment-webhook-nodejs/blob/master/functions/index.js
What's the structure needed in dialogflow webhook V2 response to return either List or Carousel?
If you want to incorporate carousels and lists with Dialogflow, you'll need to import the actions-on-google module, as not all rich responses are supported by Dialogflow alone. You can see on the Actions on Google Rich Responses reference docs. Also there's a Fulfillment-Actions on Google sample
const { WebhookClient } = require('dialogflow-fulfillment');
const { Carousel } = require('actions-on-google');
conv.ask(new Carousel({
items: {
// Add the first item to the carousel
[SELECTION_KEY_ONE]: {
synonyms: [
'synonym of title 1',
'synonym of title 2',
'synonym of title 3',
],
title: 'Title of First Carousel Item',
description: 'This is a description of a carousel item.',
image: new Image({
url: IMG_URL_AOG,
alt: 'Image alternate text',
}),
},
// Add the second item to the carousel
[SELECTION_KEY_GOOGLE_HOME]: {
synonyms: [
'Google Home Assistant',
'Assistant on the Google Home',
],
title: 'Google Home',
description: 'Google Home is a voice-activated speaker powered by ' +
'the Google Assistant.',
image: new Image({
url: IMG_URL_GOOGLE_HOME,
alt: 'Google Home',
}),
},
// Add third item to the carousel
[SELECTION_KEY_GOOGLE_PIXEL]: {
synonyms: [
'Google Pixel XL',
'Pixel',
'Pixel XL',
],
title: 'Google Pixel',
description: 'Pixel. Phone by Google.',
image: new Image({
url: IMG_URL_GOOGLE_PIXEL,
alt: 'Google Pixel',
}),
},
},
}));
I'm looking at this example w.r.t creating tinyMCE plugin. What I want to do is to open
a popup, and the content inside the popup is specified programmatically, without having to load a physical page at certain url:
Add an input element of type=file in tinymce container
Basically the author solved the issue about a plugin he was trying to create. I'm trying the same code but the popup is completely empty for me, no errors, any suggestions? Where can I find info about the "body" parameter when calling "windowManager.open", like:
// Open window
editor.windowManager.open({
title: 'Example plugin',
body: [{
type: 'textbox',
name: 'code',
label: 'Video code'
}],
...
Try giving the textbox a size:
// Open window
editor.windowManager.open(
{title: 'Example plugin',
body: [
{ type: 'textbox',
size: 40,
name: 'code',
label: 'Video code'
}
],
.....
In a series of receiving elements of the dynamic form. After some of these elements, I need to add plug-in.
Ie first went to the field, such as input, and automatically added after a new xtype.
Tried createChild, but for some reason he swears by xtype.
var formPanel = new Ext.form.FormPanel({
title: 'Test Form',
labelWidth: 120,
width: 350,
padding: 10,
tbar: [{
text: 'Add Item',
handler: function () {
formPanel.add({
xtype: 'textfield',
fieldLabel: 'My TextBox'
});
formPanel.doLayout();
}
}],
renderTo: 'output'
});
Demo here http://ext4all.com/post/extjs-3-how-to-add-a-new-field-dynamically
Just diving into SenchaTouch which seems very promising.
I'm building my first application, a simple login form check source http://pastebin.com/8Zddr9cj
I'm looking for a way to do the following things :
Display 'nice' error message when the login/password is wrong. Can be in red to replace the 'Please enter your credentials); i don't know how to access this property.
If login success, close the form and load the application (probably another js file).
Quite simple, but i'm a newbie to this,
1) Fieldset has a method called setInstructions which you can call to update the instructions. So, you could specify an id configuration in your field set, then use that later on when you want to update the instructions.
...
items: [
{
xtype: 'fieldset',
id: 'fieldset',
title: 'Login',
instructions: 'Please enter your credentials',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'emailfield',
name : 'email',
label: 'Email',
placeHolder: 'your#email.com',
useClearIcon: true
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
}]
}
],
...
//wherever you want to update the instructions
var fieldset = Ext.getCmp('fieldset');
fieldset.setInstructions('My new instructions!');
2) Here is a simple demo of this:
//create a panel, which is full screen, and will contain your form, and another item
//which you want to show at some point
var wrapper = new Ext.Panel({
fullscreen: true,
layout: 'card',
//my two items
items: [
form,
{
xtype: 'panel',
html: 'my second panel, which is not visible on render.'
}
]
});
//change the active card/item, when you need to
wrapper.setActiveItem(1); //starts at 0
Make sure you remove fullscreen from your form, as it is no longer fullscreen (this wrapper panel is).