Table of Contents

Dynamically Change a Bot's Background

Abby Updated by Abby

Please note that this will only work in Landbot V3

There are times during the flow that you may want to change your bot's background, we've created a workaround that lets you do just that! You can change the background color, image, or video... one thing to keep in mind is that you must first set the background you want from the design section, this creates a class that we can later manipulate. Just follow these steps:

To change the background video

If you'd like to change the background video throughout different areas in your flow just select the "Code" block and add the snippet below with your mp4 url please note that for this to work you'll have to start with a video in the background, you can use any of the default examples in the design section, here's the snippet:

let landbotScope = this;

let videoSource = "https://static.landbot.io/landbot/video/video_1.mp4";
        
        (function (){
       landbotScope.window.document.getElementsByClassName('Background--video')[0].children[0].src=videoSource

        }());

Here's the part you'll change: https://static.landbot.io/landbot/video/video_1.mp4

Make sure it's a valid url between parentheses with https! You may also want to be aware of the video size as it could affect the loading time of the bot.

Here's what it will look like:

For mobile:

let landbotScope = this;

let videoSource = "https://static.landbot.io/landbot/video/video_1.mp4";
     
  landbotScope.document.getElementsByTagName('video')[0].src=videoSource;

To change the background color

If you'd like to dynamically change the background color throughout the flow you can do so, similar to the method above, we'll use a "Code" block with a snippet which changes the color, you can either specify a color name or use hex colors. Here's the code you'll need to add to the "Code" block:

let landbotScope = this;
landbotScope.window.document.getElementsByClassName("Background--color")[0].style="background-color:grey"

Just be sure to start with a solid background color in "Design" > "Colors & Shapes" > "Background" and add your color after "background-color:" in the snippet.

Here's an example:

To change the background image

You can change the background image at any point throughout the flow, keep in mind, however, that you'll need to start the flow with an image, just go to "Design" > "Colors & Shapes" > "Background" to upload an image... To change the background image at specific points throughout the flow you can use the "Code" block with the following code:

var landbotScope = this;

landbotScope.window.document.getElementById('Background').style.backgroundImage= "url('https://landbot.io/wp-content/uploads/2020/10/conversational-email-nurture-campaigns-930x600.jpg')"

Here's the part you'll change:

https://landbot.io/wp-content/uploads/2020/10/conversational-email-nurture-campaigns-930x600.jpg

Just be sure to use a valid image url between parentheses with https!

Here's what it will look like:

For mobile, you should add the following (with your URL) in addition to what you already have

landbotScope.window.document.getElementsByClassName('Background--image')[1].style="background-image: url('https://file-examples-com.github.io/uploads/2017/10/file_example_PNG_500kB.png')"

To change the background gradient

As with all of the workarounds, you'll need to first set the background gradient from "Design" > "Colors & Shapes" > "Background", this is mandatory as it creates the class that we can later manipulate.

To change the gradient you can add a "Code" block with the following code:

let landbotScope = this;
let ruleCSS = `.Background {
    --background_color_gradient_from: blue;
    --background_color_gradient_to: pink;
}`

if(landbotScope.document.styleSheets[0].cssRules[0].cssText.includes("Background")){
	landbotScope.document.styleSheets[0].deleteRule(0)
	landbotScope.document.styleSheets[0].insertRule(ruleCSS)
} else {
	landbotScope.document.styleSheets[0].insertRule(ruleCSS)
}

All you need to change is the colors you want, in this case, I used blue and pink. Here's an example of what it looks like:

How did we do?

CSS Customization Examples: Carrd Embed Beginner

Proactive Message Customizations with Javascript and CSS

Contact