TL;DR. Set your brand colors, fonts, and logo once. Pick the Teaser corner and how the full popup opens. Tweak per-element in the editor.
Set your brand (colors, fonts, logo)
When you create a new campaign, the second wizard step is Theme.
Primary color
The primary color drives all buttons, the popup background accent, and the highlighted text. Click the color swatch to open the color picker, paste a hex code, or pick from the palette.
Font family
Pick from a curated list (system fonts that load reliably on every browser). Custom font files aren't supported via the wizard; talk to our team via in-app chat if you need a custom brand font added.
Logo
Click Add logo.
Paste a public image URL.
The logo renders at the top of every step except the Teaser.
Pick the Teaser corner
The Teaser is the small floating tab that sits on the page before the visitor opens the popup. It's also what they tap to reopen the popup after dismissing it.
Teaser position
In wizard step 3 (or in the editor, by clicking the Teaser step), choose a corner:
Bottom right (default).
Bottom left.
Top right.
Top left.
Pick the corner least likely to overlap with your existing chat widget or back-to-top button.
Teaser behavior
Show teaser: the tab is visible before the popup opens.
Hide teaser: only the full popup ever shows, never a tab.
Auto-open the popup after N seconds (set in the wizard or Targeting dialog).
Pick how the full popup opens
Display mode
Centered overlay (default): popup appears in the middle of the screen on a dim background.
Slide-in: popup slides in from a corner without dimming the page.
Full-screen: popup takes the entire viewport. Use sparingly; it can feel disruptive especially on mobile.
Width and height
Settings in the editor's right sidebar:
Max width: how wide the popup is on desktop (e.g. 480px).
Max height: how tall before it scrolls (e.g. 600px).
On mobile, the popup adapts to the viewport.
Picking a behavior
Goal | Display mode |
Newsletter signup, low intent | Slide-in (less disruptive) |
Discount offer, high intent | Centered overlay (more attention) |
Exit-intent grab | Centered overlay (full attention) |
Quiz or game | Centered overlay or full-screen |
Per-element tweaks in the editor
Once you're in the editor:
Click any text element to change its color, font size, or weight via the right sidebar.
Click any button to change its background color, border radius, or label.
Click the canvas (outside any element) to change the step background or padding.
Changes here override the theme for that one element. Useful for things like a contrasting "Submit" button on the SMS step.
What if I change the theme later?
Wizard theme settings apply to new steps. Per-element overrides you've made in the editor stay in place. To wipe overrides and re-apply the theme, delete the step and re-add it.