Complete Guide to Adding a WhatsApp Button to your Website

Connecting effectively with your customers is essential to the success of any online store. In this article, we will explore how to efficiently integrate a WhatsApp chat button on your website, a key tool to improve communication with your audience.

The Importance of a WhatsApp Button

Integrating a WhatsApp button is not just about facilitating a communication channel; it is an opportunity to create a closer and more direct link with those who visit your site. And the best thing is that it is an accessible implementation for all platforms, including Jumpseller.

Universal Integration

This guide is applicable to any platform, not just Jumpseller. So, no matter where your website is hosted, you’ll find valuable information here.

The Code

On the platform you are on you should have access to the HTML editor, and decide where you will paste the HTML object. For example, in Jumpseller the Design template is applied on all pages of the template, I suggest using this one. Below is a well explained code for a standard WhatsApp button.

<a href="&amp;text=Hi I need more information" class="store-whatsapp" title="Send us a WhatsApp message" target="_blank">
  <i class="fa-brands fa-whatsapp"></i>
</a>

At Jumpseller to make programming easier we use tags like which contains a WhatsApp URL along with the phone number you registered with your shop. You can replace it with this https://api.whatsapp.com/send?phone=YOURFULLPHONENUMBER.

Finally comes the CSS part, which will allow us to make it look good, with correct colours and positions. For this you must locate a CSS file that loads in your store, and edit it. Typically that file in Jumpseller is called theme.css, style.css, styles.css or app.css. Add these styles to the end.

.store-whatsapp {
position: fixed; /* Keeps the button in a fixed position on the screen */
z-index: 9998; /* Ensures the button is above other elements */
right: 20px; /* Positions the button 20px from the right-hand side of the screen */
bottom: 10px; /* Positions the button 10px from the bottom of the screen */
display: flex; /* Uses Flexbox for the internal button layout */
align-items: centre; /* Centres the content (icon) vertically */
justify-content: center; /* Centers the content (icon) horizontally */
padding: 35px; /* Internal spacing around the icon */
border-radius: 50%; /* Makes the button circular */
background: #25D366 !important; /* Background colour of the button */
box-shadow: 0 0 20px transparent; /* Soft shadow around the button */
color: #25D366 !important; /* Icon colour */
font-size: 40px; /* Size of the icon inside the button */
line-height: 47px; /* Line height for text/icon */
text-align: center; /* Alignment of the text/icon */
text-decoration: none; /* Removes any text decoration from the link */
}

.store-whatsapp:hover {
background: #128C7E !important; /* Background color on mouseover */
box-shadow: 0 0 20px rgb(75 57 75 / 50%); /* Shadow more prominent on mouseover */
color: #128C7E !important; /* Mouse-over icon color */
}

Jumpseller Implementation

In Jumpseller, the integration of elements such as the WhatsApp button is even easier. Each design theme comes ready to incorporate these features in an intuitive way.

Just go to your Admin Panel: Themes > Visual Editor > Edit Settings > Store WhatsApp, where you can choose the colours, enable animations and define the position of the button. If you haven’t done so, in your Admin Panel: Settings > General > Social Media, add your phone number, this would be a requirement to activate the button naturally.

Adding a WhatsApp chat button to your website is a strategic step to improve interaction with your clientele. This guide gives you the tools you need to implement it easily and effectively, regardless of the platform you use. If you’re on Jumpseller, you’ll enjoy an even smoother integration thanks to platform-specific features.

We are here to help, if you have any questions contact us at any time.