How to Add a Floating WhatsApp Button to WordPress

A floating WhatsApp button gives visitors a direct way to contact your business from any public page on your WordPress website. The button stays visible while they browse, opens WhatsApp when selected, and can prepare the first message before the conversation begins.

To add a WhatsApp button to WordPress, install a focused click-to-chat plugin, connect your WhatsApp number, write the opening message, and choose how the button should look and when it should appear.

This guide uses HexCoda WhatsApp Button, a commercial WordPress plugin designed for website owners, WooCommerce stores, freelancers, and agencies that want a manageable contact button without installing a chatbot platform.

What Is a Floating WhatsApp Button?

A floating WhatsApp button is a fixed contact button that remains in one corner of the browser window while the visitor scrolls.

When someone selects the button, the website opens a WhatsApp conversation with the business number configured in WordPress. Mobile visitors usually continue in the WhatsApp application, while desktop visitors may use WhatsApp Web or the desktop application.

The button does not place a complete chat system inside your website. It gives visitors a familiar path from the current page to a real WhatsApp conversation.

This distinction matters. Many people searching for a WhatsApp chat plugin for WordPress only need a visible contact option. They do not need automated replies, agent routing, a shared inbox, or a separate messaging dashboard.

A focused click-to-chat button works well for:

• service and appointment questions
• WooCommerce product inquiries
• price and availability requests
• reservations and booking discussions
• property and vehicle listings
• delivery and compatibility questions
• general pre-purchase support

Why Add WhatsApp Contact to WordPress?

A contact form remains useful for detailed requests, but it asks the visitor to stop browsing, open another page, complete several fields, and wait for an email response.

A floating WhatsApp button shortens that path.

Visitors can start a conversation while they are still looking at the relevant service, product, or listing. They do not need to copy your phone number, search for your business inside WhatsApp, or explain how they reached the website.

The conversation can also continue after the visitor closes the website. This makes WhatsApp useful for questions that require a quick clarification rather than a formal support ticket.

For the website owner, the main advantages include:

• a contact option that remains easy to find
• fewer steps between interest and conversation
• prepared messages that reduce empty inquiries
• page or product context included in the discussion
• centralized controls inside WordPress
• consistent placement across the public website

The goal is not to place another large popup over the page. A well-configured WordPress WhatsApp button should remain visible without interrupting the visitor’s reading or shopping experience.

What Should a WordPress WhatsApp Plugin Include?

Many WordPress plugins can open a WhatsApp link. The difference appears in how much control they provide after installation.

A useful floating WhatsApp button plugin should let you manage the contact experience without editing theme files or rebuilding the same link across multiple pages.

A clear phone-number field

The plugin should accept the complete international WhatsApp number and explain the required format.

A USA number, for example, should include the country code and contain digits only:

Do not include the plus symbol, spaces, brackets, or hyphens.

Use the full international number, digits only. Remove spaces, brackets, hyphens, and the + symbol.

• USA: 141555XXXXX
• Germany: 4930123XXXXX
• France: 331234XXXXX
• United Kingdom: 4420794XXXXX

Important: remove the local leading zero after the country code.

Examples:

• Germany: 030 123XXXXX becomes 493012XXXXX
• France: 01 23 45 XX XX becomes 3312345XXXX
• United Kingdom: 020 7946 0XXX becomes 442079460XXX

These are placeholder numbers and should be replaced with the actual WhatsApp number associated with the business account.

A prefilled opening message

An empty WhatsApp conversation often begins with a vague message such as “Hello” or “I need help.”

A prefilled message gives the visitor a clearer starting point:

The visitor can review, edit, and send the prepared text after WhatsApp opens.

Page and product context

A useful plugin can include information about the page that generated the inquiry.

For a business website, this may be the current page address. For a WooCommerce store, it may be the product name.

This context reduces unnecessary follow-up questions because you can see what the visitor was viewing before the conversation started.

Visual controls

The button should match the website rather than look like an unrelated element placed over the layout.

Useful controls include:

• built-in and custom icons
• button color
• icon size
• lower-left or lower-right placement
• bottom and side spacing
• a live preview

A restrained contact prompt

A short tooltip can make the button easier to notice without opening a full chat window.

Messages such as “Need help?” or “Ask about this product” can briefly appear beside the button before disappearing.

Business-hour scheduling

Some businesses prefer to show the contact button only when someone is available to respond.

A schedule should support selected weekdays, start and end times, the WordPress site timezone, and overnight periods when necessary.

How to Add a Floating WhatsApp Button to WordPress

This setup uses the HexCoda WhatsApp Button. The plugin places the contact button across the public website and keeps its controls within a single focused administration screen.

Step 1: Install and activate the plugin

After downloading the plugin ZIP file:

1. Open Plugins → Add New Plugin in the WordPress dashboard.
2. Select Upload Plugin.
3. Choose the HexCoda WhatsApp Button ZIP file.
4. Select Install Now.
5. Activate the plugin after WordPress completes the installation.

