Dear all ,
Please find below steps to follow.
Reference chatwidget : widget
Step 1: Create html file with name index.html
<html>
<head>
<title>Rasa Chatbot</title>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<!-- CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- chatbot code -->
<mybot></mybot>
<!--container end-->
<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Step 2: Create script file with name script.js
$(document).ready(function () {
//Widget Code
var bot = '<div class="chatCont" id="chatCont">' +
'<div class="bot_profile">' +
'<img src="logo.png" class="bot_p_img">' +
'<div class="close">' +
'<i class="fa fa-times" aria-hidden="true"></i>' +
'</div>' +
'</div><!--bot_profile end-->' +
'<div id="result_div" class="resultDiv"></div>' +
'<div class="chatForm" id="chat-div">' +
'<div class="spinner">' +
'<div class="bounce1"></div>' +
'<div class="bounce2"></div>' +
'<div class="bounce3"></div>' +
'</div>' +
'<input type="text" id="chat-input" autocomplete="off" placeholder="Start Typing here..."' + 'class="form-control bot-txt"/>' +
'</div>' +
'</div><!--chatCont end-->' +
'<div class="profile_div">' +
'<div class="row">' +
'<div class="col-hgt col-sm-offset-2">' +
'<img src="logo.png" class="img-circle img-profile">' +
'</div><!--col-hgt end-->' +
'<div class="col-hgt">' +
'<div class="chat-txt">' +
'' +
'</div>' +
'</div><!--col-hgt end-->' +
'</div><!--row end-->' +
'</div><!--profile_div end-->';
$("mybot").html(bot);
// ------------------------------------------ Toggle chatbot -----------------------------------------------
//function to click and open chatbot from icon
$('.profile_div').click(function () {
$('.profile_div').toggle();
$('.chatCont').toggle();
$('.bot_profile').toggle();
$('.chatForm').toggle();
document.getElementById('chat-input').focus();
});
//function to click and close chatbot to icon
$('.close').click(function () {
$('.profile_div').toggle();
$('.chatCont').toggle();
$('.bot_profile').toggle();
$('.chatForm').toggle();
});
// on input/text enter--------------------------------------------------------------------------------------
$('#chat-input').on('keyup keypress', function (e) {
var keyCode = e.keyCode || e.which;
var text = $("#chat-input").val();
if (keyCode === 13) {
if (text == "" || $.trim(text) == '') {
e.preventDefault();
return false;
} else {
$("#chat-input").blur();
setUserResponse(text);
send(text);
e.preventDefault();
return false;
}
}
});
$(window).load(function() {
send('Hi');
});
//------------------------------------------- Call the RASA API--------------------------------------
function send(text) {
$.ajax({
url: 'http://localhost:5005/webhooks/rest/webhook', // RASA API
type: 'POST',
headers: {
'Content-Type': 'application/json'
},
data: JSON.stringify({
"sender": "user",
"message": text
}),
success: function (data, textStatus, xhr) {
if (Object.keys(data).length !== 0) {
for (i = 0; i < Object.keys(data[0]).length; i++) {
if (Object.keys(data[0])[i] == "buttons") { //check if
buttons(suggestions) are present
addSuggestion(data[0]["buttons"])
}
}
}
setBotResponse(data);
$("#chat-input").focus();
},
error: function (xhr, textStatus, errorThrown) {
setBotResponse('error');
$("#chat-input").focus();
}
});
}
//------------------------------------ ------------------------------
function setBotResponse(val) {
setTimeout(function () {
if ($.trim(val) == '' || val == 'error') { //if there is no response from bot or there is
some error
val = 'Sorry I wasn\'t able to understand your Query. Let\' try something
else!'
var BotResponse = '<p class="botResult">' + val + '</p><div
class="clearfix"></div>';
$(BotResponse).appendTo('#result_div');
$("#chat-input").focus();
} else {
//if we get message from the bot succesfully
var msg = "";
for (var i = 0; i < val.length; i++) {
if (val[i]["image"]) { //check if there are any images
//msg += '<p class="botResult"><img width="200"
height="124" src="' + val[i].image + '/"></p><div class="clearfix"></div>';
msg += '<p class="botResult"><img width="200" height="124"
src="data:image/png;base64,'+ val[i].image + ' "></p><div class="clearfix"></div>';
/*modal += '<div id="myModal" class="modal">' +
'<span class="close">×</span>' +
'<img class="modal-content" id="img01">' +
'<div id="caption"></div>' +
'</div>'*/
} else {
msg += '<p class="botResult">' + val[i].text + '</p><div
class="clearfix"></div>';
}
}
BotResponse = msg;
$(BotResponse).appendTo('#result_div');
$("#chat-input").focus();
}
scrollToBottomOfResults();
hideSpinner();
}, 500);
}
//------------------------------------- Set user response in result_div ------------------------------------
function setUserResponse(val) {
var UserResponse = '<p class="userEnteredText">' + val + '</p><div
class="clearfix"></div>';
$(UserResponse).appendTo('#result_div');
$("#chat-input").val('');
scrollToBottomOfResults();
showSpinner();
$('.suggestion').remove();
}
//---------------------------------- Scroll to the bottom of the results div -------------------------------
function scrollToBottomOfResults() {
var terminalResultsDiv = document.getElementById('result_div');
terminalResultsDiv.scrollTop = terminalResultsDiv.scrollHeight;
}
//---------------------------------------- Spinner ---------------------------------------------------
function showSpinner() {
$('.spinner').show();
}
function hideSpinner() {
$('.spinner').hide();
}
//------------------------------------------- Buttons(suggestions)-------------------------------------------
-------
function addSuggestion(textToAdd) {
setTimeout(function () {
var suggestions = textToAdd;
var suggLength = textToAdd.length;
$('<p class="suggestion"></p>').appendTo('#result_div');
// Loop through suggestions
for (i = 0; i < suggLength; i++) {
$('<span class="sugg-options">' + suggestions[i].title +
'</span>').appendTo('.suggestion');
}
scrollToBottomOfResults();
}, 1000);
}
// on click of suggestions get value and send to API.AI
$(document).on("click", ".suggestion span", function () {
var text = this.innerText;
setUserResponse(text);
send(text);
$('.suggestion').remove();
});
// Suggestions end -----------------------------------------------------------------------------------------
});
Step 3: In your domain.yml write below code
responses:
utter_msg:
- text: Welcome to our chatbot
Step 4: In your stories.md write below code
## Welcome Message
* greet
- utter_msg