WhatsApp Message adds a small chat widget to the corner of the page. Visitors open it, type a message and press send. WhatsApp then opens with your number and their message ready to go.
The working widget sits in the bottom right corner of this page. Click it, type a message and press the button. Below it are three style examples showing the same widget set up for different businesses.
Show open state off, so it starts as a round green button. Position: Right. Click it to open the chat box, type a message and press Start chat.
This demo has no phone number set, so WhatsApp opens and asks you which chat to send the message to. Nothing is sent to us.
The widget works once per page, so only the corner widget is live. The three pictures below show the same widget with different content and colour settings.
Header #075E54, button #128C7E, white panel and a grey message box.
Navy header and container, a slate message box, a green icon and a bright green button.
Purple header and button to match the brand, with a lilac message box.
No account or API key needed.
Drop WhatsApp Message onto your page, header or footer template.
Type your phone number with the country code first and no + symbol.
Add your name or label, a short message, the placeholder and the button text.
A simple way to start a conversation.
Visitors type their message in the widget before WhatsApp opens.
Pressing send opens WhatsApp with your number and the visitor's message filled in.
Place the widget in the bottom left or bottom right corner.
Set the name or label, the note above the message box, the placeholder and the button text.
Use the WhatsApp icon or any other icon you like.
Set colours and typography for the header, icon, button, message text and message box.
Anywhere customers would rather message than fill in a form.
Let customers ask about opening times, stock or bookings.
Let people send a quick enquiry about a job.
Answer product questions before someone buys.
Take table enquiries and questions about the menu.
Give clients a quick way to message you about their project.
Let guests ask about dates and availability.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Phone Number | Your WhatsApp number with the country code first and no + symbol. | — |
| Icon | Icon shown in the widget header. | |
| Name or Label | Name shown in the header. | Your name here |
| Placeholder Text | Placeholder in the message box. | Type your message... |
| Message | Short note above the message box. | Usually replies within a few hours |
| Show open state | Start with the widget open. Mainly for styling in the editor. | On |
| Button Text | Text on the send button. | Send Message |
| Position | Left or Right. | Left |
| Design | ||
| Header | Header background when open, and header typography. | — |
| Icon | Icon colour, and the background of the round button when closed. | — |
| Button | Background colour with a hover colour, and typography. | — |
| Message Pre Text | Typography for the note above the message box. | — |
| Container | Background colour. | — |
| Message Box | Typography, background colour and placeholder style. | — |
Put the country code first and leave out the + symbol, for example 447700900123 for a UK mobile.
No. The widget opens WhatsApp with your number and the visitor's message, so any WhatsApp number works.
They are asked to enter a message before WhatsApp opens.
It is mainly for styling the widget in the editor. Turn it off if you want the widget to start closed.
Use one per page. The widget's script works with the first widget it finds on the page, so a second one would not open or send on its own.
WhatsApp Message is included with Phox Elements, along with 140+ other premium elements for Breakdance.