Table of Contents

Refillable bottles

Luis Trueba Updated by Luis Trueba

In some cases we want our bot to communicate with our website, and we can style its elements so for that reason we thought it is a good idea to show you how to fill some bottles depending on the user's choice.

In this example, we'll show you how to change the styles of the bottles so it creates the feeling that they are being filled and when one of them is full the bot will continue the flow.

Step 1: Creating the Bottles.

To create the bottles we will use the following HTML and CSS, as we have some lines of code on this example you have the option of copying what you need here:

Step 2: Creating the function that changes the style.

In this function, we pass a "color" parameter which is a number that represents each bottle.

Thus we choose the value of the current water height of the bottle selected by the number. We use a switch so that depending on the selection we increase the height of the water in the bottle.

Furthermore, there is a condition that checks if we have reached 150, this means that the bottle is full and in that case, our function returns "done", we will use this later.

We will make sure to call this function within the bot so that it increases the 20 px of the height. In the next step, we will demonstrate how this is done.

function fillBottleR(color) {

var curr = document.getElementsByClassName('water')[color].clientHeight;
if (curr < 150) {
switch (color) {
case 0:
document.getElementsByClassName('water')[color].style = `height: ${curr + 20}px`;
case 1:
document.getElementsByClassName('water')[color].style = `height: ${curr + 20}px`
case 2:
document.getElementsByClassName('water')[color].style = `height: ${curr + 20}px`
case 3:
document.getElementsByClassName('water')[color].style = `height: ${curr + 20}px`
case 4:
document.getElementsByClassName('water')[color].style = `height: ${curr + 20}px`
case 5:
document.getElementsByClassName('water')[color].style = `height: ${curr + 20}px`

else {
return "done";

Step 3: Creating the bot.

The first thing we must do when creating our bot is to give the user the option to choose which bottle they want to fill.

Once we know which option is chosen, we establish a variable with a number to identify each bottle, we start with 0 since in our HTML the classes of the elements have the same name.

We call our function and store its value in the variable "check". Thus we establish a condition so that when it is equal to "done" we will create a variable "var" that will be equal to 0.

var check = window.fillBottleR(@bottle)

if (check == "done"){
var : 0

Finally, we have a condition that verifies if your variable "var" is equal to 0, when this happens our bot will continue on its way and show who is the winner otherwise it will go back to the beginning following the red line.

How did we do?

Proactive message on mobile