Utilities module

WhatsApp Chat block

Lets visitors message you on WhatsApp: a floating chat button with an optional greeting card, or a button in your content.

Overview

WhatsApp Chat adds a WhatsApp button. Floating keeps a round button in the bottom corner of the page; it can first open a small card with your name, a status line and a greeting, whose Start chat button opens WhatsApp. In content places a green button where the block is. Nothing is loaded from WhatsApp until a visitor clicks, so it has no effect on speed or privacy.

To show the floating button on every page, add the block to a template part such as the footer (Appearance → Editor).

At a glance

Block name: wpbb/whatsapp-chat
Module: Utilities
Find it by searching: WhatsApp Chat
Loads JavaScript on the site: Yes, a small script, only on pages that use this block

When and why to use it

Quick customer support for shops and local businesses.
A “Message us” call to action on contact and pricing pages.

Example scenarios

Shop: in the footer template, Floating, bottom right, greeting card “Sam from Support — Typically replies within an hour”.
Contact page: In content, button text “Message us on WhatsApp”, pre-filled message “Hi, I have a question about…”.

How to add the WhatsApp Chat block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type WhatsApp Chat in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click WhatsApp Chat in the results. The block appears with a preview of the button, and a reminder to add your number.
Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

Settings panel: WhatsApp

WhatsApp number

What it does: The number chats go to.
What to enter or choose: Full international number with country code; spaces, dashes and + are fine.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Required — nothing is shown on the site without a valid number.
Example: +44 7700 900123.
Result: Links to https://wa.me/447700900123.

Pre-filled message

What it does: Text typed into the chat for the visitor.
What to enter or choose: Optional text.
Default: Empty
How to use it: Type into the box. Line breaks are kept where the block allows them.
When to use it: To give context, e.g. which page they came from.
Example: “Hi! I have a question about my order.”
Result: The visitor can edit it before sending.

Show as

What it does: A button fixed to a corner, or a button in the page.
What to enter or choose: One of: Floating, In content.
Default: Floating
How to use it: Click one of the buttons in the group.
When to use it: Floating for site-wide support; In content for a call to action.
Example: Floating.
Result: Floating stays visible while scrolling.

CornerShown when Show as is Floating

What it does: Which corner the button sits in.
What to enter or choose: One of: Bottom right, Bottom left.
Default: Bottom right
How to use it: Click one of the buttons in the group.
When to use it: Always optional.
Example: Bottom left if a cookie banner or chat already uses the right.
Result: The button moves.

Button text

What it does: The button’s text.
What to enter or choose: Text, or empty for “Chat on WhatsApp”.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Optional.
Example: “Message us”.
Result: Shown on In content buttons; on Floating buttons it is read by screen readers unless Show text is on.

Show textShown when Show as is Floating

What it does: Shows the text next to the icon.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: For a more explicit button.
Example: Off.
Result: A pill instead of a circle.

Show on

What it does: Which screen sizes show the button.
What to enter or choose: One of: All devices, Tablets and desktops, Phones only.
Default: All devices
How to use it: Open the dropdown and pick an option.
When to use it: Phones only if most chats come from phones.
Example: All devices.
Result: Hidden below or above 600px wide.

Settings panel: Greeting card

Shown when Show as is Floating.

Show a greeting card first

What it does: The button opens a small card; its Start chat button opens WhatsApp.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Off to open WhatsApp straight away.
Example: On.
Result: The card closes with the button, Escape or a click outside.

NameShown when the greeting card is on

What it does: Who visitors will talk to.
What to enter or choose: Text.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Recommended.
Example: “Sam from Support”.
Result: Shown at the top of the card.

Status lineShown when the greeting card is on

What it does: A line under the name.
What to enter or choose: Text, or empty for “Typically replies within an hour”.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Optional.
Example: “Online 9–5, Mon–Fri”.
Result: Grey text under the name.

GreetingShown when the greeting card is on

What it does: The message bubble in the card.
What to enter or choose: Text, or empty for “Hi there! How can we help you?”.
Default: Empty
How to use it: Type into the box. Line breaks are kept where the block allows them.
When to use it: Optional.
Example: “Questions about sizing? Ask us!”
Result: Line breaks are kept.

PhotoShown when the greeting card is on

What it does: A small round photo in the card.
What to enter or choose: Any image.
Default: Empty
How to use it: Click the button to open the Media Library, then upload a new file or pick an existing one and click “Select”.
When to use it: Optional — a WhatsApp icon is shown otherwise.
Example: Your support person’s headshot.
Result: Shown beside the name.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what WhatsApp Chat offers.

Element: Button selected first

The WhatsApp button. Hover and Focus states.

Styles-tab controls for “Button”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Focus
Colors	Text	—	Normal, Hover, Focus
Background	Type	—	Normal, Hover, Focus
	Color / Gradient	—	Normal, Hover, Focus
	Image	—	Normal
Border	Border type	—	Normal, Hover, Focus
	Border	—	Normal, Hover, Focus
	Radius	Yes	Normal
	Focus indicator	—	Focus
Box Shadow	Remove shadow	—	Normal, Hover, Focus
Box Shadow	Shadow layers	—	Normal, Hover, Focus
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover, Focus

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.

Element: Block

The block’s outer spacing and visibility.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Spacing	Margin	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Effects	State transition (ms)	—	Normal
Effects	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Greeting card

The greeting card.

Styles-tab controls for “Greeting card”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal

States: Normal only.

Element: Start chat button

The card’s Start chat button. Hover and Focus states.

Styles-tab controls for “Start chat button”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Focus
Colors	Text	—	Normal, Hover, Focus
Background	Type	—	Normal, Hover, Focus
	Color / Gradient	—	Normal, Hover, Focus
	Image	—	Normal
Border	Border type	—	Normal, Hover, Focus
	Border	—	Normal, Hover, Focus
	Radius	Yes	Normal
	Focus indicator	—	Focus
Box Shadow	Remove shadow	—	Normal, Hover, Focus
Box Shadow	Shadow layers	—	Normal, Hover, Focus
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover, Focus

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Padding, Width, Max width, Height, Min width / Min height / Max height, Opacity (%), Margin, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.

How it works on your site

A link to https://wa.me/<number> that opens in a new tab. The greeting card is a native <details> element, so it works without JavaScript; a tiny script adds Escape and click-outside to close it. No WhatsApp scripts, cookies or requests until a visitor clicks.

Limitations and notes

Opens WhatsApp (app or WhatsApp Web); it is not a live chat inside your site.
One number per block.

Troubleshooting

The button is not on the site.

The number is missing or too short. Enter the full number with country code. Also check Show on.

The floating button covers my cookie banner or another chat.

Move it with Corner, or adjust its position in the Styles tab.