Marketing · Gutenberg
Floating CTA block for WordPress
Fixed-position floating call-to-action button that sticks during scroll. Configurable position, icon, label, and trigger delay.
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
Fixed-position floating call-to-action button that sticks during scroll. Configurable position, icon, label, and trigger delay.
Inspector panels on this block: Button, Position. Those titles come from index.js, not from a shared template.
Behavior controls: “Screen Position” options: Bottom Right, Bottom Left, Bottom Center, Top Right, Top Left; “Scroll to Show (px)” (Show after scrolling this many pixels (0 = always visible)).
Where to find it
Gutenberg inserter → Marketing → search “Floating CTA” (block name `blockenberg/floating-cta` in block.json). Style it in the sidebar after insert.
How to use Floating CTA block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Floating CTA”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Button. Set “Label”, “URL / Link”, “Open in New Tab”, “Show Label Text”.
- Check the published page. The view script reads HTML data attributes: data-dismiss, data-scroll-trigger. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Label | Text field in the inspector. block.json default: Get a Quote. Saved as `label`. |
| URL / Link | Text field in the inspector. block.json default: #contact. Saved as `url`. |
| Open in New Tab | On/off toggle in the inspector. Off by default. Saved as `openInNew`. |
| Show Label Text | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Button — Icon | Select control; the chosen value is saved on the block. block.json default: megaphone. Saved as `icon`. |
| Icon Size (px) | Numeric range control in the inspector. Range 12–40. block.json default: 20. Saved as `iconSize`. |
| 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`. |
| Offset X (px) | Numeric range control in the inspector. Range 0–100. block.json default: 24. Saved as `offsetX`. |
| Offset Y (px) | Numeric range control in the inspector. Range 0–200. block.json default: 24. Saved as `offsetY`. |
| Scroll to Show (px) | Numeric range control in the inspector. Show after scrolling this many pixels (0 = always visible). Range 0–2000. block.json default: 300. Saved as `scrollTrigger`. |
| Z-index | Numeric range control in the inspector. Range 100–100000. block.json default: 9999. Saved as `zIndex`. |
| Padding X (px) | Numeric range control in the inspector. Range 8–60. block.json default: 20. Saved as `paddingX`. |
| Padding Y (px) | Numeric range control in the inspector. Range 4–40. block.json default: 14. Saved as `paddingY`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–60. block.json default: 50. Saved as `btnRadius`. |
| Button Shadow | On/off toggle in the inspector. On by default. Saved as `btnShadow`. |
| Pulsing Ring | On/off toggle in the inspector. On by default. Saved as `pulsing`. |
| Show Dismiss (×) | On/off toggle in the inspector. Off by default. Saved as `showDismiss`. |
| Button Background | Color control in the inspector. block.json default: #6c3fb5. Saved as `btnBg`. |
| Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-dismiss, data-scroll-trigger.
When this is the right block
- Fixed-position floating call-to-action button that sticks during scroll. Configurable position, icon, label, and trigger delay — that is the job of Floating CTA, not a generic content block.
- Use it when you need the editor control labeled “Label”, which exists on this block’s inspector.
- It matches pages about floating, fixed, cta.
- 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 Floating CTA block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Floating CTA”. It sits under Marketing. After insert, open Button and set “Label”, “URL / Link”, “Open in New Tab”, “Show Label Text”.
What makes Floating CTA different from other Blockenberg blocks?
Fixed-position floating call-to-action button that sticks during scroll. Configurable position, icon, label, and trigger delay. Inspector labels on this block include “Label”, “URL / Link”, “Open in New Tab”, “Show Label Text”.
Is the Floating CTA Gutenberg block free?
Yes. Floating CTA ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Floating CTA 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: Button, Position).
Related marketing blocks
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.
Button Group
Group of styled CTA buttons with alignment, spacing, individual per-button overrides, and responsive stacking.
Call to Action
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
Gradient CTA
A bold full-width call-to-action section with a gradient or solid background, headline, subtitle, and buttons.
Phone Button
A floating or inline click-to-call / WhatsApp button with pulse animation.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Floating CTA from the Gutenberg inserter.