You can now let chatbot users give their Feedback on the content displayed in the chatbot, using the feedback feature in Answers.

...

...

Customizing the feedback thumbs

Changing the image or color of the feedback thumbs

You can give your own image/color for the thumbs up and thumbs down buttons shown in the Chatbot UI.

To change this, navigate to the Experience Designer > Bot View Template node > Custom CSS tab and place the below code.

.reactions .thumbs-down{
    background-image: url(<Thumbsdown image>),url(<Circle surrounding the thumb>);
}
.reactions .thumbs-down-selected{
    background-image: url(<Thumbsdown selected image>),url(<Circle surrounding the thumb>);
}
.reactions .thumbs-up{
    background-image: url(<Thumbsup image>),url(<Circle surrounding the thumb>);
}
.reactions .thumbs-up-selected {
    background-image: url(<Thumbsup selected image>),url(<Circle surrounding the thumb>);
}

...

Location of the thumbs

By default, the thumbs are available on the right bottom corner of the chat bubble.

...

You can change the position and separation between the thumbs by placing the below code in the Experience Designer > Bot View Template node > Custom CSS tab.

.reactions .thumbs-down{
    margin-right: 100px;
    margin-left: -90px;
}
.reactions .thumbs-down-selected{
    margin-right: 100px;
    margin-left: -90px;
}
.reactions .thumbs-up{
    margin-right: 100px;
    margin-left: -90px;
}
.reactions .thumbs-up-selected {
    margin-right: 100px;
    margin-left: -90px;
}

...

Capturing the Feedback Analytics

...