Marketing · Gutenberg
Phone Button block for WordPress
A floating or inline click-to-call / WhatsApp button with pulse animation.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A floating or inline click-to-call / WhatsApp button with pulse animation.
Inspector panels on this block: Contact Details, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Mode” options: Phone only, WhatsApp only, Both; “Layout” options: Floating (fixed), Inline; “Screen Position” options: Bottom Right, Bottom Left, Bottom Center, Top Right, Top Left.
Where to find it
Gutenberg inserter → Marketing → search “Phone Button” (block name `blockenberg/phone-button` in block.json). Style it in the sidebar after insert.
How to use Phone Button block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Phone Button”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Contact Details. Set “Mode”, “Phone Number”, “WhatsApp Number (intl format)”, “WhatsApp Pre-filled Message”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Mode | Select control; the chosen value is saved on the block. Options: Phone only; WhatsApp only; Both. block.json default: both. Saved as `mode`. |
| Phone Number | Text field in the inspector. block.json default: +1234567890. Saved as `phoneNumber`. |
| WhatsApp Number (intl format) | Text field in the inspector. Saved as `whatsappNumber`. |
| WhatsApp Pre-filled Message | Multiline text field in the inspector. block.json default: Hello! I'd like to get in touch.. Saved as `whatsappMessage`. |
| Layout | Select control; the chosen value is saved on the block. Options: Floating (fixed); Inline. block.json default: floating. Saved as `layout`. |
| Screen Position | Select control; the chosen value is saved on the block. Options: Bottom Right; Bottom Left; Bottom Center; Top Right; Top Left. block.json default: bottom-right. Saved as `position`. |
| Show Pulse Animation | On/off toggle in the inspector. On by default. Saved as `showPulse`. |
| Show Button Label | On/off toggle in the inspector. Off by default. Saved as `showText`. |
| Label Text | Text field in the inspector. block.json default: Call us. Saved as `buttonText`. |
| Button Size (px) | Numeric range control in the inspector. Range 36–100. block.json default: 56. Saved as `buttonSize`. |
| Icon Size (px) | Numeric range control in the inspector. Range 14–56. block.json default: 26. Saved as `iconSize`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–999. block.json default: 999. Saved as `borderRadius`. |
| Gap Between Buttons (px) | Numeric range control in the inspector. Range 4–40. block.json default: 14. Saved as `gap`. |
| Shadow Strength (%) | Numeric range control in the inspector. Range 0–80. block.json default: 30. Saved as `shadowStrength`. |
| Show After Scroll (px, 0 = always) | Numeric range control in the inspector. Range 0–1000. block.json default: 0. Saved as `scrollOffset`. |
| Phone Button BG | Color control in the inspector. block.json default: #6366f1. Saved as `phoneBg`. |
| Phone Button Icon | Color control in the inspector. block.json default: #ffffff. Saved as `phoneColor`. |
| Phone Pulse Color | Color control in the inspector. block.json default: #6366f1. Saved as `phonePulseBg`. |
| WhatsApp Button BG | Color control in the inspector. block.json default: #25d366. Saved as `whatsappBg`. |
| WhatsApp Button Icon | Color control in the inspector. block.json default: #ffffff. Saved as `whatsappColor`. |
| WhatsApp Pulse Color | Color control in the inspector. block.json default: #25d366. Saved as `whatsappPulseBg`. |
| Label Background | Color control in the inspector. block.json default: #1e1b4b. Saved as `labelBg`. |
| Label Text Color | Color control in the inspector. block.json default: #ffffff. Saved as `labelColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- A floating or inline click-to-call / WhatsApp button with pulse animation — that is the job of Phone Button, not a generic content block.
- Use it when you need the editor control labeled “Mode”, which exists on this block’s inspector.
- It matches pages about phone, call, whatsapp.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Phone Button block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Phone Button”. It sits under Marketing. After insert, open Contact Details and set “Mode”, “Phone Number”, “WhatsApp Number (intl format)”, “WhatsApp Pre-filled Message”.
What makes Phone Button different from other Blockenberg blocks?
A floating or inline click-to-call / WhatsApp button with pulse animation. Inspector labels on this block include “Mode”, “Phone Number”, “WhatsApp Number (intl format)”, “WhatsApp Pre-filled Message”.
Is the Phone Button Gutenberg block free?
Yes. Phone Button ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Phone Button to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Contact Details, Layout).
Related marketing blocks
Call to Action
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
Floating CTA
Fixed-position floating call-to-action button that sticks during scroll. Configurable position, icon, label, and trigger delay.
CTA Band
Full-width colored band with headline, supporting text and a call-to-action button.
CTA Pulsing Button
An animated Call-to-Action button with pulsing ring/glow effects, rich typography, hover colors, icon, badge, and subtext controls.
Split Form
Side-by-side lead generation section — content (heading, text, feature bullets) on one side and a fully configured email / sign-up form on the other.
Affiliate Disclosure
Styled FTC-compliant affiliate link disclosure notice for articles and reviews. Distinct from Affiliate Review Box — this is the small legal notice, not a full product review.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Phone Button from the Gutenberg inserter.