While a text interface is great for allowing people to engage with natural language, there are times when a simple button has advantages allowing you to interact with specificity and save time for the user.

Use HTML Buttons Directly in the Rivescript

Below is an example of how you could insert buttons in the chatbot's response. It uses a standard HTML button element with an onclick attribute to run the `getReply() function of the chatbot library. Notice how each argument in the getReply functions ('hello', 'bye', or 'youre awesome') is a string that will match a trigger in your Rivescript file.

That's it. Modify as needed.

Let's add a simple pop sound effect when a message is sent by the chatbot.

First, download the mp3 file above of a pop sound. Alternatively, you could find or create your own sound if you like. Place the file in the same folder as your code files.

Add the following line to the very top of your Javascript to define a global variable for your sound. This will allow your code and the iDEW trivia library to use your sound.

Add the following line of code inside your setup() function. This will load your sound file so that it can be played later.

That is actually all you need to do. It should work for you now. The iDEW chatbot library actually plays the pop sound (that you have made available) when the chatbot responds to a message.

Using functions in your chatbot script will provide some powerful options. For example, you can make calculations on the fly for the user, or you can access, search, and filter a database based on user input.

Defining a function

Below is an example function, demonstrating the syntax to use in your chatbot script file. We recommend that you put functions at the top of your file.

> object getRandomNumber javascript
  return Math.random();
< object

The function is called getRandomNumber and we include the word javascript to indicate that the function is written in javascript. The object tag syntax encloses the function. Notice that something is returned to be used by the chatbot. In this case, it is a random number.

Accessing the Function

In order to use the function in your chat script, you use the <call> tag like below.

+ [*]random[*]
- Here is your random number: <call>getRandomNumber</call>

If the user says "Random number please" (the trigger), the getRandomNumber function is called and the returned random number will be the response.

User: Random number please.

Bot: Here is your random number: 0.874612

Passing Arguments to a Function

A function can also accept arguments or inputs. See the example below.

> object getSquared javascript
  var input = Number(args[0]);
  return input*input;
< object

The argument passed to the function is accessed by args[0]. If there were a second argument (like two numbers to be added) you would access it with args[1]. args is an array.

In order to use a function that accepts arguments, you place those values after the function name, like below.

+ square *
- <star> squared is <call>getSquared <star></call>

Notice that we are using the user's input as our argument--a number in this case--using the <star> tag.

User: square 4

Bot: 4 squared is 16

1. Prepare a Google Sheet as Your Database

You can use a Google Sheet as a database for your chatbot. Making a database this way allows you to more easily offer a lot of information for your users. For example, you could create a dictionary of terms on a topic that your chatbot would use to help people searching for information.

Below is an example of a spreadsheet of machine learning terms. Of course, you could have many more terms. The key is to make it a simple table with single word headings on the first row.

2. Publish Your Google Sheet

In order to import your information, you will need to publish your Google Sheet.

1. Publish your copy of the spreadsheet by ...

   • Selecting File > Share > Publish to the web...

   • Then under the link heading select the sheet you want to use with the first drop-down menu

   • Select comma-separated values (.csv) from the second drop-down menu.

   • Finally, click the Publish button and copy the link provided.

2. Once your spreadsheet is published, copy the shareable link. (Make sure your link is not restricted to your organization.)

3. Load the Spreadsheet Data into Your Chatbot JavaScript

Update the code.js file inside the setup() function to what you see in lines 4 - 7 below. Notice that chatbot.loadFiles(['bot.rive']); has been moved inside the chatbot.getDB function. This ensures that your database has loaded before the chatbot is started.

function setup() {
	pop = new Audio('pop.mp3');
  chatbot.replyDelay = 500;
  chatbot.getDB('https://docs.google.com/spreadsheets/d/e/2PACX-1vQVGvNvFcTxeu2zL1u8xSicbmD7Vghr_gjBp-lhAXscGi0nzy9RX7ZU0Hp0GvQgPP0cpgSeyBbUa8_Y/pub?gid=0&single=true&output=csv').then(data => {
    chatbot.db = data;
    chatbot.loadFiles(['bot.rive']);
  });
}

