Create and publish a popup

A popup helps you collect sign-ups or enquiries without building the experience from scratch. MailGraf currently supports two popup types: a modal that opens over the page and a floating bar that sits at the top or bottom.

Create the draft

1. Open Popups and click New popup

   The setup page contains the popup name, purpose, starting design and target list.

2. Enter a Popup name and choose a Purpose

   Newsletter signup collects confirmed subscribers. Lead capture records contact or information requests.

3. Choose a Starting design

   Choose Content only, Image on top, Image on the left or Image on the right for a modal. Choose Floating bar for a compact bar. You can also use one of your saved popup templates.

4. Choose a Target list

   Confirmed newsletter sign-ups join this list. You can create a list on the same page or choose Skip for now, save as draft. A popup without its audience settings cannot be published.

5. Click Create popup

   MailGraf creates the draft and opens the popup editor. Nothing appears on your website until you publish it and install the script.

Prepare the design and form

Open Elements to add headings, text, buttons, images and other blocks. The four modal starting designs determine where the image and content sit. A floating bar uses a compact horizontal structure; choose Top or Bottom under Behavior > Bar edge.

The Form selection section appears below Blocks. Choose the MailGraf form this popup will show. The selected form owns its fields, target list, tags, consent settings and redirect. Click Edit form when you need to change any of them. If you do not have a form yet, create one under Forms first. Every Form block needs a selected form before the popup can be published.

Choose the display rules

Open Behavior beside Elements. The popup type is already set, so there is no separate switch to turn the design into a popup.

• Show after sets the delay before opening.
• Show after scroll waits until the visitor reaches the chosen percentage.
• Show on exit intent (desktop) opens when the pointer leaves the page.
• Don't show again for controls the number of days before another display.
• Show on pages accepts paths such as /pricing and groups such as /blog*. A blank field allows every page.

Publish and install it

Click Preview to open the popup on a separate demo page. Check its rules and mobile layout, then click Publish.

Popup script is the short installation code that runs the popup on your website. Find it at the bottom of Behavior, then click Copy code. Add the code before the closing </body> tag. The published popup will now open according to its rules.