Integration · Website builder
WordPress and WhatsApp: add the Broadchat chat widget to your site
How to install the Broadchat chat widget on WordPress (header and footer plugin, theme or block), what it does with visitors and leads, and what it is not.
By Broadchat teamPublished 6 min read
You will need
- A WordPress site where you can add code to the header or footer: an administrator account, and either a header and footer code plugin or access to a child theme.
- The Chat Widget module on your Broadchat plan (ask your provider if Chat Widget is missing from the menu).
- A WhatsApp number to route visitors to, ideally your connected WhatsApp Business API channel so replies land in the shared inbox.
- A privacy notice on your site that mentions chat and WhatsApp, if you collect names and numbers in the pre-chat form.
What the widget does on a WordPress site
The WhatsApp chat widget for WordPress from Broadchat is a chat button for your website. A visitor taps it, sees your welcome screen, answers a few optional questions, and is sent to WhatsApp with a pre-filled message to your number. You write that message yourself, with placeholders such as {{name}} that are filled from the visitor's answers, so your team sees who is writing and why from the first line. The same widget works on any website; this page shows the WordPress way to install it.
It is for businesses whose customers would rather chat than fill a contact form: clinics, coaching centres, real estate, home services, D2C brands. If you only want a plain "chat on WhatsApp" link with no form, a simple wa.me link in a button is enough, and this widget is more than you need.
Installing the script on WordPress
The widget code looks like this, with your own panel domain and widget id:
<script type="text/javascript" src="https://<your panel domain>/api/widgets/<widget-id>/embed.js"></script>| Method | Where | Best for |
|---|---|---|
| Header and footer plugin (for example WPCode) | Site-wide footer box | Most sites; survives theme updates |
| Child theme | footer.php, before the closing body tag | Developers managing their own theme |
| Custom HTML block | One page or post | Showing the widget on a single landing page |
Avoid editing the parent theme's files directly: theme updates overwrite them and the widget disappears. On sites built with a page builder, use its own custom code area for the footer, or a header and footer plugin.
Example: a clinic's appointment enquiries
Sunrise Clinic adds the widget to its WordPress site with three pre-chat questions: name, phone and "Which doctor would you like to see?". The pre-filled message is set to "Hi, I am {{name}}, I would like to see {{doctor}}", so Ritu arrives on the clinic's WhatsApp Business API number with "Hi, I am Ritu, I would like to see Dr Anjali Mehta" ready to send. The front desk replies from the inbox. Each lead is also posted by the widget webhook to a workflow that adds it to the clinic's Google Sheet, so the doctor's assistant can see the day's enquiries.
Troubleshooting
- The button does not appear: clear your caching plugin and CDN cache, and exclude the widget script from JavaScript minify or combine settings.
- It appears on staging but not on the live site: add the live domain (with and without www) under Domains.
- It appears twice: the script was added by two methods (for example the plugin and the theme). Keep one.
- Leads are missing in your CRM: widget webhooks are not retried. Point them at a fast endpoint such as a Broadchat workflow's Custom Webhook, then forward from there.
To follow up leads after they leave the chat, see the lead follow-up templates. For selling from a WordPress store, see the WooCommerce integration, and for sending leads onward, webhooks.
Set it up
Create the widget
Open Chat Widget → Widget and create a new widget. Set the chat button's look and position, the welcome screen text, and optional pre-chat questions such as name, phone and "What do you need help with?".
Choose where visitors go
In the submission settings, choose Forward User to: WABA Channel (your WhatsApp Business API number), WhatsApp Messenger (a WhatsApp number of your choice) or End of Session with Pre-Chat Completion (collect the lead without opening WhatsApp).
Restrict the domains
Add your site's domains, for example rangolihome.in and www.rangolihome.in, under Domains, so the widget only loads on your own site.
Copy the widget code
Save the widget and copy its script from Widget Code in the widget list (or the Script on the save step). It is a single script tag that loads embed.js for your widget id.
Add the script to WordPress
With a header and footer plugin such as WPCode, paste the script into the site-wide footer and save. Without a plugin, add it before the closing body tag in your child theme's footer. To show it on one page only, use a Custom HTML block on that page.
Test and connect the leads
Open your site in a private window, start a chat and complete the pre-chat form. Check the lead under the widget's Leads page, and add a webhook on the widget's Webhook page if leads should reach your CRM or a Broadchat workflow.
What you can do
Turn site visitors into WhatsApp chats
Visitors tap the button, answer a few questions and continue on WhatsApp with a pre-filled message, so your team sees who they are and what they want from the first message.
Collect leads even if they do not open WhatsApp
Pre-chat answers are saved as leads on the widget's Leads page and can be exported as CSV.
Send leads to other systems
Widget webhooks post session start and session end events, including the lead's answers and the page URL and title, to any URL, such as a workflow's Custom Webhook.
Open the widget from your own buttons
Any link with the widget's data attribute (bcw-widget-id) opens the widget, and the JavaScript API window.ChatWidget[id].open() and .close() lets theme buttons control it.
Live chat in the inbox
Connected as a Web Chat channel with the widget's API keys, the widget becomes a live chat answered from the same inbox as WhatsApp.
Limitations to know
- There is no WordPress plugin in the plugin directory: you add the widget with its script tag, through a header and footer plugin, your theme or a Custom HTML block.
- The widget does not sync with WooCommerce or WordPress users; it only knows what the visitor types and the page they are on. Use the separate WooCommerce connection for products and orders.
- Widget webhooks are sent once, without retries or a signature header, and time out after 5 seconds.
- Page-caching and script-optimisation plugins can delay or combine the script; exclude embed.js from JavaScript optimisation if the button does not appear.
- Starting a WhatsApp chat from the widget opens WhatsApp on the visitor's device; visitors without WhatsApp can only leave a lead.
Sources
- Child themes — WordPress Developer Resources, checked 12 October 2026
- Click to chat — WhatsApp Help Center, checked 12 October 2026
Broadchat team · Product and partner success team
The people who build and support Broadchat, the white-label WhatsApp Business API platform. We write from what we see while onboarding partners and their clients on the official WhatsApp Cloud API, and we check every article against Meta's current documentation.
Last updated:
Frequently asked questions
Is there a Broadchat plugin for WordPress?
No. The widget is installed with one script tag, which you can add through any header and footer code plugin, a child theme or a Custom HTML block. That also means it works on any other website builder.
Will the widget slow down my WordPress site?
The widget is a single external script loaded on your pages. As with any third-party script, test your page speed after adding it, and exclude it from script-combining plugins if they cause problems.
Can I see who chatted from my website?
Yes. Pre-chat answers are saved as leads on the widget's Leads page, with the page they came from, and can be exported as CSV or sent to your own system with a widget webhook.
Does the widget need the WhatsApp Business API?
No. It can forward visitors to any WhatsApp number. Forwarding to your WhatsApp Business API channel in Broadchat lets your team answer from the shared inbox with chatbots and assignment.