A popup campaign has two parts: the popup itself, and an optional teaser. The teaser is a small banner on your site, such as "Spin to win 🎁", that opens the popup when clicked.
Style the popup
- Click Popup settings above the page, or click the popup's edge.
- On the Styles tab, under Popup, set the Background, the Backdrop (the dimmed layer behind the popup), Border, Size, Shape, Content alignment and Margin. Turn on Disable backdrop if the page behind the popup should not be dimmed.
- Under Close button, set its Background, Icon color, Size, corner (Alignment) and Margin.
- On the Effects tab, choose how the popup opens and closes, for example Fade or Slide.
The popup add-ons:
- Dismiss teaser on close: "Also hide the teaser when this popup is closed."
- Hide after form submit: "Don't show this popup again to a visitor once they have submitted a form inside it."
Popup type and position
Open Placement under Layout in the editor:
- Type: a bar at the top or bottom of the screen, a standard popup, a slider at the side, or a full page. If a type is greyed out, your plan doesn't include it.
- Alignment: bars can be at the top or bottom, sliders on the left or right, and standard popups anywhere on a 3 × 3 grid.
The first time you open a new popup, Scratcher asks you to Choose domain: the website where it will be shown. You can change it later under Domain. See Show a campaign as a popup.
The teaser
Under Flow, the Teaser row shows the teaser. Its Actions menu has:
- Enable teaser and Disable teaser. A disabled teaser says Teaser is disabled.
- Change teaser: pick another teaser design.
- Settings: the teaser's own settings (see below).
- Save teaser as template: reuse the teaser in other popups.
Design the teaser like a page: click its texts and images to change them.
Teaser settings
- Action: what happens when the teaser is clicked: Show popup, Link (with Open link in new tab if you want) or None.
- Hide on desktop, Hide on tablet, Hide on mobile.
- Styles: the teaser's Background, Border, Size, Shape, Content alignment, corner (Alignment) and Margin, and its own Close button.
The teaser shows as soon as the page loads. The triggers in Display only apply to the popup. When a visitor closes the teaser with its close button, it stays hidden for that visitor.
Background image in popups
Popups have an Image Background element that fills one side of the popup with an image. Set its Mobile height to control how much of the screen it takes on phones.
Open a popup from your own button
With the trigger add-on Click trigger in Display, the popup opens when someone clicks an element on your website. Enter the element's CSS Selector, for example .open-competition. Ask your web developer if you are unsure.
Tips
- Keep the popup short: a headline, the game and the form. Visitors decide in seconds.
- Test the popup and teaser on a phone. Use Hide on mobile for a teaser that takes too much room there.
- A full-page popup gets the most attention, but use it with care, for example with Exit-intent on computers.