Sticky CTA Button for WahtsApp

WhatsApp is Essential for Business in Hong Kong. We made a CTA (Call to action) button of WhatsApp that I can immediately inquire from a smartphone. Please try tit to increase HTML number of conversion.

Sticky CTA Button for WahtsApp

In business in Hong Kong, WhatsApp is used more frequently than email, so I made a CTA button on WhatsApp that I can inquire immediately from my smartphone.

table of contents

  • Why we made it
  • CSS
  • HTML code

Why we made it

It takes a long time to reply by email or form confirmation even if you get an inquiry from the usual form screen, so I tried to make a CTA button that I can inquire from my smartphone anytime. It is a bit persistent, but it was difficult to find it from the hamburger menu on the smartphone, so I tried to make it always displayed on the screen.

CSS coding

#whatsApp {
    width: 30px;
    height: 60px;
    position: fixed;
    z-index: 1;
    bottom: 120px;
    left: 0px;
}

Add CSS like this. Position and size are properly adjusted in a well-balanced manner so that the position is always fixed so that it will always be displayed.

HTML

Calling WhatsApp API. Change the phone number to the WhatsApp number you want to call. The image specifies the prepared banner.

<div id="whatsApp">
    <a href="https://api.whatsapp.com/send?phone=85288888888">
        <img src="your banner" width="32" height="80" >
    </a>
</div>

That's all.