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).

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

How did we do?

Pop up modal to embed third party elements

Different ways to embed Videos in Landbot

Contact