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

[![enter image description here](https://i.stack.imgur.com/Uo2cM.png)](https://i.stack.imgur.com/Uo2cM.png)

In which user can choose between some options inserted in a cicular bottom. Do you know how is it possible?

Answer: 
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](https://github.com/watson-developer-cloud/conversation-simple/issues/65) from one IBM Developer - Ashley using buttons in Watson.

[Conversation simple](https://github.com/watson-developer-cloud/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](https://nodejs.org/docs/latest-v5.x/api/).

* See the Official [API Reference](https://www.ibm.com/watson/developercloud/conversation/api/v1/) for use IBM Watson Conversation.
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](https://i.stack.imgur.com/jWrLf.png)

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?