I’d like to request customer to leave a rating for their experience using the chatbot.
I’d like to show them 5 stars and allow them to choose a number of stars and highlight the number of stars they’ve chosen.
How can I achieve this with a Rasa bot?
Hi @asc This is not related to rasa, this is much related to frontend my friend.
1 Like
have u got the answer? I need to implement same logic
@ShirudeAkash its much depends on frontend but you can user numbers, please see this ref link hope this will help you: rasa-chatbot-templates/04_feedback_bot at master · cedextech/rasa-chatbot-templates · GitHub Good Luck!
thanks, i think it will help, I was trying to embed form using iframe, it worked for me but still in future i will try to implement this logic
1 Like
@ShirudeAkash wow, this you have implemented? can you share this code on which language you have made it?
Thank You @nik202, I’ll share code for this, its pure html css, the only problem is I have to embed this form as video in attachment… do you have any solution for that?
domain.yml
utter_end_help:
-
text: Please Give feedback
attachment:
type: video
payload:
src: star.html title: ''
@ShirudeAkash video? and how users will click it and give feedback?
@ShirudeAkash what is your frontend?
Hi @nik202 , its a web app form created in html , css - when user clicks on submit button, just like any other form we can process that input using GET or POST using backend logic, as of now I haven’t written backend logic, Ill be doing it soon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style media="screen">
body{
color: white;
/* margin: auto ; */
height: 50px;
/* border: 1px solid #4CAF50; */
}
.rating {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.rating > input{ display:none;}
.rating > label {
position: relative;
width: 1.1em;
font-size: 15vw;
color: #0063BE;
cursor: pointer;
}
.rating > label::before{
content: "\2605";
position: absolute;
opacity: 0;
}
.rating > label:hover:before,
.rating > label:hover ~ label:before {
opacity: 1 !important;
}
.rating > input:checked ~ label:before{
opacity:1;
/* width: 10px; */
}
.rating:hover > input:checked ~ label:before{ opacity: 0.4; }
</style>
<script>
</script>
</head>
<body>
<form action="#" style="text-align: center;">
<div class="rating">
<input type="radio" name="rating" value="5" id="5" ><label for="5">☆</label>
<input type="radio" name="rating" value="4" id="4" ><label for="4">☆</label>
<input type="radio" name="rating" value="3" id="3" ><label for="3">☆</label>
<input type="radio" name="rating" value="2" id="2" ><label for="2">☆</label>
<input type="radio" name="rating" value="1" id="1" ><label for="1">☆</label>
</div>
<div class="rating">
<textarea id="fb" type="text" placeholder="Enter your feedback" rows="2" cols="50" style="margin: 10px;"></textarea>
</div>
<div class="rating">
<button type="button" class="btn btn-primary">Submit</button>
</div>
</form>
</body>
</html>
@ShirudeAkash it will open in chat widget itself? can you share the screenshot for other users and many thanks for the code share 
yes, that is going to open in chat widget, you need to have that action in domain file, it would have been great if botfront’s rasa webchat had provided support for iframe
also you need to add logic for backend,which i have not written to collect and store that feedback somewhere, we can even embed google form in that, just replace src link with google form link
great, thanks for the feedback and ideas @ShirudeAkash good luck.
thanks @nik, it will be very helpful if you can tell a tool which can be used to create rasa chatbot without hardcoding, i mean UI tool like botfront which can be used for production, can rasa x help me for that?