Background Overlay
Add a full-screen overlay behind your floating message to focus visitor attention. The overlay covers the entire page and sits between the website content and your message.
Overlay Types
| Type | Effect | Best For |
|---|---|---|
None | No overlay, message floats over the page normally | Non-intrusive banners and notifications |
Blur | Blurs the page with a subtle dark tint | Modals and important announcements |
Dark | Semi-transparent dark overlay | High-contrast messages on light sites |
Light | Semi-transparent white overlay | Messages on dark sites |
How to Set Up
- Go to Dashboard > Messages and create or edit a message
- Switch to the Settings tab
- Find the Background Overlay dropdown
- Select your preferred overlay type
- Check the live preview to see the effect
- Save your message
Behavior
- The overlay covers the entire viewport behind the message
- Clicking the overlay dismisses both the overlay and the message (same as clicking the close button)
- The overlay respects your dismiss settings — if set to SESSION, the overlay won't reappear until the next session
- Works with all templates including Story slides
- Works with all trigger types (immediate, delay, scroll, exit intent)
Tips
- Use Blur for a premium, modern feel on important messages
- Use Dark when your message has light colors and needs contrast
- Use Light when your message has dark colors on a dark website
- Pair overlays with the Center position for a modal-like experience