TemperStack
Find Tools
Beginner8 min readUpdated Mar 18, 2026

How to integrate WhatsApp contact buttons on Hostinger

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.

Prerequisites

  1. Active Hostinger hosting account
  2. Website or landing page set up
  3. WhatsApp Business phone number
  4. Basic HTML/CSS knowledge
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.
Tip
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.
Tip
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.
Tip
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>.
Tip
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;
}
Tip
#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.
Tip
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.
Tip
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.
Tip
Ask friends or colleagues to test the button to ensure it works across different devices and browsers

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; } }

Related Guides

More Hostinger Tutorials

How to set up VPS

How to connect via SSH

How to install Ubuntu OS

How to configure firewall

Other Tool Tutorials

D

DigitalOcean Tutorials

C

Contabo Tutorials

C

Cloudways Tutorials

Ready to get started with Hostinger?

Put this tutorial into practice. Visit Hostinger and follow the steps above.

Visit Hostinger →