Table of Contents

CSS Customization Examples: "Back to School" Theme

Abby Updated by Abby

Here's an example of some customizations in an embedded bot

Changing the bot's skeleton

The first things we did were hide the header, change the iframe content size, and make a transparent background, so you're able to see the container background.

/*Hide Header*/

.Header{
display: none;
}

/*Transparent Background*/

.Background{
    opacity: 0;
}

/*Creating A Smaller Container*/

.frame-content{
	width: 70%;
}

Button styling with animation

Later we added some animations to the buttons and pushed them to the right, we added a transparent background as well and removed the button help text.

[data-block="welcome_0"] .MessageBubble{
  padding-bottom: 20px!important;
  text-transform:uppercase;
}

[data-block="welcome_0"] .button{
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-family: sans-serif;
  text-decoration: none;
  color: #FFFFFF;
  border: 2px solid #333;
  letter-spacing: 1px;
  text-align: center;
  position: relative;
  transition: all .35s;
  text-transform:uppercase;
}

[data-block="welcome_0"] .button{
  position: relative;
  z-index: 2;
}

[data-block="welcome_0"] .button:after{
  
  position: absolute;
  content: "";
  left: 50;
  width: 0;
  height: 100%;
  bottom: 0%;
  background: #ed1c24;
  opacity: 0.5;
  transition: all .35s;
  color: #FFFFFF;
  border-radius: 25px;
}

[data-block="welcome_0"] .input-button-label:hover{
 
  color: #FFFFFF;
}

[data-block="welcome_0"] .button:hover:after{
  width: 100%;
}
[data-block="welcome_0"] .input-button-label{
  color: white;
}

[data-block="welcome_0"] .button{
  font-weight: 600!important;
  border: none!important; 
  left: 300px; 
  background-color: transparent!important;
  max-width: 200px!important;
  display: flex;
  justify-content: center;
}

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

In this case, we used [data-block="welcome_0"] before the classes to specify that we didn't want to apply the styles to all elements. For more info on identifying blocks go here: Identify Blocks CSS

Input box with shadow effect

We also changed the background color to transparent in the Question: Name block and added a box-shadow when the user hovers over the input box.

 .MessageBubble{
  padding-bottom: 30px!important;
  background-color: transparent;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
}

.input-icon-send-button:hover{
   background-color: transparent!important;
}

.input:hover{
  
  text-align: left;  
  letter-spacing: 0px; 
  border-width: 2.5px;
  border-color: #ed1c24;
  margin-bottom: 10px;
  box-shadow: 10px 1px 14px 1px #ed1c24!important;

}
.input{
  text-align: center;
  letter-spacing: 1px;
}

Live Demo

See the Pen EmbeddedTransparentBot by Abigail (@abigailcfreeman) on CodePen.

The CSS
/*Hide Header*/

.Header{
display: none;
}

/*Transparent Background*/

.Background{
    opacity: 0;
}

/*Creating A Smaller Container*/

.frame-content{
	width: 70%;
}

[data-block="welcome_0"] .MessageBubble{
  padding-bottom: 20px!important;
  text-transform:uppercase;
}

[data-block="welcome_0"] .button{
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-family: sans-serif;
  text-decoration: none;
  color: #FFFFFF;
  border: 2px solid #333;
  letter-spacing: 1px;
  text-align: center;
  position: relative;
  transition: all .35s;
  text-transform:uppercase;
}

[data-block="welcome_0"] .button{
  position: relative;
  z-index: 2;
}

[data-block="welcome_0"] .button:after{
  
  position: absolute;
  content: "";
  left: 50;
  width: 0;
  height: 100%;
  bottom: 0%;
  background: #ed1c24;
  opacity: 0.5;
  transition: all .35s;
  color: #FFFFFF;
  border-radius: 25px;
}

[data-block="welcome_0"] .input-button-label:hover{
 
  color: #FFFFFF;
}

[data-block="welcome_0"] .button:hover:after{
  width: 100%;
}
[data-block="welcome_0"] .input-button-label{
  color: white;
}

[data-block="welcome_0"] .button{
  font-weight: 600!important;
  border: none!important; 
  left: 300px; 
  background-color: transparent!important;
  max-width: 200px!important;
  display: flex;
  justify-content: center;
}

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

 .MessageBubble{
  padding-bottom: 30px!important;
  background-color: transparent;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
}

.input-icon-send-button:hover{
   background-color: transparent!important;
}

.input:hover{
  
  text-align: left;  
  letter-spacing: 0px; 
  border-width: 2.5px;
  border-color: #ed1c24;
  margin-bottom: 10px;
  box-shadow: 10px 1px 14px 1px #ed1c24!important;

}
.input{
  text-align: center;
  letter-spacing: 1px;
}

How did we do?

CSS Customization Examples: Call To Action: WhatsApp

Contact