Create and publish a popup

A popup collects newsletter signups or enquiries from visitors to your website. You choose one of four types: a popup in the centre of the screen, one that sits in a corner, a bar at the top or bottom of the page, or one that fills the whole screen.

Create the draft

1. Open Popups and click New popup

   Popups sits under Growth in the left menu. The New popup page opens.

2. Enter a Popup name

   Only your team sees this name. Confirmation depends on the consent box: if it is shown, people confirm their address by email; if it is hidden, they join the list straight away.

3. Choose a Type

   Use the four cards under Type to choose where the popup appears on screen. You can change the type later in the studio.

4. Choose a Language and a List

   Signups join the list you choose. If you do not have one yet, use Create a new list right there. A popup without a list cannot be published.

5. Click Create popup

   Pick a starting design on the right first. MailGraf creates the draft and opens the studio. Visitors do not see the popup until you publish it and add the code to your website.

Prepare the design and form

Use the Content icon on the left to add headings, text, images and buttons. Clicking an item opens its settings on the left: for an image, Image size (Fill, Fit, Original), width and alignment; for the submit button, its colours and corners under Style. Layout, colours and text styles sit under Styles; click the unit in Line height to switch between em and px.

The popup's form is built inside the popup. Add fields from the Fields icon; the list, opt-in, language and post-submission behaviour sit under Form settings. The form also appears in the Forms list as In popup. For details on fields and post-submission options, see Create a form.

Choose the display rules

Click the Popup settings icon on the left.

• Type and position sets the popup type and where it sits. For a centre popup, Background dim and Close when clicking outside are here too.
• When to show offers After a delay, After scrolling or When leaving the page under Show. On phones, When leaving the page uses the time in On phones, show after.
• Where to show chooses All pages, Only these pages or All pages except these under Pages; Add page adds address rules such as /collection. Devices shows the popup on all devices, desktop only or mobile only.
• How often sets how many days to wait before showing the popup again to a visitor who closed it. People who sign up through this popup do not see it again.

The same panel also holds the Teaser, Close button and Animation settings. Set the teaser's font, text size, weight and colours under Style in the Teaser section.

A small "Powered by MailGraf" badge shows below the button and on the success message, but not on the teaser. On paid plans the badge starts off, and the Show switch under Powered by MailGraf turns it on or off. On other plans the badge stays on.

Publish and add it to your website

Preview in the top bar shows the popup working inside the studio; leave with Back to editing. After checking the rules and the mobile layout, click Publish and confirm in Publish this popup?.

Install in the top bar opens Install on your website. If your site is not added yet, enter it under Your website address and click Add website. Copy the code with Copy and add it once to every page of your site, just before the closing </head> tag. When the code is working, the window shows Code found on …; refresh the status with Check again.

To see how many people your popup reached and on which pages it collected sign-ups, open its report as described in Read form, popup and page reports.