Modals & Popovers
Modals and popovers help you show targeted messages without editing every page individually.
Open them from Engagement -> Modals & Popups.
Display modes
| Mode | Best use |
|---|---|
| Modal | Important messages, newsletter capture, or high-value offers |
| Slide-in | A visible prompt that does not fully block the page |
| Bar | A site-wide notice at the top or bottom of the screen |
| Popover | A small panel opened from a header button or page button |
Use popovers when the visitor chooses to open something. Use modals, slide-ins, or bars when the campaign should appear automatically.
Purposes
| Purpose | Typical use |
|---|---|
| Newsletter capture | Ask visitors to subscribe |
| Commercial CTA | Promote an offer, bookmaker, sponsor, or Smart Link |
| Fixture alert | Promote match reminders, team follows, or competition updates |
| Generic message | Announcements, service messages, or general CTAs |
The purpose helps keep the editor focused. It does not force every design to look different.
Content options
Most campaigns can include:
- title
- body text
- CTA label and destination
- whether the CTA opens in the same tab or a new window
- image
- text over the image
- background, text, button background, and button text colors
- surface style such as the global card style, flat, bordered, or elevated
- size and position
- context text such as league, team, or competition names where the page has that context
Use image text carefully. Keep it short so it remains readable on mobile.
Triggers
| Trigger | When to use it |
|---|---|
| Immediate | Important announcement that should appear right away |
| Delay | Newsletter capture or offer after the visitor has settled |
| Scroll | Prompt after the visitor has shown interest |
| Exit intent | Last chance offer or subscribe prompt |
| Button | Popover or modal opened from a header action or page button |
Popovers should normally use Button. They need a button or icon to anchor to, so automatic triggers are not a good fit.
Popover layout
For popovers, keep the content short and compact. The editor includes popover-specific controls for:
- side and alignment around the button
- spacing between the button and popover
- width: compact, standard, or wide
- padding: compact or comfortable
- arrow on or off
- surface style
Use Compact width and Compact padding for header icons or mobile screens. Use wider popovers only when the message needs more text or a larger image.
Header popover example
Create a popover
Go to Engagement -> Modals & Popups and create a Popover.
Add the content
Add title, short body text, CTA, image, and colors.
Set it active
Save it as active when it is ready.
Add it to the header
Go to Settings -> Header, add a custom action, and select the popover as the target.
Test the public site
Click the header button and confirm the popover opens in the expected position.
Page button example
Use a Modal Trigger module when a page needs a button or icon that opens an existing modal or popover.
Good uses:
- "Subscribe" button inside a hero
- "Claim offer" button inside a bookmaker block
- "Get alerts" button on a league page
- icon-only action in a compact strip
Create the modal or popover first, then select it from the Modal Trigger module.
Practical advice
- Use one primary popup campaign at a time.
- Use popovers for compact, visitor-initiated actions.
- Use bars for persistent but low-interruption messages.
- Avoid immediate modals on every page.
- Test every campaign on mobile.
- Pause old campaigns instead of deleting them if you may reuse them.