Marketing · Gutenberg
Social Proof Popup block for WordPress
Floating FOMO notification popups that cycle through social proof entries like purchases, signups, and reviews.
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
Floating FOMO notification popups that cycle through social proof entries like purchases, signups, and reviews.
Inspector panels on this block: Behaviour, Entries (' + a.entries.length +. Those titles come from index.js, not from a shared template.
Behavior controls: “Position” options: Bottom Left, Bottom Right, Top Left, Top Right; “Animation” options: Slide Up, Fade, Bounce.
Where to find it
Gutenberg inserter → Marketing → search “Social Proof Popup” (block name `blockenberg/social-proof-popup` in block.json). Style it in the sidebar after insert.
How to use Social Proof Popup block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Social Proof Popup”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Behaviour. Set “Position”, “Animation”, “Display Time (ms)”, “Pause Between (ms)”.
- Check the published page. The view script reads HTML data attributes: data-anim, data-opts, data-pos, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Position | Select control; the chosen value is saved on the block. Options: Bottom Left; Bottom Right; Top Left; Top Right. block.json default: bottom-left. Saved as `position`. |
| Animation | Select control; the chosen value is saved on the block. Options: Slide Up; Fade; Bounce. block.json default: slide. Saved as `animationType`. |
| Display Time (ms) | Numeric range control in the inspector. Range 1000–10000. block.json default: 4000. Saved as `displayTime`. |
| Pause Between (ms) | Numeric range control in the inspector. Range 500–8000. block.json default: 3000. Saved as `pauseBetween`. |
| Start Delay (ms) | Numeric range control in the inspector. Range 0–10000. block.json default: 2000. Saved as `startDelay`. |
| Loop | On/off toggle in the inspector. On by default. Saved as `loop`. |
| Show Avatar / Emoji | On/off toggle in the inspector. On by default. Saved as `showAvatar`. |
| Show Timestamp | On/off toggle in the inspector. On by default. Saved as `showTime`. |
| Show Close Button | On/off toggle in the inspector. On by default. Saved as `showClose`. |
| Border Radius | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Max Width (px) | Numeric range control in the inspector. Range 200–480. block.json default: 300. Saved as `maxWidth`. |
| Drop Shadow | On/off toggle in the inspector. On by default. Saved as `shadow`. |
| Emoji / Icon | Text field in the inspector. Saved as `entries`. |
| Name | Text field in the inspector. Saved as `entries`. |
| Location | Text field in the inspector. Saved as `entries`. |
| Action Text | Text field in the inspector. Saved as `entries`. |
| Time Ago | Text field in the inspector. Saved as `entries`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Name | Color control in the inspector. block.json default: #0f172a. Saved as `nameColor`. |
| Action Text | Color control in the inspector. block.json default: #475569. Saved as `actionColor`. |
| Timestamp | Color control in the inspector. block.json default: #94a3b8. Saved as `timeColor`. |
| Avatar Background | Color control in the inspector. block.json default: #f0f9ff. Saved as `avatarBg`. |
| Close Button | Color control in the inspector. block.json default: #94a3b8. Saved as `closeBtnColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-anim, data-opts, data-pos, data-rendered.
When this is the right block
- Floating FOMO notification popups that cycle through social proof entries like purchases, signups, and reviews — that is the job of Social Proof Popup, not a generic content block.
- Use it when you need the editor control labeled “Position”, which exists on this block’s inspector.
- It matches pages about social proof, fomo, notification.
- 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 Social Proof Popup block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Social Proof Popup”. It sits under Marketing. After insert, open Behaviour and set “Position”, “Animation”, “Display Time (ms)”, “Pause Between (ms)”.
What makes Social Proof Popup different from other Blockenberg blocks?
Floating FOMO notification popups that cycle through social proof entries like purchases, signups, and reviews. Inspector labels on this block include “Position”, “Animation”, “Display Time (ms)”, “Pause Between (ms)”.
Is the Social Proof Popup Gutenberg block free?
Yes. Social Proof Popup ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Social Proof Popup 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: Behaviour, Entries (' + a.entries.length +).
Related marketing blocks
Announcement Strip
A thin dismissible announcement bar — ideal above the site header for promotions, launches, or alerts.
Client Showcase
"Trusted by" section featuring client logos with optional tagline, grayscale hover effect, and a pull-quote from a featured client.
Launch Waitlist
Product or service launch section with live countdown timer, email waitlist form, feature teasers, and social proof. For pre-launch landing pages.
Multi-Step Form
A wizard-style multi-step lead capture form with step indicator, per-step fields, and success message.
Newsletter Popup
Email capture popup that triggers on scroll, time delay, or exit intent. Cookie-based dismissal, image support, and success state.
Notification Bar
Dismissible sticky announcement or promo bar — shown at the top or bottom of the page.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Social Proof Popup from the Gutenberg inserter.