Create something of similar to Watson Virtual Agents - ibm-watson

Question

I've seen the gif on this page:
https://github.com/watson-virtual-agents/chat-widget
And I want to creato with IBM Watson Conversation tool something similat to this
In which user can choose between some options inserted in a cicular bottom. Do you know how is it possible?

Answer 1

Pretty sure you can do this example.
The summary you need to know: Watson Conversation is one endpoint REST API, so, you can call this service in your backend and to anything in your front end, for shows the messages for your user in different forms (front-end).
In this case, your example is one Web page, so, probably inside the Watson conversation, you need to add the html for the buttons in the response.
You can see this example from one IBM Developer - Ashley using buttons in Watson.
Conversation simple is one awesome example that you can use to understand how Watson Conversation works and one based for your projects using this API. This project is built in Node.js.
See the Official API Reference for use IBM Watson Conversation.

Answer 2

Ok.
I've inserted this code
<script>
function yesBye() {
var latestResponse = Api.getResponsePayload();
var context = latestResponse.context;
Api.sendRequest("yes", context);
}
function noBye() {
var latestResponse = Api.getResponsePayload();
var context = latestResponse.context;
Api.sendRequest("no", context);
}
</script>
inside /ui/index.html (he suggests me to sobstitute " with ' and I make it)
this code
#button-yes {
width: 100px;
margin: 5px;
font-size: 16px;
border: none;
border-radius: 2px;
background-color:#66B266;
color: white;
}
#button-no {
width: 100px;
margin: 5px;
font-size: 16px;
border: none;
border-radius: 2px;
background-color:#ff3232;
color: white;
}
inside /ui/css/conversation.css and inside /ui/css/main.css
and this code
"text": "Would you link to end our conversation?\n\n<button id=\"button-yes\" onclick=\"yesBye();\">Yes</button> <button id=\"button-no\" onclick=\"noBye();\">No</button>"
inside the code js editor of the single node
This is the situation
image
it means that page recognise button but don't recognise their css style.
The structure of my project is the same of this (https://github.com/watson-developer-cloud/car-dashboard) and after every edit I deploy again the project. Where is the mistake?

Answer 3

Ok, but it's not a CSS problem. By losing the buttons, any type of modification I make to the index.html file does not appear.
Not even if I try to replace the "Type something" string in the bottom box.
I tried to empty the cache, resume the deploy at every modification, check that the service names and contents of the manifest.yml file were correct, but nothing. Work space and environment variables are correct.
Every time I hit the play button in the eclipse ID I see this
https://imgur.com/a/oe5lt
with the "Failed to read application content" error message.
Is there anything inside the code (which you can find here https://github.com/watson-developer-cloud/car-dashboard) that blocks any type of modification?