Dynamically Change Any Style

Abby Updated by Abby

There are some instances where we may need to change the styles halfway through, or maybe we want to 'Jump to' another bot and change the styling there as well.

We already have documentation for doing this on some static classes, like background, but here we'll go over how to achieve this on any class.

In order to do this, there are only two steps. The first step is to add any class you're going to change to the 'Add CSS' section in design(you can find most classes here):

Next you'll add a Code Block in the builder in the part of the flow that you want to change the styles:

Here's what I added to my code block to change the message bubble and input buttons:

let landbotScope = this;
landbotScope.window.document.getElementById("custom-styles").sheet.insertRule(`.MessageBubble{background-color:black!important;}`);

landbotScope.window.document.getElementById("custom-styles").sheet.insertRule(`.input-button{background-color:black!important;}`);

So you'll only need to change the highlighted part for the styles you want to add:

And that's it! The styles will change as soon as the bot passes over the code block, they'll remain the same for the rest of the flow.

Here's how you can change the background color or image

How did we do?

CSS Customization Examples: Video Bubble

CSS Customization Examples: CV Template

Contact