WhatsApp Button

How to use WhatsApp Button Widget of Sky Addons for Elementor

The Sky Addons WhatsApp Button turns any page into a direct line to your inbox. Place it inline inside your content or float it in a corner of every page, list one agent or a whole team, and let visitors start a real WhatsApp conversation that already knows which page they came from. It reports honest availability from a weekly schedule — including separate hours per agent — and can report every click to Google Analytics, Google Tag Manager and the Meta pixel so you can finally measure what WhatsApp is worth to your business. This documentation walks you through every setting.

Features:

1. Two button types — Standard (inline, sits in your layout) and Floating (fixed to a screen corner)
2. Unlimited agents with name, role, avatar, own number and own pre-filled message; visitors pick who to message
3. Business hours with a real weekly schedule, plus optional per-agent hours, using your site timezone
4. Honest offline state that tells visitors exactly when you are back, without ever taking WhatsApp away
5. Dynamic pre-filled messages carrying the page title, post title, site name or URL into the chat
6. Click tracking for GA4, Google Tag Manager and the Meta pixel with a custom event name
7. Availability toggle per agent — hide someone without deleting their details
8. Full design control over the button, chat card, tooltip and status dots, with right-to-left support built in

Insert the WhatsApp Button

1. Edit your page or template with Elementor
2. Search for “WhatsApp Button” in the Elementor widget panel
3. Drag the widget onto your page
4. Open Content → Agents and enter a WhatsApp number — nothing renders until at least one agent has one

Important for the Floating type: the widget only appears on pages that actually contain it. To show it across your whole site, place it once inside a header or footer template built with Elementor Theme Builder. Only the first floating button on a page renders; if a second one is found, the editor warns you and it is skipped.

Choose the Button Type

Under Content → WhatsApp Settings:

• Standard (inline) — the button sits in your layout, exactly where you dropped it. Use it inside a hero, a pricing table or a product description. Choose Icon Only or Icon + Text and set your own Button Text.
• Floating — the button is pinned to a screen corner and follows the visitor as they scroll. Clicking it opens the chat card. This type unlocks the Chat Popup, Position and Tooltip sections.

Icon lets you replace the default WhatsApp glyph with any icon from your library, and Open In decides whether the chat opens in a new tab or the same one.

Add Your Agents

The Agents repeater holds everyone who can be messaged. Each row has:

• Available — switch an agent off to hide them from the chat without losing their number, avatar or hours. Perfect for someone on leave. Hidden rows are marked “(off)” in the panel.
• Name and Role — shown to the visitor, for example “Rahim” and “Sales”.
• Avatar — a photo makes the chat feel human and noticeably lifts replies.
• WhatsApp Number — country code first, digits only. Spaces, plus signs and dashes are ignored, so +880 170-000-0000 and 8801700000000 both work.
• Pre-filled Message — the text already typed into WhatsApp when the chat opens.

The number of agents decides the layout — there is no extra setting to choose. One agent shows a single “Start Chat” button and the chat header carries that person’s name and role. Two or more turn the card into a pick list, so the visitor chooses who to talk to.

An agent with no phone number cannot be linked to, so it is skipped and the editor tells you how many were left out. If nothing appears at all, that notice is the first place to look.

Personalise the Pre-filled Message

A message that already names the page removes the most common opening question — “which product are you asking about?” Use these placeholders anywhere in the Pre-filled Message field and they are replaced with the real values of the page the visitor is on:

• {page_title} — the title of the current page
• {post_title} — the title of the current post or product
• {site_title} — your site name
• {page_url} — the full address of the current page

For example, Hi! I’m interested in {page_title} — {page_url} arrives in your inbox with the product name and a clickable link already filled in.

Set Business Hours

Switch on Content → Business Hours → Business Hours and the button starts telling the truth about whether anyone is there. Times follow your site timezone from Settings → General, so there is no timezone field to get wrong.

1. The Weekly Schedule arrives with all seven days ready — Monday to Saturday 09:00–18:00, Sunday closed. Adjust each row or switch Open off for days you are closed.
2. A closing time earlier than the opening time is treated as running past midnight, so 22:00–02:00 works for a late shift.
3. Online Status Text is shown while you are open, for example “Typically replies instantly”.
4. Offline Status Text is shown while you are closed. Include {next_open} and it becomes the next opening day and time, for example “Offline — back Monday 09:00”.

