E-commerce 20.04.2026 button, chat, code, developer, whatsapp

Add WhatsApp Chat to PrestaShop

Stop editing TPL files. Discover the safest way to add a WhatsApp widget to any PrestaShop hook with our HTML Box Pro module.

Lightning-Fast Contact: Add a WhatsApp Button to PrestaShop with HTML Box Pro

In a mobile-first world, shoppers rarely want to wait on contact forms or email threads. They expect answers while the intent to buy is still hot. WhatsApp is the most widely used instant channel globally—and a single tap from your storefront can start that conversation.

This guide walks you through adding a floating WhatsApp button using HTML Box Pro: plain HTML and CSS, no theme overrides, and a predictable place to maintain the snippet when you refresh branding or copy.

Why WhatsApp Belongs in Your Store

Convenience

Customers message from the device they already use; you reply when it fits your workflow—without forcing them through rigid ticket queues.

Personal touch

Messenger-style chats feel closer than anonymous on-site widgets, which helps pre-sales questions and post-purchase reassurance.

Persistent thread

The conversation stays in WhatsApp even after the customer leaves your shop—handy for follow-ups, delivery updates, or spare parts questions.

What You Will Build

You will use HTML Box Pro to inject a fixed-position link that opens WhatsApp Web or the native app with your prefilled business number. The markup stays in the module; the theme stays untouched, so theme upgrades are less risky.

A wa.me deep link with your country code and phone number.
Lightweight HTML for the anchor and icon.
Scoped CSS so the pill floats above your layout without colliding with the cart or cookie banners.

Step 1: Prepare Your WhatsApp Link

WhatsApp expects an international number without leading zeros or symbols. For Poland, that typically means 48 followed by nine digits (example only—replace with your real line).

https://wa.me/48123456789

Swap 48123456789 for your verified business or support number. Test the URL on a phone before you publish it in production.

Step 2: Add the HTML in HTML Box Pro

Create or edit a block in HTML Box Pro and paste the following into the HTML content field (replace the href with your own wa.me URL).

Editor warning

Enable the extended editor (or raw HTML mode) in the module’s general settings before pasting. The default PrestaShop WYSIWYG editor may strip target, rel, or even the anchor wrapper, which would break the floating button.

<a href="https://wa.me/48123456789" class="whatsapp-float" target="_blank" rel="noreferrer noopener">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp" />
    <span>Ask about this product</span>
</a>

The example uses the public SVG icon from Wikimedia; you may host your own asset in your theme or CDN if you prefer stricter control over caching and HTTPS.

Step 3: Add the CSS in HTML Box Pro

In the CSS section of the same block, paste rules that pin the button to the viewport and keep tap targets large enough for mobile:

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 14px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none !important;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.05);
    background-color: #128c7e;
}

.whatsapp-float img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

@media (max-width: 768px) {
    .whatsapp-float span {
        display: none;
    }
    .whatsapp-float {
        padding: 10px;
        border-radius: 50%;
    }
    .whatsapp-float img {
        margin-right: 0;
    }
}

Adjust bottom, right, and z-index if they overlap your cookie bar, live chat widget, or mobile navigation.

Step 4: Pick a Hook That Loads Everywhere

Choose a hook rendered on most pages—displayFooter is a common default—so the shortcut is available on listings, product pages, and checkout alike. In HTML Box Pro, assign the block to that hook and set Active to ON.

Visibility and groups

If you limit the block to specific customer groups or disable it by mistake, the button disappears for real shoppers. Double-check Active and Visibility for (users' groups) before you announce the channel on social media.

Why HTML Box Pro Instead of Yet Another One-Task Module?

You own the code

Swap colors, swap icons, or rewrite the label in seconds—no waiting for a vendor release when WhatsApp tweaks branding guidelines.

Display rules

Combine HTML Box Pro’s scheduling and targeting options to show the bubble only on mobile, only during office hours, or only for selected languages—without shipping another PHP module to production.

Performance hygiene

A tiny HTML/CSS snippet keeps payload predictable, which is easier on Core Web Vitals than loading a full third-party widget stack you do not control.

Closing thoughts

Adding WhatsApp does not have to mean installing yet another monolithic plugin. HTML Box Pro keeps the implementation transparent: one block, clear hooks, and code you can diff in Git like any other storefront asset.

Test on staging, verify the wa.me link on a physical device, then roll out. Your customers get a familiar green bubble; you keep ownership of the markup end to end.