H Hostinger

How to integrate WhatsApp contact buttons on Hostinger

beginner 8 min read Updated 2026-04-20
Quick Answer

You can integrate WhatsApp contact buttons on Hostinger by accessing your website files through File Manager or Website Builder, then adding WhatsApp click-to-chat links using HTML code or drag-and-drop widgets. The process involves creating WhatsApp URLs with your phone number and customizing the button appearance.

Full Hostinger Review

Prerequisites

  • Active Hostinger hosting account
  • Website or landing page set up
  • WhatsApp Business phone number
  • Basic HTML/CSS knowledge

Step-by-Step Instructions

1

Access your Hostinger control panel

Log into your Hostinger account and navigate to the hPanel. Select your domain from the dashboard and click on File Manager if you're using a custom website, or Website Builder if you're using Hostinger's builder tool.
Make sure you're working on the correct domain if you have multiple websites
2

Prepare your WhatsApp contact link

Create your WhatsApp click-to-chat URL using the format https://wa.me/YOURCOUNTRYCODEPHONENUMBER. For example: https://wa.me/1234567890. You can also add a pre-filled message by appending ?text=Hello%20I%27m%20interested%20in%20your%20services to the URL.
Use URL encoding for spaces (%20) and special characters in your pre-filled message
3

Add the WhatsApp button using Website Builder

If using Hostinger Website Builder, click Edit Website, then drag a Button or Social Media widget to your desired location. Set the button text to something like "Contact us on WhatsApp" and paste your WhatsApp URL in the Link field. Customize the button color and style to match your website theme.
Position the button in a prominent location like the header, sidebar, or footer for maximum visibility
4

Add WhatsApp button with custom HTML code

For custom websites, navigate to your website files in File Manager and locate your HTML file (usually index.html). Add this HTML code where you want the button: <a href="https://wa.me/YOURNUMBER" target="_blank" class="whatsapp-btn">💬 Chat on WhatsApp</a>.
Use target="_blank" to open WhatsApp in a new tab/window
5

Style your WhatsApp button with CSS

Add CSS styling to make your button attractive. In your CSS file or within <style> tags, add: 
.whatsapp-btn {
  background-color: #25D366;
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  display: inline-block;
}
#25D366 is WhatsApp's official green color for brand consistency
6

Create a floating WhatsApp button

For a floating button that stays visible while scrolling, add this CSS: 
.floating-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background: #25D366;
  border-radius: 50px;
  padding: 15px;
}
Apply this class to your WhatsApp link.
Test the floating button on mobile devices to ensure it doesn't interfere with navigation
7

Save and publish your changes

Click Save in the Website Builder or Save File in File Manager. If using Website Builder, click Publish to make changes live. For custom HTML files, changes are automatically live once saved.
Clear your browser cache if you don't see the changes immediately
8

Test your WhatsApp integration

Visit your website and click the WhatsApp button to ensure it opens WhatsApp correctly. Test on both desktop (opens WhatsApp Web) and mobile devices (opens WhatsApp app). Verify that any pre-filled messages appear correctly and your phone number is formatted properly.
Ask friends or colleagues to test the button to ensure it works across different devices and browsers

Common Issues & Troubleshooting

WhatsApp button doesn't open WhatsApp application

Check that your phone number format is correct in the URL. Remove any spaces, dashes, or special characters. Use international format without the + symbol: https://wa.me/1234567890

Button appears but styling looks broken

Ensure your CSS file is properly linked in your HTML head section using <link rel="stylesheet" href="style.css">. Check for CSS syntax errors and make sure class names match exactly.

Pre-filled message not working

Verify that your message text is properly URL encoded. Replace spaces with %20 and use the correct syntax: https://wa.me/YOURNUMBER?text=Your%20message%20here

Button not visible on mobile devices

Add responsive CSS using media queries. Ensure the button size and position work on smaller screens: @media (max-width: 768px) { .whatsapp-btn { font-size: 14px; padding: 8px 16px; } }

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Hostinger website before purchasing.
Visit Hostinger View Hostinger Pricing

Related to Hostinger

ReviewHostinger ReviewPricingHostinger PricingAlternativesHostinger Alternatives