Table of Contents

CSS Customization Examples: Video Bubble

Abby Updated by Abby

In this example we're going to use a video message taking up the full Livechat to engage the customer right away, we'll add the video in an iframe in the welcome message and then later remove the classes we applied to it.

Here's what our bot will look like:

The Flow

In the welcome message, we'll copy and paste our video iframe, you can also use <video> tags we'll add a class to the iframe called 'landbotvid' so we can apply CSS to it later.

Next, we'll use Javascript in a code block to remove all of the classes that we had to apply to make our video cover the entire Livechat, here's what you'll add in the code block:

let landbotScope = this;
let ruleCSS1 = ` .landbotvid {
    display: none!important;
}`
let ruleCSS2 = ` .Chat__spacer{
   max-height: 190px!important;
}`
let ruleCSS3 = ` .Chat{
	padding: 10px 10px 10px 10px!important;
}`
landbotScope.document.styleSheets[0].insertRule(ruleCSS1);
landbotScope.window.document.getElementById('introvideo').pause();
landbotScope.document.styleSheets[0].insertRule(ruleCSS2);
landbotScope.document.styleSheets[0].insertRule(ruleCSS3);

You'll then connect the code block to the next point in your flow.

The CSS

In this template you'll need CSS in both the container page as well as in Landbot, we'll start with the CSS in your builder.

Video

Starting with the video, we'll make sure it's the correct height and width as well as remove any extra padding and margin:

.landbotvid {
	height: 100vh!important;
   width: 93vw!important;
   object-fit: stretch!important;
    margin: 0;
   padding: 0;
}

Chat

The next thing we want to do is remove any extra padding from the chat as well as the chat spacer:

.Chat{
	padding: 0px 0px 0px 0px;
}
.Chat__spacer{
	max-height: 0px;
}

Welcome Message

Selecting the node reference for the welcome message we'll apply the following styles, these styles anchor the video to the bottom of the Livechat, remove the extra padding, remove the box-shadow from the input button, and make it the length of the Livechat:

[data-block= "welcome_0"] .MessageBubble{
  padding: 0px 0px 0px 0px!important;
  margin-bottom: -100px!important;
}

[data-block= "welcome_0"] .input-button{
  height: 90px;
  margin-bottom: -5px!important;
  border-radius: 0px!important;
  margin-right: 0px;
  margin-left: -15vw!important;
  width: 110vw!important;
  	margin-top: 8px!important;
  box-shadow: none;
}
[data-block= "welcome_0"] .input-button:hover{

  box-shadow: none!important;
}

User Message

We want to push the user message to the top so the video is no longer in view, we also want to make it transparent, this is optional of course:

.is-author-user{
	background-color: transparent!important;
  	margin-top: 30px!important;
}s

Avatar

We've added a GIF to our Launcher widget, if you do the same we recommend adding the following to your CSS

.is-launcher__avatar{
    width: 100% !important;
       height: 100% !important;
}
.launcher__bubble .Media{
  width: 80px;
  height: 72px;
  border-radius: 50%;
     object-fit: cover!important;
}

The Javascript

We'll add the following snippet to the 'Add JS' section of our bot, it will lessen the width of the Livechat, giving us a more aesthetic video:

<script>
 let stylesheet =  window.document.styleSheets;
  
  console.log(stylesheet);
  window.document.styleSheets[1].insertRule(`.is-open{width:400px!important}`);


</script>

Demo

We recommend testing it out on the full page, here's the link

All CSS

In case you want to copy and paste:

.launcher__bubble .Media{
  width: 80px;
  height: 72px;
  border-radius: 50%;
     object-fit: cover!important;
}

.landbotvid {
	height: 100vh!important;
   width: 93vw!important;
   object-fit: stretch!important;
    margin: 0;
   padding: 0;
}

.Chat{
	padding: 0px 0px 0px 0px;
}

[data-block= "welcome_0"] .MessageBubble{
	padding: 0px 0px 0px 0px!important;
  margin-bottom: -100px!important;
}

[data-block= "welcome_0"] .input-button{
  height: 90px;
  margin-bottom: -5px!important;
  border-radius: 0px!important;
  margin-right: 0px;
  margin-left: -15vw!important;
  width: 110vw!important;
  	margin-top: 8px!important;
  box-shadow: none;
}
.input-button-label{
font-size: larger;  
  padding-top: -15px!important;
}

.Chat__spacer{
	max-height: 0px;
}


.input-small-header{
  display: none;
}

.is-launcher__avatar{
    width: 100% !important;
       height: 100% !important;
}


[data-block= "welcome_0"] .input-button:hover{

  box-shadow: none!important;
}
.is-author-user{
	background-color: transparent!important;
  	margin-top: 30px!important;
}

.MessageDate{
display: none;
}

Is possible to add a video bubble in any message bubble

How did we do?

Multi Questions CSS

Dynamically Change Any Style

Contact