Buttons?

[ReeceMed]

I noticed your experiment with buttons adding them into the chat flow.

How is this achieved?

[ashleylord8]

@ReeceMed : So a basic way to feature buttons within the conversation-simple app I did the following:

Within the conversation workspace I added the following under the intent "#goodbyes".

To do this, you go to the intent node, click the vertical three dots symbol, and then click "Advanced" under "Watson response". Just copy the above (or something of this format) into the dark grey text box.

In the conversation workspace, it should look something like this:

Make sure to make entities that respond to the buttons (in my case I have yes and no).

Obviously, you'll need to wait for your conversation to train after you make these adjustments.

In your code, you can make these buttons click/etc. and look differently (with css) by using specific ids (like the example shows).

To make the buttons respond I did this for javascript:

To style the buttons I did this:

The end goal is this in the conversation-simple app:

I'm not sure if this answers your question, but this is what I've done for this task so far. Let me know if you need any help!

[sayurimizuguchi]

Hi Ashley, you put this code .js in one variable existing or your create new variable?

[ashleylord8]

@sayurimizuguchi The js code featured above was handled in the conversation-simple app for this example. The functions yesBye() and noBye() did not exist beforehand. I added these so I could update the conversation workspace I was using (also shown above). The css ids respond to the ids used in the conversation workspace, as well. The snippets shown above are everything that I added to this example of the conversation-simple app. I'm not entirely sure if I answered your question, though.

[sayurimizuguchi]

Hi Ashley, thanks, but In this case, it's just to know if you added this code to some existing class, example: dialog_service.js. Or you have created a new (.js) one with this script.

[ashleylord8]

@sayurimizuguchi I just added it to the index.html file. As you can see there are script tags around the javascript code. So for simplicity, I just added it here for experimental purposes. So I didn't create any new .js files within the project.

[jersonjunior]

@ashleylord8 By entering into the conversation, could you make your index.html available?

[jersonjunior]

It worked!

[ashleylord8]

@jersonjunior So you can get the original index.html here: https://github.com/watson-developer-cloud/conversation-simple/blob/master/public/index.html. All I did was paste the script shown above within this file. I also added the css shown above within app.css which can be found here: https://github.com/watson-developer-cloud/conversation-simple/blob/master/public/css/app.css.

[sayurimizuguchi]

Ashley, there is the possibility to show an example to execute some script locally or else in another server from that event of clicking "yes" or "no"

[ashleylord8]

@sayurimizuguchi I'm not sure what you're asking. I ran this code locally. I did so by following the directions for the conversation-simple app: https://github.com/watson-developer-cloud/conversation-simple. I added the code to index.html and app.css and ran it locally just like you would following the directions in this repo. This is how I ran this experimental project. I'm sure you can follow the directions within the repo to make it run in bluemix too. But to make this experimental project work you should follow the directions of the conversation-simple app since that's what this code is affecting.

[dgterry]

Closing due to lack of activity and the original question appears to have been answered. Please file something new if necessary.

[lilicolls]

Hi, I used this and worked perfectly... thank you for sharing this. Now I'm wondering how can I hide a button after a user clicked on it, so he won't be able to use the same button twice

[lilicolls]

Hi, you need to create the function like she did in the example otherwise you would get that error.

Edit the index.html file that you have in the folder and add the script that is in the 2 picure

[juanmusto]

Thanks lilicolls,

Another question is possible based on a watson response, connect to an external api, such as google maps.

When requesting a watson address interpret it and show me a google map.

Thanks

[mjpradeep]

hi, I have added above button code in index.html , when i click on the yes/no button its showing " Uncaught ReferenceError: APi is not defined" error.

[freeOuss]

@ashleylord8 you are a life saver, thank you

[freeOuss]

@mjpradeep hey i had the same issue, you should just modify the context variable as follows: var context = Api.getResponsePayload.context;

[qntbkk]

Hi all, I got this error on conversation.js

conversation.js:124 Uncaught TypeError: Cannot read property 'querySelectorAll' of null at displayMessage (conversation.js:124) at Object.Api.setRequestPayload (conversation.js:38) at Object.sendRequest (api.js:55) at yesBye (index.html?profile=Responsive:201) at HTMLButtonElement.onclick (index.html?profile=Responsive:1)

any update conversation.js so far ?

[lat94]

Is there any new advance on implementing buttons on Watson with this https://console.bluemix.net/docs/services/conversation/release-notes.html#change-log (12 July 2018) new update? According to IBM docs, there is not a way to define what will be rendered to the user:

How options are rendered can differ depending on where you deploy the dialog. For example, in one integration channel the options might be displayed as clickable buttons, but in another they might be displayed as a dropdown list.

[mitchmason]

@juanmusto see this for making external api calls: https://console.bluemix.net/docs/services/assistant/dialog-actions.html#dialog-actions

[mitchmason]

@lat94 The pattern is still the same. We have not updated this sample app at this time to use the syntax generated there, we can create an issue but resources are short for making improvements. The pattern is the same except that now in the Watson Assistant GUI you have a simple way of generating the JSON similar to what Ashely defined above.

[AlaGarali]

Dear @ashleylord8 , Thank you for button example. It works very well. On the other hand, do you have an example of a button-list with its items are defined as soon as the button-list is declared or filled with entity or filled with data from database ? Example: size = Small, Medium, Large. In order to facilitate the manipulation and guide the user, this variable can be put in button-list. Thanks.