Floating Overlay Widgets User Guide
Category: Viewport Overlays & Engagement
Purpose: Floating widgets sit fixed over your website content (in the bottom corners of the viewport), giving visitors instant access to live chat, WhatsApp messaging, cookie consent banners, phone calls, and shopping carts.
Every row in the palette carries a ? button that opens that component's own help: overview, mental model, when to use it versus the alternatives, a complete property reference, worked recipes, accessibility and translation notes, gotchas, troubleshooting and an FAQ. It ships with the build, so it can never drift from the component you are configuring.
This guide is the map — which block to reach for and how they combine. The ? is the manual for each one.
A page's page type decides which blocks it is offered. If a component named here is missing from your palette, the page type is why — not a missing permission. See Visual Builder mode.
1. Floating WhatsApp Button (whatsapp_button)
Pins a floating WhatsApp contact bubble to your page. When clicked, it opens a direct WhatsApp chat window with your support or sales team.
A. WhatsApp Floating Button (whatsapp_button)
UI Controls & Options
| Field Label | Control Type | Inputs / Options | Purpose & Live Effect |
|---|---|---|---|
| WhatsApp Phone Number | Text Input | International format (e.g. +14155552671) | Destination phone number that receives customer messages. Include country code. |
| Preset Greeting Message | Text Input | Plain text (e.g. Hi! I have a question about my order.) | Pre-fills the customer's text box when WhatsApp opens. |
| Screen Position | Dropdown Selector | • Bottom Right (Recommended) • Bottom Left | Controls viewport placement of floating button. |
| Show Greeting Tooltip | Toggle Switch | On / Off | Displays a friendly chat prompt bubble next to icon (e.g. "Need help? Chat with us!"). |
2. Cookie Consent Banner (cookie_consent)
Renders a privacy and cookie compliance banner at the bottom of the screen.
B. Cookie Consent Banner (cookie_consent)
UI Controls & Options
| Field Label | Control Type | Inputs / Options | Purpose & Live Effect | Data Source Origin |
|---|---|---|---|---|
| Banner Notice Text | Text Area | Formatted text | Explains cookie usage to visitors. | Typed by user. |
| Accept Button Label | Text Input | Plain text (e.g., Accept All) | Button text to accept cookies. | Typed by user. |
| Reject Button Label | Text Input | Plain text (e.g., Reject Non-Essential) | Button text to decline non-essential cookies. | Typed by user. |
| Privacy Policy Target Page | Dropdown Selector | List of active customer pages | Destination page when visitor clicks "Learn More". | Populates from Customer Pages (e.g. Privacy Policy). |
3. Live Chat Widget (chat_widget)
Pins a live customer chat widget to your page.
UI Controls
| Field Label | Control Type | Inputs / Options | Purpose & Live Effect |
|---|---|---|---|
| Chat Provider | Dropdown Selector | • Orbit Resolve Live Chat • External Embed | Selects live chat provider engine. |
| Widget Color Token | Dropdown Selector | • Primary • Secondary • Accent | Sets color theme of floating chat button. |
4. Floating Cart Button (floating_cart)
Pins a floating shopping cart button displaying real-time item counts and subtotal.
UI Controls
| Field Label | Control Type | Inputs / Options | Purpose & Live Effect |
|---|---|---|---|
| Hide When Empty | Toggle Switch | On / Off | Automatically hides floating cart button when customer cart has 0 items. |
| Screen Position | Dropdown Selector | • Bottom Right • Bottom Left | Controls viewport location. |