Add WhatsApp to your website in 5 minutes

Three approaches — pick the one that matches your team's complexity.

1. The simplest: a click-to-chat link

https://wa.me/<your-number-with-country-code>?text=<urlencoded-message>

Example: https://wa.me/15551234567?text=Hi%20I%20need%20help%20with%20my%20order

Click anywhere on your website (button, image, text) and the visitor's WhatsApp opens with your pre-filled message. Free, no setup.

Where to place a click-to-chat link

• In the header as a persistent "Chat on WhatsApp" button.
• On product pages, next to "Add to cart", for questions before purchase.
• In the footer with your other contact options.
• In a floating sticky button on mobile, where most WhatsApp traffic starts.

Getting the number format right

The number must include the country code and no plus sign, spaces, or dashes. So a US number becomes 15551234567, not +1 555 123 4567. Encoding the message correctly matters too: spaces become %20, and any special character needs URL encoding. Greenbubble's link builder does this for you and gives you a copy-ready URL.

2. The branded widget

A small chat bubble in the corner of your site that opens WhatsApp when tapped. Greenbubble's widget:

• Branded with your logo and colour
• Customisable welcome message
• Optional pre-chat form (name, email, query type)
• Routes the conversation to your team inbox

Embed with one line of JavaScript:

<script src="https://cdn.greenbubble.io/widget.js" data-workspace="YOUR_ID"></script>

What a pre-chat form buys you

Without a form, a WhatsApp click gives you a phone number and a message. With a form, you also capture name, email, and reason for contact before the chat starts, so the conversation arrives pre-qualified and your CRM record is more than a bare number. For sales teams, this is the difference between a queue of anonymous chats and a queue of leads.

Widget customisation options

3. The team-routed version

If your team has more than one person handling WhatsApp, the widget should not open a 1:1 WhatsApp chat — it should open a Greenbubble conversation that your team can route, assign, and respond to from the shared inbox.

This is what the Greenbubble widget does by default. The conversation is captured with full metadata (URL the visitor was on, referrer, time on site, custom data attributes) and assigned to an agent.

Why routing beats a 1:1 chat

A click-to-chat link opens a private chat between the visitor and whichever phone number is behind the link. That conversation is invisible to everyone else, cannot be assigned, and leaves no trace if the person who owns the phone is away. A routed widget starts a tracked conversation your whole team can see, split, and report on.

Choose the right approach

Setup walkthrough

1. In Greenbubble, open Settings → Widget → New Widget.
2. Pick a name, brand colour, and welcome message.
3. Choose default assignment (round-robin, specific agent, or load-balanced by skill).
4. Optionally add a pre-chat form.
5. Copy the embed code.
6. Paste into your website — for sitewide, or any page for targeted.

Testing before you launch

• Open the widget on desktop and mobile; check the bubble does not cover key buttons.
• Submit the pre-chat form and confirm the conversation appears in the inbox.
• Verify the assignment rule sends it to the right agent.
• Test outside business hours to confirm the offline message shows.
• Check page-load impact with the widget enabled.

WordPress

Greenbubble provides a WordPress plugin (separate from the WooCommerce sync plugin) that adds a settings page and shortcode. Paste [greenbubble_widget] into any page or post.

Other common platforms

• Shopify: paste the embed code into your theme's theme.liquid before .
• Webflow: add it as a custom code embed in site settings.
• Squarespace: use a code injection block in the footer.
• Custom sites: paste the script before in your layout template.

Measuring results

Once the widget is live, watch four numbers: widget opens, conversations started, first-response time, and conversion. Widget opens that never become conversations usually mean the welcome message is unclear or the form asks too much. High starts but slow first responses point to staffing, not design.

A simple weekly review

• Compare widget starts against last week and against web-form submissions.
• Check first-response time; anything over a few minutes on a business day is a red flag.
• Read a sample of five conversations and note what customers actually asked for.
• Adjust the welcome message or form fields based on what you learn.

Common reasons a widget underperforms

The bubble is hidden behind another element on mobile. The welcome message is vague ("Chat with us"). The pre-chat form asks for five fields before a conversation can start. No one is assigned to the widget queue during business hours. None of these require a redesign; each is a small configuration fix.

Privacy and consent

A pre-chat form collects personal data, so say what you collect and why. Link your privacy notice near the form, only ask for what you will actually use, and make sure opt-in to marketing is a separate, clear choice from starting a support chat. A widget that quietly bundles marketing consent into a support conversation is a compliance risk and a poor experience.

Which approach to start with

If you are unsure, start with the team-routed widget. It takes minutes to install, captures metadata, and routes to an inbox you control. If you later find you only ever need a simple link, you can fall back with no loss. Starting with a bare click-to-chat link and migrating later means reworking embeds and retraining customers on where to click.

Accessibility notes

Make sure the widget can be reached by keyboard, has a visible focus state, and does not trap focus in a way that blocks the rest of the page. Give the launcher button a clear accessible label such as "Open WhatsApp chat". Small details like these keep the widget from becoming an accessibility barrier on an otherwise compliant site.

FAQ

Can I add WhatsApp to my website?

Yes. The simplest form is a click-to-chat link (https://wa.me/) that opens WhatsApp with a pre-filled message. For a branded widget, Greenbubble provides an embeddable JavaScript widget that opens a chat interface and routes the conversation to your team inbox.

How do I create a WhatsApp click-to-chat link?

Use the format https://wa.me/?text=. For example, https://wa.me/15551234567?text=Hi%20I%20need%20help.

Is the WhatsApp widget free?

The basic WhatsApp click-to-chat link is free. Greenbubble's branded widget with conversation routing is included in the SaaS plan.

How do I embed WhatsApp on WordPress?

Greenbubble provides a WordPress plugin (separate from the WooCommerce sync plugin) that adds a settings page and shortcode. Paste [greenbubble_widget] into any page or post.

Can I customise the WhatsApp widget design?

Yes. Greenbubble's widget editor lets you change the colour, icon, position, welcome message, and pre-chat form fields to match your brand.

Will adding a WhatsApp widget slow down my site?

The widget loads asynchronously and is a small script, so it does not block page rendering. If you are especially performance-sensitive, load it after your main content or only on pages where you want it.

Can I show the widget only on certain pages?

Yes. Place the embed code on specific pages instead of sitewide, or use the widget's targeting rules to show it by URL, device, or time of day.

Does the widget work on mobile?

Yes, and mobile is where most WhatsApp traffic originates. The widget adapts to small screens, and on a phone it opens the WhatsApp app directly with the conversation already started.

Embed WhatsApp on your site

Start free trial → · See widget gallery → · Book a walkthrough →