You will need to change the link above to the link you copied in the previous step for your Google sheet. Your spreadsheet data is now available in an array, chatbot.db, where each array element represents a row in your spreadsheet as an object.

The chatbot.db array now contains your spreadsheet data as a list of Javascript objects like the one shown below. See the connection to the spreadsheet we started with? So, in Javascript you could use chatbot.db[0].keywords to get the first term's key words ("labeled, training").

[
  {
    id: "0",
    term: "Supervised Learning",
    definition:
      "Supervised learning is the machine learning task of inferring a function from labeled training data.",
    keywords: "labeled, training"
  },
  {
    id: "1",
    term: "Unsupervised Learning",
    definition:
      "Unsupervised learning is a type of machine learning algorithm used to draw inferences from datasets consisting of input data without labeled responses.",
    keywords: "no labels, inferences"
  },
  {
    id: "2",
    term: "Reinforcement Learning",
    definition:
      "Reinforcement learning (RL) is an area of machine learning inspired by behaviorist psychology, concerned with how software agents ought to take actions in an environment so as to maximize some notion of cumulative reward. ",
    keywords: "reward"
  },
  {
    id: "3",
    term: "Perceptron",
    definition:
      "In machine learning, the perceptron is an algorithm for supervised learning of binary classifiers.",
    keywords: "classifier, binary, classify"
  }
]

4. Accessing the Database in a Function

You could now access your database in a function like the one below. This function gets a random term to quiz the chatbot user. Notice how the chatbot responds to "quiz me" by calling the getRandomTerm function (object) which returns a random term so the chatbot responds with something like "What is Reinforcement Learning?".

  > object getRandomTerm javascript
    var randomIndex = Math.floor(Math.random() * chatbot.db.length);
    var currentItem = chatbot.db[randomIndex]
    return currentItem.term;
  < object

  + quiz me
  - What is <call>getRandomTerm</call>?

Wow. That's seems like a lot of work for such a short dialogue. But now you could have one of 10,000 terms randomly displayed to the user. There will be more examples of functions accessing a database in the listed Code Mods.

5. Using multiple databases

Separate Google Sheets Files

If you want to access multiple Google Sheet files to create multiple databases, you can reuse the getDB( ) function to load several databases like below. This allows you to access each database with chatbot.db, chatbot.db2, and chatbot.db3.

// replace the 'link' text in each to match your spreadsheet links 
// for each Google Sheets file
chatbot.getDB('link').then(data => chatbot.db = data);
chatbot.getDB('link2').then(data => chatbot.db2 = data);
chatbot.getDB('link3').then(data => chatbot.db3 = data);

One Google Sheets File with Several Sheets

If you want to use a single Google Sheets File that has multiple named sheets, you can use the getDB( ) function in the following way. Notice that you must include the sheet name along with the link in this case.

// replace the 'link' text and 'sheet name' in each to match your spreadsheet link
// and corresponding sheet names 
chatbot.getDB('link', 'My First Sheet Name').then(data => chatbot.db = data);
chatbot.getDB('link2', 'My Second Sheet Name').then(data => chatbot.db2 = data);
chatbot.getDB('link3', 'My Third Sheet Name').then(data => chatbot.db3 = data);

1. Create the Rivescript Trigger

Create a trigger in your chatbot script like the one below that will respond to the user typing "search" followed by a word. The response will begin with "Searching..." to provide feedback to the user, then call a searchTerms() function that we will define next.

+ search *
- Searching... <call>searchTerms <star></call>

2. Create the "searchTerms" Function to Process the Search

The function below will process the search and return HTML about the results.

> object searchTerms javascript
  var filtered = chatbot.dbFilter2(chatbot.db, "term", args); //used to be args[0]
  var terms = filtered.map(function(row) {
      return `${row.term}: ${row.definition}<hr>`;
    });
  var reply = "Didn't find any matches.";
  if (terms.length) reply = "Here is what I found.<br>" + terms.join(" ");
  chatbot.postReply(reply, 2000);
  return '';
< object

Let's step through what is happening above...

