How to create a SharePoint Online Chatbot using JavaScript

In this tutorial, I will explain, how to create a SharePoint Online chatbot using Javascript.

• SharePoint crud operations using jsom (JavaScript Object Model)
• Microsoft office 365 chatbot
• How to Create a QnA Bot in Azure

What is a Chatbot

A chatbot is like an automated process that can interact with the user without direct human intervention. We can call a robot.

The bot can answer you all question which will take from the database and it will gather user information as well.

A bot interaction can be a quick question and answer, or it can be a sophisticated conversation that intelligently provides access to services.

Users can converse with a bot using text, interactive cards, and speech. We can also use API to get data and store data.

We can develop the bot feature in many ways. Microsoft also provides Azure bot service to integrate this feature with our application.

We can also use SignalR, it is a library that needs to include in our solution to simplifies the process.

We can also simply use Database or API to store and retrieve the information with full customization.

So here I have given a simple example, how to create a chatbot in SharePoint Online using JavaScript.

SharePoint Online chatbot using JavaScript

Step 1: Log in to the SharePoint Online site – > Create a web part page – > Add a Script Editor Web part.

Step 2: Please look into the below screenshot. This design will appear on your site once you paste the below code inside the Script Editor Web part.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script type="bcb7a5393cd8994c421742f6-text/javascript" src="/sites/coronatracker2020/SiteAssets/jquery.min.js"></script>
<script type="bcb7a5393cd8994c421742f6-text/javascript" src="/sites/coronatracker2020/SiteAssets/jquery-ui.min.js"></script>
<script type="bcb7a5393cd8994c421742f6-text/javascript" src="/sites/coronatracker2020/SiteAssets/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.input-sm {
    width: 720px!important;	
}
.messages > h1 {
    font-size: 13px;
    margin: 0 0 0.2rem 0;
}
</style>
<div class="container">
	<div class="row">
                
                 <div class="col-sm-8">
                  <div class="chatbody">
                  <div class="panel panel-primary">
                <div class="panel-heading top-bar">
                    
                </div>
                <div class="panel-body msg_container_base">                    
                    <div class="row msg_container base_receive">
                        <div class="col-md-2 col-xs-2 avatar">
                            <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive ">
                        </div>
                        <div class="col-md-10 col-xs-10">
                            <div class="messages msg_receive" id="output">
                                
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="input-group">
						<input type="text" id="input" value="" type="text" class="form-control input-sm chat_input" placeholder="Write your message here...">                      
                    </div>
                </div>
    		</div>

                 </div>
             </div>
</div>

<script>
var questionNum = 0;													// keep count of question, used for IF condition.
var question = '<h1>what is your name?</h1>';				  // first question

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;
    console.log(input);

    if (questionNum == 0) {
    output.innerHTML = '<h1>hello ' + input + '</h1>';// output response
    document.getElementById("input").value = "";   		// clear text box
    question = '<h1>how old are you?</h1>';			    	// load next question		
    setTimeout(timedQuestion, 2000);									// output next question after 2sec delay
    }

    else if (questionNum == 1) {
    output.innerHTML = '<h1>That means you were born in ' + (2016 - input) + '</h1>';
    document.getElementById("input").value = "";   
    question = '<h1>where are you from?</h1>';					      	
    setTimeout(timedQuestion, 2000);
    }   
}

function timedQuestion() {
    output.innerHTML = question;
}

//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
  }
});
</script>

Step 3: Once you run this application, the computer will ask you some question and you have to answer. Please look into the screenshot.

Next, if you click on Enter, It will say you, hello and after some time it will ask you next question like the below screenshot.

You can add more questions to communicate with the user. So here I have just added all questions in the code and I am not using and API or Database to store or retrieve information.

Where we can store Chatbot Question and Answers

Step 1: We can simply create a list in SharePoint and add all questions into that list.

Step 2: All question should have unique ID which can identify easily .

Step 3: We will create one more SharePoint list which will store all responses to the question.

Step 4: Next, When users log in to the site we will store the user unique identity in the list.

Step 5: Next we will write a script which will ask all questions one by one and it will manage based on the condition which will give based on the requirement.

Step 6: Next we will apply the same logic which applied in the above script.

Here I used enter to go next question but we can simplify it and we will include the SetTimeOut function to ask all questions one by one after getting the response for the previous question.

You may like following SharePoint tutorials:

• Create, Update, Delete and Display List items using JavaScript
• Delete all items from List using JavaScript Object Model (jsom) in SharePoint
• SharePoint Online: Add/Delete custom actions from Site Actions menu using JavaScript Object Model (jsom)
• Read, create, update, delete file using JavaScript object model (jsom) in SharePoint

The above steps, I will implement in my next blog. This is the just a fundamental of Chatbot.