Table of Contents

Proactive Message Customizations with Javascript and CSS

Abby Updated by Abby

The proactive message is the optional text bubble that appears above your chat widget and provides more visibility to your site, here are some different ways you can customize it:

Change the background color of the Proactive messages

Add the following code in the Add JS section:

<script>
var landbotScope = this;
  this.onLoad(function() { // This Css rule can only applied once Landbot script is loaded
    landbotScope.document.styleSheets[0].insertRule('.LivechatProactive .Message[data-type=text] .MessageBubble { background-color: red !important}');
  })
</script>

In this example we just simply change the color to "red", you can change it for any other color that you need:

Justify the proactive message to the right

Add the following code in the CSS section:

.Proactive__card-content{
margin-bottom: 5px;  
direction: rtl;
}

.Proactive__messages article {
direction: ltr
}

Hide the proactive message in mobile

Add the following code in the Add JS section:

<script>
var landbotScope = this;
  this.onLoad(function() { 
    if( window.innerWidth < 768 ){
      landbotScope.document.styleSheets[0].insertRule('.LivechatProactive { visibility: hidden !important}'); 
    }
    
  })
</script>

Hide the proactive in mobile and minimize size in desktop

Add the following code in the Add JS section:

<script>
var landbotScope = this;
  this.onLoad(function() { 
    let checkMobile = (/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(navigator.userAgent)) ? 
           landbotScope.document.styleSheets[0].insertRule('.LivechatProactive { display: none !important}'):
           landbotScope.document.styleSheets[0].insertRule('.LivechatProactive{position: fixed;bottom: 90px;right: 10px;display: block;height: 100px;}')
   landbotScope.document.styleSheets[0].insertRule('.Proactive__card-content{margin-bottom: 5px;  direction: rtl;}')
    landbotScope.document.styleSheets[0].insertRule('.Proactive__messages article {direction: ltr}') })
  
</script>

Hide the proactive message after 15 seconds

Add the following code in the Add JS section:

<script>
var siteScope = window;
var landbotScope = this;
  this.onLoad(function() {
    var es= siteScope.document.getElementsByTagName("script")[0]
    var ns = siteScope.document.createElement("script");
    ns.text=`setTimeout(function(){myLandbot.hideProactive()},15000)`;
    es.parentNode.insertBefore(ns,es)
})
</script>

Display proactive only in the home page

If you have the bot in all pages of your website and only want to display the proactive on the home page, the first thing you need to do is get the length of the home page url, this will be without any paths:

window.location.href.length

We want the length of the homepage, that way when a path is added the proactive won't appear.

We'll then add the following to the 'Design'>'Add JS' section of our bot:

<script>
var landbotScope = this;
  this.onLoad(function() { 
    if( window.location.href.length > 19 ){
      landbotScope.document.styleSheets[0].insertRule('.LivechatProactive { visibility: hidden !important}'); 
    }
     })
</script>

So in this case, our length was 19. The condition will only hide the proactive if the length of the URL is greater than 19.

How did we do?

Dynamically Change a Bot's Background

Landbot v3 - Web CSS - RTL

Contact