Table of Contents

Miscellaneous Classes CSS

Abby Updated by Abby

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:

  Buttons in header

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

  Persistent menu modal

.OffsetMenu__Content{
  background-color: #282828;
}

       Persistent menu items

.button--PersistentMenu {
	background-color: transparent;
  border-radius: 3px 3px 3px 3px!important;
}

   Persistent menu close button

.OffsetMenu__CloseButton{
 background-color: white!important;
  border-radius: 59%
}

     Persistent menu items text

.button--PersistentMenu .label{
	font-size: large;
  text-align: left;
}

Display only the first button of the persistent menu

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

Keep logo visible in mobile

.Header--isSticky .Header__BotInfo{
margin-top: 60px !important;
}
.Header--isSticky .Header__NavigationButton {
margin-top: -50px !important;
}

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;
}

Hide Warning in Date Picker

Before:

After:

The code:

.is-size-4{
	display: none;
}

Social Share

Here's how to hide specific buttons in the 'Social Share' option in the Goodbye message, you'll just change the child number for the one you want to hide

[data-type="referral"] .MessageBubble__content :nth-child(4){

display: none;

}

Before:

After:

Move the avatar to the top of the message

.is-medium-width .msg-grid-row{
align-items: self-start!important;
}

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;
}

Adding a scroll bar in Pop Up, Livechat and embed:

.Body{
overflow: overlay;!important;
height: 101%;
position: absolute;
width: 99%;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 8px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

If you want to edit only specific messages/blocks please follow the Identify blocks CSS article

How did we do?

Message Bubble Class CSS

CSS Customization Examples: "Back to School" Theme

Contact