WhatsApp Button Maker

Set the country of your whatsapp

Write your whatsapp phoneNumber (without country country code)

Write your message

Set color

Set position of button

Copy this code into the head tag of your html code



                        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" > 

        
                        <style> 

                        .whatsapplink{

                        position:fixed;width:60px;height:60px;

                        bottom:40px;{{position}}:40px;background-color:{{color}};color:#FFF;border-radius:50px;text-align:center;font-size:40px;box-shadow:2px 2px 3px #999;z-index:100}.whatsapplink .bi{position: absolute;{{position}}:10px;top:7px;}
                        .whatsapplink:hover{text-decoration:none;color:{{color}};background-color:#fff}.whatsapp-box{margin-top:16px}

                        </style>

Copy this code anywhere part of your code html



                        <div class="whatsapp-box">
                        <a href="https://api.whatsapp.com/send?phone={{countrySelected}}{{phoneNumber}}&text={{messageConverted}}" class="whatsapplink" target="_blank" >
                        
                        <i class="bi bi-whatsapp" ></i>
        
                        </a>
                        </div>