Table of Contents

CSS Customization Examples: Call To Action: WhatsApp

Abby Updated by Abby

This Call To Action WhatsApp template consists of three parts, the first is the flow, the second will be the code you need in order to be able to redirect the user to WhatsApp, and the last section will be the design (including CSS), to provide a more cohesive experience.

Below is what the user will see when landing on the page:

Once the user has clicked on 'Start Chat' they will be redirected to WhatsApp, where they can continue to chat, here's what the final view:

Here's what the inside of the bot looks like:

The builder:

The code:

No need to be overwhelmed by the code as you'll just need to copy and paste 😉

The Flow

Starting with the flow, and logic of the bot, the welcome message will be the only element the user sees in your flow, so customize it as you wish!

The input button has an emoji that was pasted but this is completely optional and will look fine without!

Next we have a 'Set Variable' that we'll call 'whatsapp_phone', it's important to stick with this exact name as it'll be used now in the URL.

The phone number should include the country code without the + symbol.

After the 'Set Variable' we need a 'Formula' to encode the welcome message; this is so we can pass it in the url.

The output of which will be 'message_encoded', this is how we do it:

Now that we have both the encoded message and the number we'll add them to the URL that we'll name 'url_whatsapp', here's what you'll put in the next 'Set Variable' block:

https://wa.me/@{whatsapp_phone}?text=@{message_encoded}

For the last part of the flow we'll add a 'Code Block' that calls the function to redirect the user to our desired URL.

You'll need to add the following snippet:

let landbotScope = this;

landbotScope.window.gotto("@{url_whatsapp}")

The Code

Now that we've got the flow out of the way, we can move on to the code section.

All we need to do here is copy and paste the following into the 'Javascript' section of the bot:


<script>let landbotScope = this;
this.onLoad(function() {
landbotScope.window.gotto = function(url) {
 setTimeout(()=>{
window.location.href = url
   },700)}
})
</script>

This snippet has a set timeout of 700 milliseconds, feel free to adapt this.

The Design

Last but not least! Before adding the CSS we'll add our logo image, widget image, name, and 'typical response time'.

After we have that we'll copy and paste the following to the CSS:

img.Media.is-contain{
height: 60px!important;
border-radius: 50%;
}

.Header{
background-color: #255E54!important;
height: 20vh!important;
}

.Header__Subtitle{
color: white;
}

.Header__Title{
color: white;
}

.Chat{   
padding-top: 25vh;
padding-left: 0px;
}

.Messages{
padding-left:10px!important;
}

.input-button{
width: 100%!important;
background-color: rgb(79, 206, 93)!important;
border-color: rgb(79, 206, 93)!important;
padding: 9px!important;
border-radius: 20px!important;
font-size: 15px;
font-weight: 700;
line-height: 20px;
cursor: inherit;
position: relative;
display: flex;
align-items: center;
margin: 20px;
overflow: hidden;
appearance: none;
left: -28px!important;
}

.InputInline{
margin-top: 40px;
width: 100vw!important;
background-color: white!important;
}

.is-author-user{
display: none;
}

.is-launcher__avatar img {
height: 60px !important;
width: 60px !important;
border-radius: 50% !important;  
}

.is-launcher__avatar .is-contain {
object-fit: fill!important;
}

.LivechatLauncher {
padding: 0px !important;
}

.is-open {
top: 30vh !important;
height:65vh !important; 
}

.input-button:hover{
text-decoration: underline; 
width: 80vw;
background-color: rgb(79, 206, 93)!important;
border-color: rgb(79, 206, 93)!important; 
padding: 9px 10px!important; 
border-radius: 20px;
font-size: 15px; 
font-weight: 700; 
line-height: 20px; 
cursor: inherit; 
position: relative; 
display: flex; 
-webkit-box-pack: center; 
justify-content: center; 
-webkit-box-align: center; 
align-items: center;margin: 20px;
overflow: hidden; 
appearance: none;
}

.Chat__spacer{
height: 0px!important;
}

Important! Be sure to set your bot to 'Always Start a New Conversation' in second visit settings

Bear in mind that interacting with the welcome message will count as one chat

How did we do?

Get started guide for CSS Design in Landbot

CSS Examples: Lead Gen

Contact