Line 2 uses the chatbot.dbFilter2() function. Notice there are 3 arguments used by the function. - chatbot.db is the database to be searched. - "term" is the column name to be searched. In this case we will search each term name. - args represents the text the user has typed in for the search. The variable filtered now contains the matches of our search.

Lines 3-5 takes each matched item and creates HTML for the term and definition that will be displayed to the user.

Line 6 defines a variable for our reply string. We start with "Didn't find any matches" as a default.

Line 7 modifies our reply with the HTML of terms and definitions if there were any matches.

Line 8 uses the chatbot.postReply() function to display the reply after 2 seconds.

Line 9 simply returns an empty string so that you don't get an undefined showing up in your chatbot in certain cases. The reply text is taken care of in the lines above.

The Rivescript Way

Rivescript offers a way to store data in your chatbot. For example, you could use the following script.

For a more detailed explanation go .The only limitation is that it only stores the name for the duration of the browser session. In other words if the user leaves your chatbot and comes back another time, his or her name will not be remembered (or stored) by the chatbot. The next way uses Javascript localStorage to store the data for longer periods.

The Javascript localStorage Way

Using this method we can store information that will remain in the browser, even after a browser refresh. (Unless the user clears the browser cache, which is not typical.) First let's create some Javascript functions in our Rivescipt file to store, get, or clear a user's name.

Next, create the script needed to use these functions, like below.

You can modify the examples above to store and retrieve different information.

There are a couple of ways you could add topics to your chatbot. But we recommend you do it the following way if you are working in teams.

Remember that you can always access the to understand them more.

1. Create separate chatbot script files for each topic. In addition to your main script file (bot.rive) create files like bot-topic-1.rive and bot-topic-2.rive for your topics.

2. Place topic tags in each of the new files with the script embedded like this.

3. Include an entry point to the new topics in your main chatbot script file using something like this, where the bot goes to the new topic if the visitor types "go to topic 1".

The {@ start} triggers the new topic's + start line. So in this case the chatbot would respond to "go to topic 1" with "Greetings from topic 1".

4. Lastly, have the javascript load your new files. Find the chatbot.loadFiles function in your code.js file and add your new files like below.

You will definitely want to customize and refine the scripts above, but you should be on your way.

For your chatbot we recommend that you place the bulk of your Javascript work in a proper Javascript file and keep your Rivescript "objects" very simple.

An Example...

Your Rivescript file could simply call a Javascript function like below.

Notice how this will run the getRandomTerm() function, like the one below, that can be in your code.js file.

The chain of returns: The Javascript function will return the "term" (in this case) to the Rivescript object, which will then return that value to your script file

The example code below demonstrates how you could add flip cards to your chatbot. Here we use a flip card to create a study tool for terms and definitions. This example is an adaptation of a blog post by David Walsh.

The Rivescript Object (Javascript)

Below, the getRandomFlipcard function gets a random term from the database and creates a flash card with the term on the front side and the definition on the back. Buttons for the user to get another term or quit are provided. You can use this code below, but you may need to make adjustments to work with your database column names.

> object getRandomFlipcard javascript
  var randomIndex = Math.floor(Math.random() * chatbot.db.length);
  var currentItem = chatbot.db[randomIndex]
  var html =  `
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front">
          ${currentItem.term}
        </div>
        <div class="back">
          ${currentItem.definition}
        </div>
      </div>
    </div>
    <button onclick="chatbot.getReply('flipcard');">Next</button>
    <button onclick="chatbot.getReply('start');">Quit</button>`
  return html;
< object

The Rivescript Trigger

Below is a simple trigger you can use, but you will likely want to customize how the user starts using flip cards, whether by clicking a button or using a different keyword trigger.

+ flipcard
- <call>getRandomFlipcard</call>

The CSS

You will need the CSS below for the flip card to work. It is recommended that you paste this to the bottom of your stylesheet.

/* For flip card */
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
  margin: auto;
}
	/* flip the pane when hovered */
	.flip-container:active .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 325px;
	height: 50vh;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
  box-sizing: border-box;
  padding: 10px;
  height: calc(50vh - 30px);
  background: white;
  box-shadow: 1px 1px 6px #888;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}
/* End flip card */

That's it. Your flip card should work, but you may have to make modifications to how you access your database.