Remember that switching Business Hours on applies the default schedule immediately. If you turn it on outside 09:00–18:00 you will correctly see the offline state straight away.

What Happens Outside Business Hours

WhatsApp is never taken away when you are closed. A message left overnight simply waits in your inbox, which converts far better than asking a visitor to switch to email. Instead, the card sets expectations:

• The status dot turns grey and the status line shows your Offline Status Text.
• The chat button is relabelled using Offline Chat Button Text, which also accepts {next_open} — for example “Leave a message — we reply Monday 09:00”.
• If you fill in Offline Link (an email address or a contact page) it appears as a quiet secondary line beneath the chat button, with your own Offline Button Text. It never replaces WhatsApp.

Give an Agent Their Own Hours

Teams rarely work the same shift. Inside any agent row, switch on Own Hours and set:

1. Days — pick any combination, for example Saturday and Sunday only
2. From and To — the hours that agent is reachable on those days

An agent with Own Hours ignores the weekly schedule completely. Agents without it follow the weekly schedule as normal, so you can mix both freely. In the chat list, each person carries their own green or grey dot and their own “back at” line, so a visitor can see at a glance that Sales is available while Support is not. The card as a whole counts as open while any agent is available, and when everyone is away it quotes whoever returns soonest.

Configure the Chat Popup

Available for the Floating type under Content → Chat Popup:

• Popup Title — the heading of the chat card. With a single agent their name is used instead, since the visitor is talking to a specific person.
• Greeting Message — the chat bubble shown when the card opens. Line breaks are preserved.
• Typing Indicator — three animated dots that appear briefly before the greeting, mimicking a real conversation. It replays every time the card is opened.
• Chat Button Text — the label on the green call-to-action, for example “Start Chat”.
• Tooltip — a short prompt shown when someone hovers the floating button, such as “Need help? Chat with us”. It is placed automatically on the side away from the screen edge, so it can never be pushed out of view.

Position the Floating Button

Under Content → Position, choose Bottom Right or Bottom Left, then fine-tune Side Offset and Bottom Offset — both responsive, so you can move the button clear of a sticky mobile cart or cookie bar. Z-Index controls stacking if another fixed element overlaps it.

The corner mirrors automatically on right-to-left sites, so an Arabic or Hebrew site needs no extra work.

To hide the button on some devices, use Elementor’s own Advanced → Responsive → Hide On controls rather than a separate setting.

Designing Comfortably in the Editor

A floating button is pinned to the corner even while you edit, so what you see is what visitors get. Two settings keep it out of your way:

• Keep Chat Open While Editing (Chat Popup, on by default) — holds the chat card open so you can style it. Without it the card is closed and its Style settings have nothing visible to affect.
• Hide While Editing (Position) — removes the button from the editor corner entirely while you work on the rest of the page. It still appears on your live site.

Because the button itself floats, a small label is shown in the layout where the widget sits so you can always select it. Neither the label nor either setting appears on your live site.

Track Clicks in Analytics

Switch on Content → Click Tracking → Track Clicks and every tap of a WhatsApp link reports itself to whichever tools your site already loads:

• Google Tag Manager — pushed to dataLayer with your event name
• Google Analytics 4 — sent through gtag with the method “whatsapp”
• Meta pixel — sent as a custom event through fbq

Set your own Event Name (the default is sky_whatsapp_click) to match your existing naming convention. Nothing is loaded or installed for you — if a tool is not already on the page, that call is simply skipped. In GA4 you can then mark the event as a key event and finally see WhatsApp conversions beside your other channels.

Style Your WhatsApp Button

The Style tab is split into three sections:

1. Button — size, icon size, padding, border radius, spacing between icon and text, typography, plus separate Normal and Hover tabs for colour, background, border and shadow. Pulse Ring Color tints the attention ripple.
2. Chat Popup — card width, background, radius and shadow; header background, text colour and title typography; separate Online and Offline dot colours; close icon and its background in both normal and hover states; a full background group for the chat body so you can use your own wallpaper image or gradient; message bubble colours and typography; and the chat button’s own colours and typography.
3. Tooltip — background, text colour, typography, padding and border radius.

For entrance animations use Elementor’s own Advanced → Motion Effects; the widget does not duplicate them. The looping Pulse Ring under Content → Animation is separate and draws attention to the floating button.

Save and Preview

1. Click Update in Elementor
2. Preview the live page and click the button — WhatsApp should open with your pre-filled message already typed
3. Check it on a phone as well as desktop, since that is where most WhatsApp traffic comes from

Best Practices

• Place the floating button in a header or footer template so it appears everywhere, rather than adding it to each page separately
• Always include the country code in the number — a local-format number silently fails to open a chat
• Use {page_title} in the pre-filled message on product and service pages; it saves a round trip on almost every enquiry
• Set real business hours. An always-green dot at 3am costs you trust; an honest “back Monday 09:00” does not
• Add avatars. A real face materially increases the number of people who start a chat
• Keep the agent list short. Three or four clear choices convert better than ten
• Turn on click tracking from day one, so you have data to compare against later changes
• Raise the Bottom Offset on mobile if you use a sticky cart or cookie banner

Troubleshooting

• Nothing appears on the page — at least one agent needs a WhatsApp number. The Elementor editor shows a notice explaining exactly what is missing.
• Fewer agents show than I added — agents with an empty number cannot be linked to and are skipped; the editor names how many. Also check the Available toggle on each row, since switched-off agents are marked “(off)”.
• It says Offline but I did not set business hours — the Business Hours toggle is on. It ships with a Monday–Saturday 09:00–18:00 schedule, so outside those times you will see the offline state. Switch the toggle off or edit the schedule.
• The wrong times are shown — the widget uses your site timezone. Check Settings → General → Timezone in WordPress.
• Two floating buttons appear — the widget has been added both to a template and to the page. Only the first renders and the editor warns you; remove the duplicate.
• The floating button is not in the corner — a parent Section or Container with a transform, filter or certain motion effects becomes the anchor instead of the screen. Move the widget outside that element.
• The chat opens but the message is empty — check the agent’s Pre-filled Message field. Placeholders must be typed exactly, including the braces.
• Clicks are not appearing in analytics — the widget only reports to tools already present on the page. Confirm GTM, GA4 or the Meta pixel is installed and loading before testing.
• I cannot style the chat card — turn on Keep Chat Open While Editing in the Chat Popup section.

Frequently Asked Questions

Does this need the WhatsApp Business API or an account key?
No. It uses the standard wa.me link, so any personal or business WhatsApp number works with no signup, no key and no monthly fee.

Do messages arrive in my normal WhatsApp app?
Yes. Conversations open in the visitor’s WhatsApp and land in your ordinary chat list on phone, desktop or WhatsApp Web.

Can I show the button on every page?
Yes — add it once to a header or footer template in Elementor Theme Builder.

Can different team members have different working hours?
Yes. Switch on Own Hours in an agent’s row and choose their days and times. Agents without it follow the shared weekly schedule.

Can visitors still message me when I am closed?
Yes, and that is deliberate. WhatsApp stays available with a relabelled button explaining when you will reply, so overnight enquiries are never lost.

Does it work with a caching plugin?
Yes. The open or closed state is checked again in the visitor’s browser, so a cached page cannot show yesterday’s availability.

Does it work if JavaScript is disabled?
The button is a real WhatsApp link, so it still opens a chat. Only the chat card, which needs scripting, will not appear.

Is it compatible with right-to-left languages?
Yes. Corner placement and every offset mirror automatically on RTL sites.

Is the WhatsApp Button free?
Yes, it is included in the free version of Sky Addons for Elementor.

Related Documentation

• Dual Button
• Social Icons
• Team Member
• Info Box

Conclusion

The WhatsApp Button by Sky Addons for Elementor does more than drop a green circle on your site. It brings the page a visitor was reading into the conversation, tells them honestly whether anyone is there to answer, routes them to the right person on your team, and reports every click so you can prove what it is worth. Set it up once in a footer template and it works on every page. For further assistance, consult the Sky Addons support team or community forums. Enjoy talking to your customers!