Free Tool

WhatsApp Business Hours Widget

Generate an embeddable WhatsApp chat button that shows online/offline status based on your business hours. No signup required.

to
to
to
to
to
Closed
Closed
SmallLarge
OnlineOffline
yourwebsite.com
Chat with us!

What is a WhatsApp Business Hours Widget?

A WhatsApp Business Hours Widget is a floating chat button you embed on your website that automatically detects whether your business is currently open or closed. During business hours, it shows a green online indicator and an inviting message like "Chat with us!". Outside of your set hours, it switches to an offline state with a different message like "We'll reply tomorrow". The button always links to your WhatsApp number, so visitors can message you anytime β€” but the status indicator sets the right expectation for response time.

How to Set Up Your WhatsApp Business Hours Widget

1

Enter your WhatsApp number

Select your country code and type your phone number. This is the number visitors will message when they click the widget.

2

Set your business hours

Enable or disable each day of the week and set your opening and closing times. The widget checks these hours against the visitor's local time.

3

Customize the appearance

Choose the widget position, button color, online/offline messages, and size to match your website's branding.

4

Copy the embed code

Switch to the Embed Code tab, copy the generated HTML snippet, and paste it into your website's HTML β€” just before the closing </body> tag.

How Timezone Detection Works

The generated embed code uses vanilla JavaScript to check business hours based on the visitor's local browser time. Here's how it works:

// 1. Get the visitor's current day and time
var now = new Date();
// 2. Map to the day name (Monday, Tuesday, etc.)
// 3. Look up the schedule for that day
// 4. Compare current time to start/end hours
// 5. Show online or offline status accordingly
// 6. Re-check every 60 seconds

This means if your business is in New York (EST) and a visitor is browsing from London (GMT), the widget will show status based on the visitor's local time. Set your hours according to your own timezone β€” the JavaScript Date object automatically uses the visitor's system clock.

Why Use a Business Hours Widget?

Set Response Expectations

Visitors know whether to expect an instant reply or to wait until business hours, reducing frustration and improving satisfaction.

Increase Conversations

A visible chat button with a friendly online status encourages more visitors to start a conversation compared to a static contact page.

No External Dependencies

The generated code is fully self-contained HTML, CSS, and JavaScript. No third-party scripts, no loading delays, no privacy concerns.

Works on Any Website

Paste the embed code into WordPress, Shopify, Squarespace, Wix, custom HTML, or any website builder. It just works.

Professional Appearance

A business hours-aware widget signals professionalism. Customers see you have set hours and will respond promptly during them.

Zero Cost

This tool is completely free. Generate your widget, embed it, and start collecting WhatsApp conversations without paying for chat software.

Frequently Asked Questions

Does the widget work on mobile devices?

Yes. The widget is fully responsive and works on all screen sizes. On mobile, tapping the button opens WhatsApp directly.

Can visitors still message me when I'm offline?

Absolutely. The offline status only changes the displayed message and indicator color. Visitors can still click the button and send you a WhatsApp message anytime.

Does this require a WhatsApp Business account?

No. The widget works with any WhatsApp account β€” personal or business. It uses the standard wa.me deep link format.

Will the widget slow down my website?

No. The generated code is a lightweight, self-contained snippet with no external script dependencies. It adds virtually zero load time to your page.

How do I update my business hours after embedding?

Simply come back to this tool, adjust your hours, generate a new embed code, and replace the old snippet on your website.