Table of Contents

How to set up questions with a countdown

Pau Sanchez Updated by Pau Sanchez

These scripts and how to's are not native functionalities. Landbot won't be able to support, help or guarantee these scripts and how to's. These Workarounds and How to's are for developers, as a learning and example material on how to extend or modify some of the platform limitations.  Due to platform updates, some scripts might stop working in the future. Please, note that in case of Scripts and Workaround the Custom Success Team can deliver limited support.

In this example, we will show a way to build a custom countdown timer to let the user answer in 5 seconds, if once those 5 seconds had finished and there user didn't input and send the question, the bot will continue to the next question.

Below there is a sample of how the bot will behave:

To build this, we need to build this logic in two areas:

In the Design > Custom Code > Add JS section

Below is the snippet:

<script>
  let landbotScope = this;
  window.landbottimer = "";
	this.onLoad(function() {
  	landbotScope.window.moveflow = function(mode, data, timeoutid) {
    	if (mode === "start"){
        let timeleft = 6;
       	window.landbottimer = setInterval(function(){
         if(timeleft <= 1){ 
           clearInterval(landbottimer); 
         }
         
          landbotScope.document.getElementById(timeoutid).textContent = timeleft - 1;
          timeleft -= 1;
          
          if(timeleft == 0) {
            landbotScope.sendMessage(data)  
          }
        }, 1000);
        
      } else if (mode === "stop"){
        	clearInterval(window.landbottimer)
      }

    }
  });
</script>

This script, contains a function (moveflow()) that will be triggered once the user goes through specific code blocks set up in the builder. In the steps below you will see the code blocks that will trigger this script

In the builder

The main flow for every question will be like in the picture:

  1. The flow starts with a Code block that will trigger the interval:

Here is the code:

let landbotScope = this
landbotScope.window.moveflow("start",{"message":"time's up!","payload":"#2"},"timeout1")

As you can see there are 3 params we are passing:

A. "start" // It tells the function in the global scope to start the interval

B. "{"message":"time's up!","payload":"#2"}" // It is the message payload that will use Landbot SDK , with the message to be displayed and the payload that will trigger the global keywords feaure

C. "timeout1" // This is related to the message to count the seconds left

In case you are using Buttons instead of Text Questions the code will be:

let landbotScope = this
landbotScope.window.moveflow("start",{ type: 'hidden', payload: '#2' },"timeout1")

  1. Next is the Send Message block were we will display the seconds left for the interval:

Here is the snippet:

 Answer in <span id="timeout1">5</span> seconds

Here check that we are using a unique id "timout1", the same as the one we used in the code block before.

  1. Now the Question block:

  1. Another code block, after the question, this will be triggered only if the user answers before the time is finished.

It will be used to stop the interval and avoid issues:

let landbotScope = this
landbotScope.window.moveflow("stop")

  1. A button question (not required but suggested) to stop the flow before continue to the next question. Also will be were the flow will be redirected even if the user doesn't arrive to answer on time:

  1. And the Global Keywords block, that will capture the specific payload we used in the first code block (#2). It is very important to match them.

As you can see in the picture there is more than one (#3) that is because we can use this sequence again for another question:

Template

If you'd like, you can use our pre-made template

How did we do?

Progress Bar Workaround

Creating a Simple Cart in WhatsApp

Contact