In this article, you will learn how to create a WhatsApp button and display it in your KB, where clicking it will redirect the customer to your WhatsApp.
Step-by-Step Video Guide
Follow the step-by-step guide below:
(link commented in the video https://www.convertte.com.br/gerador-link-whatsapp/ ):
Written Step-by-Step Guide
Follow the step-by-step guide below:
1. Add this code in the field "Between the <head></head> tags of the document" under Settings > Knowledge Base > Appearance:
<!-- CSS Whatsapp -->
<style>
.botao-whatsapp{
width: 60px;
height: 60px;
position: fixed;
right: 25px;
bottom: 40px;
background-color: #25d366;
color: #fff;
border-radius: 50px;
text-align: center;
font-size: 40px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
.icone-whatsapp{
margin-top: 11px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- End - CSS Whatsapp -->
2. Add this code in the field "After opening the <body> tag" under Settings > Knowledge Base > Appearance:
<!! Start - WhatsApp button>
<a href="PLACE_YOUR_LINK_HERE"
class="botao-whatsapp" target="_blank"><i class="fa fa-whatsapp icone-whatsapp"></i></a>
<!! End - WhatsApp button>
3. Generate your link on this site ( https://www.convertte.com.br/gerador-link-whatsapp/ )
Add this link to the code you added in "After opening the <body> tag"
4. Save the changes and access your knowledge base again. You will see that the WhatsApp icon is now displayed as shown below: