Table of Contents

CSS Examples: Lead Gen

Abby Updated by Abby

Collecting information from leads can be tricky as they have a tendency to quit halfway through.

For these simple lead cases, we've created a template that displays the questions one by one so the users aren't overwhelmed.

This article will be divided into question types as you'll need to enter the node references for each question. For more information on how to use CSS in your bot start here.

So, let's begin!

Background, Body, & Header

For the background, we're using an image.

We then made the header transparent and removed the shadow. We've also added lots of spacing so that only one question appears at a time

/* Transparent Header & Remove Shadow */

.Header{
	background-color: transparent!important;
        box-shadow: none!important;
}
/* Adds Spacing Between Elements */

.Chat__spacer{
	height: 600px!important;
}
.msg-grid-container{
  top: -80px;
 justify-content: center;
  margin-bottom 130px;
}
/* Hide User Input & Spacing */

.is-author-user{
	background-color: transparent!important;
  margin-bottom: 200px!important;
  color: transparent!important;
}

Welcome Message & Button

For the welcome message, we wanted something simple and easy to read, of course, you can customize this as much as you want.

We need to add the node reference as all of the messages have the same class.

[data-block="welcome_0"] .MessageBubble{
	background-color: transparent!important;
  font-size: larger;
  color: black;
   margin-bottom: 20px;
	margin-left: 50px!important;
}

[data-block="welcome_0"] .input-button{
	background-color: grey!important;
  border-style: none!important;
max-height: 10px!important;
  margin-left: 160px;
  margin-top: 80px;
  margin-left: 220px!important;
  border-radius: 10px;
}

Input Questions

In this case, we have two different types of input questions, the first is basic and the second is 'type-email'.

We'll start by adding the classes that apply to both types, then for each question, you'll add the first type with the node reference.

Since we only ask for the email once, you'll just need to add the email reference once.

/* APPLY TO BOTH TYPES */

.MessageBubble{
	background-color: transparent!important;
  font-size: larger;
  color: black;
   margin-bottom: 27px;
}
/* Shadow On Focus */

.MessageBubble__content .input:not(:focus){
  box-shadow: none;
  border-radius: 0px;
  background-color: transparent!important;
}

.MessageBubble__content .input:focus{
  box-shadow: none;
  border-radius: 0px;
  background-color: transparent!important;
  
}
.MessageBubble__content .textarea:not(:focus){
  box-shadow: none;
  border-radius: 0px;
  background-color: transparent!important;
}

.MessageBubble__content .textarea:focus{
   box-shadow: none;
   border-radius: 0px;
}

/* Text Input Styling */
.InputTextLong__TextArea{
   background-color: transparent;
   letter-spacing: .1em;
   margin-top: 30px;
}

.InputTextLong__TextArea{
	border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  width: 390px!important;
  height: 30px!important;
  border-color: black!important;
 
}
.InputTextLong{
	width: 450px!important;
}

.InputText{
	width: 450px!important;
 
}

/* Remove Box From Input */
.input{
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  width: 390px!important;
  height: 30px!important;
  border-color: black!important;
 
}

/* Hide Send Button */
.input-icon-send-button{
 display: none;
}

/* Text Press Enter To Send */
.input-help-text{
  top: 200px!important;
  color: black;
  font-size: small!important;
}

Basic Input Questions (Add the node reference each time you have an input question)

[data-block="Nklkp7zpn"] .MessageBubble p{
    width: 600px!important;
  
}
[data-block="Nklkp7zpn"] .MessageBubbleText{
    margin-left: 70px;
}

[data-block="Nklkp7zpn"] .input-help-text{
	top: 220px!important;
  left: 340px;
  color: black;
  font-size: small!important;
}
[data-block="Nklkp7zpn"] .input{
padding-bottom: 2px!important;
     margin-left: 60px;
  font-size: large;
}
/* First Character Small (the number in this case)*/
[data-block="Nklkp7zpn"] p::first-letter {
font-size: small!important;
}

Email Input

[data-block="Nklku03aj"] .MessageBubble p{
    width: 600px!important;
  
}
[data-block="Nklku03aj"] .MessageBubbleText{
    margin-left: 70px;
}

[data-block="Nklku03aj"] .input-help-text{
	top: 190px!important;
  left: 340px;
  color: black;
  font-size: small!important;
}
[data-block="Nklku03aj"] .input{
padding-bottom: 2px!important;
     margin-left: 50px;
   font-size: large;
  background-color: transparent!important;
}
.InputEmail{
  margin-left: 78px;
}
[data-block="Nklku03aj"] p:first-letter {
font-size: small!important;
}

/*Email Autofill Background Color*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

Button Question

[data-block="Nklkr4ggp_0"] .input-button{
	border-radius: 0px;
  margin-top: -5px;
  margin-left: 0px!important;
  margin-right: 1px!important;
  padding-top: 30px;
  padding-bottom: 30px;
  width: 190px;
background-color: grey!important;
}
[data-block="Nklkr4ggp_0"] .input-buttons{
 margin-top: 129px!important;
  margin-left: 100px!important;

}
[data-block="Nklkr4ggp_0"] .MessageBubble p{
    width: 600px!important;
  margin-left: 63px;
}
/* First Character (number) Small */
[data-block="Nklkr4ggp_0"] p:first-letter {
font-size: small!important;
}

/* Hide Question Help Text */
.input-small-header{
	display: none;
}

Little Details

Small things that make a big difference

.BackButton{
  margin-left: -340px!important;  
   font-size: smaller;
  padding-top: 0px;
}
.BackButton__Button{
opacity: 1!important;
font-size: smaller;
}
.BackButton__Label{
    font-size: smaller!important;
}
.lb-loader{
  color: black!important;
}
.MessageDate{
display: none;
}

Inside the Builder

Details
This bot is compatible with PopUp and Fullpage only

Live Example

How did we do?

CSS Customization Examples: Call To Action: WhatsApp

CSS Customization Examples: "Translucid"

Contact