Table of Contents

Progress Bar Workaround

Abby Updated by Abby

In some cases when we have a long flow, it might be useful to add a progress bar so that the user knows the expected amount of time that it will take.

In this example, we'll append the tagline and header text to add a solid block which will be our progress bar, below that, we'll add a text. Depending on the number of questions we'll divide the length of the progress bar (more on that later).

In the header:

In the body:

Steps for header

Step 1: Create a tagline and header

To create the tagline and header classes we'll need to add any character to the text input section, this is important, as if we don't have any character in this section the class won't be created, therefore we won't be able to append it.

Step 2: Add the customizations to your progress bar

Now we'll go to the Custom CSS section of our bot in "Design" and set the width to 0% (the starting percentage is up to you).

We also use 'color' for the character we added, and background-color for the actual bar, these must be the same color, otherwise, the character will appear.

The class for the header is 'Header__Title':

.Header__Title{
  background-color: grey;
  color: grey;
  width: 0%;
}

I added letter-spacing to the header subtitle, but it's not necessary for the progress bar!

Step 3: Add the code blocks in the builder

Now we'll go to the builder and add a code block with the following snippet every time we want the progress bar to advance (changing the width in every snippet).

For example, if I have four questions I'll add four snippets, one after each question, the first would be "width: 25%;" the second, "width: 50%;" etc..

The second snippet is to change the text of the header subtitle, you can edit anything between the parentheses in this one:

let landbotScope = this;

this.document.getElementsByClassName('Header__Title')[0].style="width:20%;"

this.document.getElementsByClassName('Header__Subtitle')[0].textContent='Your progress is: 20%'

And that's it! Now you have a progress bar! Here's what the size looks like in Livechat (you'll want to use a smaller font for the header in Livechat you can add font-size: small; to the header title class):

Details
Keep in mind that if a user clicks on the back button the progress bar won't return to its previous position

You can download a template for this workaround here

Steps for body

Step 1:

Add a message block with the following:

<div id="bar" class="search">One moment while we search!<span class="has-text-success has-text-weight-bold"> search in progress </span><progress class="progress is-success" max="100">30%</progress></div>

The first text will be what appears as plain text, the 'search in progress' will be highlighted

Feel free to change or remove either

Step 2:

Copy the node reference from the first block:

Now we'll paste this node reference in the second block, here:

Done! πŸŽ‰<div class="is-hidden"><script>let landbotScope = this;landbotScope.document.querySelector('[data-block="REFERENCE_0"]').setAttribute("style","display: none;");</script></div>

How did we do?

Fixing Web Bot Loading Issues for iOS Devices in Meta Campaigns with Disclaimers

How to set up questions with a countdown

Contact