A new WhatsApp Button area will appear in the WordPress administration menu.

Upload and activate the HexCoda WhatsApp Button plugin from the WordPress Plugins screen.

Step 2: Enter your WhatsApp number

Open the General settings and enable the WhatsApp button.

Enter the business number in international format using digits only. The number must be associated with an active regular WhatsApp or WhatsApp Business account.

A valid number is required before the frontend button can open a conversation.

Check the number carefully before publishing the website. A missing digit or incorrect country code will send visitors to the wrong destination or prevent WhatsApp from opening the chat.

Step 3: Prepare the opening message

Write a short base message that suits the website.

For a service business:

For a WooCommerce store:

Keep the message direct. The visitor should understand it immediately and feel comfortable changing it before sending.

The message should not pretend that an automated agent has already joined the conversation. A real person will answer after the visitor sends the message.

Enter the WhatsApp number, base message, and optional page or product context.

Step 4: Add useful page or product context

HexCoda WhatsApp Button can append the current page URL to the opening message.

This helps you identify the service page, article, listing, or other content that led to the inquiry.

WooCommerce stores can also append the product name on individual product pages. A customer viewing a chair, software license, replacement part, or digital product can begin the conversation with that item already named.

For example:

This small detail can save several messages at the start of the conversation.

Instead of asking “Which product are you referring to?”, you can answer the actual question sooner.

Step 5: Confirm the site-wide display

The plugin uses a site-wide display model.

The floating WhatsApp button can remain available across public pages, posts, archives, search results, WooCommerce screens, and custom post types without requiring a separate shortcode on every page.

This keeps the contact method consistent. Visitors do not need to return to the homepage or contact page after deciding that they want to speak with you.

The contact button uses site-wide settings across the public WordPress website.

Step 6: Customize the button appearance

Open the Appearance section to choose how the button looks.

HexCoda WhatsApp Button includes:

• a filled WhatsApp icon
• an outline icon
• a custom image option
• a button color control
• an adjustable icon size
• lower-left and lower-right positions
• bottom and side spacing

The live preview updates while you change the controls.

This makes it easier to check the balance between the icon and its circular background before saving the settings.

For many layouts, an icon size around 36 to 42 pixels provides a clear result inside the floating button. The exact value depends on the shape of the chosen icon and the transparent spacing inside a custom image.

When uploading your own icon, use a tightly cropped PNG, JPEG, WebP, or SVG image. Large transparent margins can make the visible symbol appear smaller than the configured size.

Choose an icon, color, size, position, and spacing while reviewing the live preview.

Step 7: Add a tooltip prompt

A floating button may be familiar to regular WhatsApp users, but a short text prompt can explain why it is there.

Useful tooltip examples include:

• Need help?
• Ask about this product
• Chat with our team
• Check availability
• Request more information

HexCoda WhatsApp Button lets you choose the tooltip text, the delay before it appears, and the duration it remains visible.

The tooltip appears once during the browser session when browser storage is available. This avoids repeating the same invitation each time the visitor opens another page.

Keep the text short. A tooltip should support the button rather than cover page content.

Use a short prompt and control when it appears and how long it remains visible.

Step 8: Configure business hours

A WhatsApp contact button can create an expectation of a quick response.

Business-hour scheduling helps you control that expectation by showing the button during selected days and time periods.

Choose the available weekdays, start time, and end time. The schedule follows the timezone configured under:

WordPress Dashboard → Settings → General

Overnight schedules are also supported. For example, a hospitality business can use an availability period from 18:00 to 02:00.

Scheduling may suit:

• local service businesses
• appointment-based companies
• restaurants and hospitality websites
• stores with defined support hours
• businesses managed by one person

Some businesses may prefer permanent visibility because customers can send a message at any time and wait for a later response. Choose the approach that matches how your business handles WhatsApp conversations.

Choose the available weekdays and contact hours using the WordPress site timezone.

Step 9: Save the settings and test the button

Save the settings, then open the public website in a new browser tab.

Test the button from:

• a regular WordPress page
• a blog post
• a WooCommerce product page when WooCommerce is active
• a mobile phone
• a desktop browser

Confirm that:

• the correct WhatsApp number opens
• the prefilled message appears correctly
• the page URL or product name is included when enabled
• the icon remains clear against the selected background color
• the button does not cover a cookie notice, sticky cart, or accessibility control
• the tooltip timing feels appropriate
• the business-hour schedule follows the correct timezone

If a recent change does not appear, clear the WordPress page cache, server cache, browser cache, and any active CDN cache.

How a WooCommerce WhatsApp Button Helps Product Inquiries

WooCommerce customers often need one answer before they can decide whether to buy.

They may want to know:

• whether the product is currently available
• which variation suits their needs
• whether two products are compatible
• how quickly the order can be delivered
• whether installation is included
• if additional images or specifications are available

