WhatsApp Button (Divi)

WhatsApp click-to-chat for Divi 5. Every button is a real wa.me link, so it works without JavaScript. The chat bubble pinned to the bottom-right corner of this page is one of them — it pops in after a second, pulses, and shows a callout after two seconds. The rest are shown in the page (Pin to the Screen: off) so you can compare them. Each is labelled with its settings.

1. Buttons in the page

Type: Button in the page · the five button styles · pre-filled message with the {page_title} token · icon before or after · alignment left, centre, full width.

Centred

Full width

2. Floating buttons

Type: Floating button, unpinned here to sit side by side · hover tooltip towards the page · pulse ring · wiggle every 4 seconds · bottom-left corner with the tooltip on the right · a callout that stays until closed.

Bottom-left corner, callout on the right

3. Chat bubbles — four themes, three footers

Type: Floating chat bubble, unpinned and Start Open so all four show. Click a button to close or reopen its chat. Green: a start button and a second bubble · Light: a message field where visitors type first · White: a list of people to chat with (three Chat Person modules, one away, one with its own number) · Dark: custom status, no online dot.

Light · message field

Dark · custom status, no dot

4. Business hours

Business Hours on, in the site time zone. Left: every day 00:00–23:59, so it is always open. Right: Preview as Outside Hours on — the away text replaces the status line and the tooltip, and the online dot turns amber.

Outside hours (preview)

5. Styled from the Design tab, on a dark background

Button: 64 px (56 px on phones), colours and hover colours, grow on hover 12%, bold text and a border · chat window: 380 px wide, 26 px radius, header, chat and footer colours, bubble colours and font, start button colours and font · tooltip colours and font.