Table of Contents

Miscellaneous Classes CSS

Abby Updated by Abby

Please note that these classes are for Landbot V3

Miscellaneous Classes

    Emoji
.is-emoji-button {
}

   Rating
.InputRating {
}

   Back button
.BackButton__Button {
}

.custom-button{
}

    Loader
.lb-loader{
}

   Input text
.InputTextLong__TextArea{
}

    Persistent menu items in header
.is-horizontally-centered{
}
 
Display only the first button in persistent menu

.is-horizontally-centered :nth-child(2){
  display: none;
}

 Universal selector to change icon color
*{
	--form_inputs_border_color: blue!important;
}
    Hide Timestamp

.MessageDate{
	display: none;
}
   No Internet Connection Banner

.panel-container::after {content: "no connection";}
.panel-container p{display:none}

    Hide scrollbar while maintaining scroll functionality (Webkit)
::-webkit-scrollbar {
-webkit-appearance: none;
width: .1px;}

There are several small elements that we may want to change to match the design of our page.

Here are some of those classes with examples of how we can change them:

Emoji

.is-emoji-button {
background-color: blue!important;
}

Rating

.InputRating {
    padding-left: 400px;
}

Back Button

To make the back button always visible:

.BackButton__Button {
 opacity: 1!important;
}

To hide the back button:

The code:

.BackButton__Button {
display: none;
}

Loader

.lb-loader{
    color: blue;
}

Input Text

.InputTextLong__TextArea{
    background-color:lightpink;
}

Persistent Menu

Here's how to hide the options from the header while keeping them in the persistent menu:

Here's the result:

.is-horizontally-centered{
  display: none;
}

Display only the first button of the persistent menu

.is-horizontally-centered :nth-child(2){
  display: none;
}

Send Icon Color

We can change the input border as well as the 'Send Icon' with the following:

The result:

*{
  --form_inputs_border_color: blue!important;
}

Hide Timestamp

Before:

After:

The code:

.MessageDate{
display: none;
}

No Connection Banner

The code

.panel-container::after {content: "no connection";}
.panel-container p{display:none}

Scroll Bar

Keeping in mind that this is something that's controlled by the browser(it won't work with Mozilla) we can use Webkit to edit the scroll bar and hide it while maintaining the scroll functionality.

We just need to add the following snippet to our 'Add CSS' section in the bot:

::-webkit-scrollbar {
-webkit-appearance: none;
width: .1px;
}

To remove the scroll functionality all together we use this:

.js-auto-scroll{
overflow: hidden!important;
}
.Body{
 overflow-y: hidden;
display: flex !important;
    position: absolute!important;}

How did we do?

Message Bubble Class CSS

Recommended Image Sizes

Contact