Introduction – What are chatbots?
A chatbot is a program that communicates with you.
It is a layer on top of, or a gateway to, a service. Sometimes it is powered by machine learning (the chatbot gets smarter the more you interact with it). Or, more commonly, it is driven using intelligent rules (i.e. if the person says this, respond with that).
ChatBot can also be useful to collect more information and data in an anonymus way without using intrusive solution like cookies.
TL;DR
Let’s create our chatbot for our website that ask simple question to our users and store those data
<————-You can try the final version here ! 🙂
Step 1Â : Html base
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>ChatBot</title>
<body>
<div id="output"></div>
<div id="container">
<input type="text" id="input" value=""><button id='snd' > Send </button>
</div>
<script>
</script>
</body>
</html>
Javascript Logic
<script>
var questionNum = 0;
var redirecturl ='REDIRECT URL';
var redirectAfter=false;
var dataurl='STORE_URL';
var question = '<h1>Hi!??<br>What is your name?</h1>';
document.getElementById("input").focus(); // first question
var data=new Array();
var output = document.getElementById('output'); // store id="output" in output variable
output.innerHTML = question; // ouput first question
function bot() {
var input = document.getElementById("input").value;
document.getElementById("input").focus();
if (questionNum == 0) {
output.innerHTML = '<h1>hello ' + input + ' <br> I am a ChatBot !</h1>';// output response
data.push({name:input});
document.getElementById("input").value = ""; // clear text box
document.getElementById('input').style.display = 'none';
document.getElementById('snd').style.display = 'none';
question = '<h1>how old are you???</h1>'; // load next question
setTimeout(timedQuestion, 2000); // output next question after 2sec delay
}
if (questionNum == 1) {
output.innerHTML = '<h1>That means you were born in ' + (new Date().getFullYear() - input) + ' </h1>';
data.push({age:input});
document.getElementById("input").value = "";
document.getElementById('input').style.display = 'none';
document.getElementById('snd').style.display = 'none';
question = '<h1>where are you from?</h1>';
setTimeout(timedQuestion, 2000);
}
if (questionNum == 2) {
output.innerHTML = '<h1>Nice! I ke ' + input + '</h1>';
data.push({country:input});
document.getElementById("input").value = "";
document.getElementById('input').style.display = 'none';
document.getElementById('snd').style.display = 'none';
question = '<h1>You had a good day?</h1>';
setTimeout(timedQuestion, 2000);
}
if (questionNum == 3) {
output.innerHTML = '<h1> Oh ' + input + ' I understand</h1>';
data.push({today:input});
document.getElementById("input").value = "";
document.getElementById('input').style.display = 'none';
document.getElementById('snd').style.display = 'none';
question = '<h1>What is your dream?</h1>';
setTimeout(timedQuestion, 2000);
}
//simply copy and paste more questions!!
}
function timedQuestion() {
output.innerHTML = question;
document.getElementById('input').style.display = 'block';
document.getElementById('snd').style.display = 'block';
document.getElementById("input").focus();
}
function redirect()
{
window.location= redirecturl;
}
function sendData()
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
//alert(xhr.responseText);
if(redirectAfter)redirect();
}
}
xhr.open('GET', dataurl, true);
xhr.send(null);
}
//push enter key (using jquery), to run bot function.
$(document).keypress(function(e) {
if (e.which == 13) {
bot(); // run bot function when enter key pressed
questionNum++; // increase questionNum count by 1
}
});
$('#snd').click(function(e) {
bot(); // run bot function when enter key pressed
questionNum++; // increase questionNum count by 1
});
WordPress Integration:
-
Create a new widget in the Theme Sidebar
-
HTML structure and the javascript code
-
 Pres Save and Enjoy!