Change Landbot custom CSS dynamically from parent page onload

Pau Sanchez Updated by Pau Sanchez

By default, in case you want to add customisations with CSS to the style of your web bot, you will have to add the code in the Design > Custom > Code section:

But there might be a case, where you want to change some elements from the bot style completely, based on the page where is embedded. Maybe you might need to adapt to the flag of the country language, or to a specific branding of a product, etc...

To change dynamically it here is how you can do it:

  1. First in the bot, you can add this snippet, in the Design > Custom Code > Add JS section:

Here you will make a function available in the Global Scope of the site, to trigger changes in the design Add CSS section:

<script>
ย  let landbotScope = this
ย  window.changeCSS = function(style){
ย  ย  landbotScope.config.style = style
ย  }
</script>
  1. Then in the page where the bot is embedded, we will add variable that contains the custom CSS we want to use, and we will trigger the new css once the bot is loaded:

let newStyle=`.button{background-color:yellow}`; //Custom CSS

myLandbot.onLoad(function(){
    window.changeCSS(newStyle)
})

With this you will have a bot that by default the button class has a background blue, but in this page will be yellow

How did we do?

CSS Customization Examples: CV Template

Widget/Bubble Customizations with Javascript and CSS

Contact