How to Add a Phone Call Button to Your Website in Hostinger Website Builder

ByBen
Go to Hostinger.com
Get Hostinger Free Courses

Adding a phone call button to your website in Hostinger Website Builder can enhance user experience and make it easier for visitors to contact you instantly. Whether you run a business website, portfolio, or online service, a click-to-call button can improve engagement and lead to more conversions.

In this guide, I’ll show you how to add a phone call button in Hostinger Website Builder using a simple method that works across all devices, including mobile phones.

Step 1: Log in to Your Hostinger Website Builder

  1. Sign in to your Hostinger account.
  2. Navigate to Websites and click on Websites List.
  3. Find your website and click Edit Website to open the Hostinger Website Builder editor.

💡 Quick Tip: If you have multiple websites, look for the Hostinger Website Builder icon to distinguish it from WordPress websites.

Step 2: Add a Phone Call Button

  1. Go to the Contact Us page or any section where you want the button.
  2. Click Add Element from the left-hand menu.
  3. Scroll down and drag & drop the “Embed Code” element onto your page.
  4. Click Enter Code, delete the default code, and paste the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Floating Call Button</title>
    <style>
        .call-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #25d366;
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 24px;
            text-decoration: none;
            z-index: 1000;
            transition: transform 0.3s ease-in-out;
        }
        .call-button:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <a href="tel:+1234567890" class="call-button" title="Call Us">
        📞
    </a>
</body>
</html>

📌 Replace +1234567890 with your actual phone number.

  1. Click Embed Code, place the button where you want it, and update your website.

Step 3: Customize the Button

To change the button’s color, update the background-color property:

  • Green: #4CAF50
  • Black: #000000
  • Blue: #007BFF

To adjust the button size, modify the font-size and padding values in the CSS.

Step 4: Test the Call Button

  • If you’re on a desktop, clicking the button may open FaceTime or another calling app.
  • On a mobile device, it will launch the phone dialer with the pre-filled number.

Conclusion

That’s it! You’ve successfully added a phone call button to your website in Hostinger Website Builder. This simple addition can significantly improve communication with your visitors and potential customers.

If you have any questions, leave a comment below! 🚀

Similar Posts