A WooCommerce WhatsApp button provides customers with a direct path from the product page to the conversation.

Including the product name improves that path. The business can see which item generated the inquiry before replying.

HexCoda WhatsApp Button does not replace the WooCommerce cart or checkout. It does not transfer cart contents, create orders, send order notifications, or generate automated replies.

Its purpose is narrower: helping customers begin a product-related conversation with useful context.

That focused approach works well for stores where a short discussion can remove uncertainty before purchase.

Where Should You Place the Floating Button?

The lower-right corner is the most familiar position for chat and contact buttons.

It works well when that area remains free from other floating controls.

The lower-left corner may provide a cleaner result when the website already uses:

• a sticky add-to-cart button
• a cookie preferences control
• an accessibility widget
• a back-to-top button
• another support element

Use the bottom and side spacing controls to keep the button away from the browser edges and surrounding interface elements.

A starting value of 20 pixels works on many websites, but the final position should be tested with the actual theme and content.

Do not rely only on the administration preview. Open the finished page on a real mobile device and inspect the button near navigation bars, product controls, cookie notices, and browser interface areas.

Who Is HexCoda WhatsApp Button For?

Local service businesses

Electricians, installers, repair companies, salons, clinics, contractors, and other service providers can make appointment, estimate, and availability questions easier to start.

WooCommerce stores

Stores can receive product questions with the relevant item already identified in the opening message.

Agencies and freelancers

Developers and designers can install a manageable WhatsApp contact button on client websites without asking the client to edit theme code later.

Consultants and appointment-based businesses

Visitors can ask an initial question before booking a consultation, session, meeting, or service.

Restaurants and hospitality websites

Customers can discuss reservations, facilities, availability, schedules, or special requirements.

Property and automotive websites

Visitors can contact the business while viewing the relevant property, vehicle, listing, or service page.

Website owners managing WordPress themselves

The plugin presents the controls via a connected administration interface, with brief explanations and a live preview. You can change the number, message, design, tooltip, or schedule without modifying website code.

Does the Plugin Require the WhatsApp Business API?

No. HexCoda WhatsApp Button does not require the WhatsApp Business API.

The plugin uses the standard WhatsApp click-to-chat system. You can connect it to a regular WhatsApp number or a WhatsApp Business number.

You do not need:

• API credentials
• webhook configuration
• approved message templates
• a third-party messaging platform
• a separate support dashboard

The WhatsApp Business API becomes relevant when a company needs automated messages, system integrations, approved outbound templates, large support teams, or advanced conversation workflows.

A floating WordPress contact button has a simpler purpose. It helps the visitor begin a conversation with your business.

Is a WhatsApp Button the Same as a Chatbot?

No. A WhatsApp contact button and a WhatsApp chatbot provide different functions.

HexCoda WhatsApp Button opens a visitor-initiated conversation. It can prepare the opening message and include page or product context, but it does not reply on behalf of the business.

A chatbot may answer questions automatically, follow decision flows, collect data, route conversations, or connect with business systems. That type of setup usually requires additional services and a different technical structure.

Choose a floating WhatsApp button to make real human contact easier.

Choose a chatbot platform when your business needs automated conversations and has the resources to configure, review, and maintain those workflows.

Common WordPress WhatsApp Button Problems

The button does not appear

Confirm that the plugin is active, the frontend button is enabled, and a valid WhatsApp number has been saved.

Also check the business-hour schedule. The button will not appear outside the selected period when scheduling is enabled.

Clear active caches after changing the settings.

WhatsApp opens the wrong conversation

Review the phone number and country code.

Use digits only and do not include the plus symbol, spaces, brackets, or hyphens.

The custom icon looks too small

Increase the configured icon size and check the uploaded image for transparent margins.

A tightly cropped icon uses the available button area more effectively.

The button overlaps another floating element

Move it to the opposite corner or increase the bottom and side spacing.

Check the result on both desktop and mobile layouts.

The new design does not appear on the frontend

Clear the WordPress cache, hosting cache, browser cache, and CDN cache.

Then test the page in a private browser window.

The schedule uses the wrong time

Review the timezone configured under Settings → General in WordPress.

The plugin uses the WordPress site timezone rather than the visitor’s local timezone.

Add WhatsApp Contact to Your WordPress Website

A floating WhatsApp button can make business contact easier without placing a large chat interface over the website.

The most useful setup combines a valid business number, a clear opening message, appropriate page or product context, balanced button placement, and availability settings that match how you handle customer conversations.

HexCoda WhatsApp Button brings these controls into one focused WordPress interface. It supports regular WordPress websites and WooCommerce product inquiries without requiring the WhatsApp Business API, chatbot configuration, or separate shortcodes for each page.

Review the complete HexCoda WhatsApp Button documentation for installation details, phone-number formatting, message options, appearance settings, tooltip controls, business hours, licensing, and troubleshooting.