Popup
A card over the page, when you choose
A popup is the strongest thing you can put on a page and the easiest to get wrong. Used once, at the right moment, with something genuinely worth having, it works. This widget gives you the moment, the position and the look, and a setting that keeps it from coming back at somebody who has already said no.
Set it up
- Make a popup widget. Sign in at dreamwidget.com/dashboard, press Popup, pick a template or Create from scratch, and give it a name for your own list. The editor opens with a guided setup that walks through each part one step at a time; press Do it myself if you would rather work on your own.
- Write the card. The editor's tabs are Templates, Content, Design and Settings. On the Content tab, Small line above the title is a short label, Title is the offer, and The line under it is the sentence that explains it. Picture takes a picture if you want one: upload it, or paste the address of one that starts with https://.
- Add the button. Button text and Button link are what it says and where it goes. The quiet line that closes it is the small "No thanks" underneath, which gives a visitor a polite way out and makes the card feel less like a trap.
- Choose the moment. On the Settings tab, under When it opens, Show it offers a delay, a scroll depth, the moment a visitor moves to leave, or at once. They are described below.
- Publish it and paste the code. Press Publish changes at the top right, then copy the embed code and paste it on your page. A popup that shows over the page needs that code, script included, because it is the script that lifts the card over your website. Publishing and the embed code has the details.
Start from a template
The Templates tab, first among the tabs, shows every popup template as a picture. Click one and it goes on your popup at once, live in the preview, with no question asked. Your words, links and pictures stay, as do the rules under Where and when it shows; the look changes. The template you are using is marked In use, and the one we suggest starting from is marked Recommended. Undo at the top of the editor takes a template back if you liked the popup better before.
When it shows
These are on the Settings tab under When it opens. Each number is listed only for the moment that uses it.
- After a delay. Delay (seconds) counts from the moment the page loads. Five to ten seconds is long enough for a visitor to see what your page is before you interrupt it.
- At a scroll depth. Scroll depth (%) waits until the visitor has read that far down. Somebody who has read half your page is interested, which makes this the gentlest of the four.
- When the visitor moves to leave. The card appears as the pointer heads for the top of the window. Fallback (seconds) shows it anyway after that many seconds if the visitor never moves to leave. Phones have no pointer to leave with, so on a phone this number is what opens the card. Put 0 there and it never opens on a phone.
- At once. The card appears as soon as the page loads. Use it sparingly.
Where it shows
Where the popup shows, on the Content tab, has two answers. Over the page, with the page dimmed behind it is the usual one: the card floats above your website and everything behind it is dimmed. In the page, where the code is pasted puts the card into the flow of your page like any other section, which is useful for a signup box that belongs in the middle of an article.
Where on the window, on the Design tab in the section Where it sits on the window, then decides the spot: the center, the top, the bottom, or any of the four corners. A corner is much less interruptive than the center and is worth trying first. It belongs to the screen you are editing, so a phone can have a place of its own (see Placing it for phones).
Teaser pill on the Design tab offers one more way in. Set Show it first as to A pill that grows into the popup and the popup waits as a small pill in a bottom corner, growing into the card when a visitor points at it or taps it.
The preview in this editor always draws the card in place, whichever moment and position you have chosen, so you can style it without waiting for a delay. Replay above the preview draws the widget again from the start if you want to watch the delay run.
How often it comes back
Stays closed, on the Settings tab under When it opens, is how long a visitor who closes the card stops seeing it. Until their next visit keeps it away for the rest of their visit. For a number of days asks for Days it stays closed, and the visitor's browser remembers that long; thirty days is a reasonable choice. Not at all: back on the next page brings the card back on the visitor's very next page, which is the fastest way to make somebody leave your site.
Popup id, just below, is what tells one offer from the next. Change it when the offer changes, for example from spring-sale to free-shipping, and a visitor who closed the old card sees the new one. It is not offered with Not at all, since nothing is remembered then.
The card
Behind the popup, on the Design tab, is everything outside the card: Backdrop color, Backdrop blur, and Space from edge, the space between the popup and the edge of the window, offered where the card meets an edge. These act only when the card shows over the page.
Layout holds the card itself. Popup layout chooses its shape: a card with the picture on top, the picture on one side and the words on the other, the picture filling the card with the words over it, a wide strip, a ticket, words beside a framed picture, or a sheet rising from the bottom. Then come Align the text, Max card width, Space between parts, Card background, Card border color, Card corner radius, the card padding, and Shadow under the card. If you have given it a picture, Max image height and Image corner radius shape that too, and the Picture shape section has more.
Each line of text has a section of its own, with its words, font, size, weight, color, alignment, letter spacing, line height, hover color and the space above and below it: Small line above the title, Title, The line under it and The quiet line that closes it. The Button section has the button's words and link, its font, its style, the fill, the text color, the stroke, the radius, the padding and the hover state, plus a library of ready made buttons.
Two shortcuts save time across widgets. Save as a style, in a text section, keeps that text's look on your account to use in any widget. Your Look, at the top of the Theme section, is optional: one set of colors, fonts, sizes and a button for your site, to use in any widget, and everything it sets stays editable.
Closing it
There are three ways out and you decide how many. The cross in the corner is set in The buttons together on the Design tab: Close button style picks a cross in a circle, a thin cross or the word Close, Close button background and Close button color color it, and Hide the close button takes it away. Click outside closes, under Behind the popup, lets a visitor dismiss the card by clicking the dimmed page. The quiet line you wrote on the Content tab closes it too.
Collecting email addresses
Turn on Collect email addresses on the Content tab and the button becomes an email field. Every signup is saved on your Signups page, with a CSV download, and you get an email for each new one.
With it on, the Content tab adds Words in the empty field, Join the field and the button into one bar, Thank you message, Ask for a name too, and a small line under the field for what people are signing up for. The button now sends the address instead of following a link, so Button link leaves the list. The field's own look is in the The email field section on the Design tab.
To read the addresses, follow See the signups and download a CSV under the switch. The Signups page lists everyone who left an address in this popup, newest first, with Download CSV at the top and a Delete beside each one. Addresses arrive once the popup is published and on your page.
Desktop and Mobile
The editor has two screens, Desktop and Mobile, and the buttons above the preview choose which one you are editing. Every setting on the Design tab is kept once for each, so a change lands on the screen you are looking at and nowhere else, unless you tick Edit all screens above the preview. A tablet is drawn from Desktop, so there is nothing separate to set for one.
The words, the picture, the link and the timing are shared by both screens. The card is the widget most worth checking on a phone, where a design that looks generous on a desktop can fill the whole screen. Press See both above the preview to see Desktop and Mobile side by side, at life size, before you publish.
Placing it for phones
A popup over the page can sit somewhere else on a phone. Under Where on the window on the Design tab, a line says Phones follow this until you give them their own, with a Place it for phones button beside it. Press it and the editor switches to Mobile; the place you choose there is the place on phones, and Desktop keeps its own.
Until you give phones their own place, a phone uses the Desktop choice, with one exception: a popup in a corner is drawn along the bottom of a phone's screen. To keep the card off phones altogether, turn on Hide on phones on the Settings tab under Where and when it shows.
Publishing and the embed code
- Press Publish changes. The button at the top right says Publish changes while you have something to publish and Published when the live popup is what you see. Pressing it lists what you changed and asks once: Publish sends it, Keep editing goes back.
- Copy the code. Once it is live, the editor offers Copy embed code straight away. The same code is on the Settings tab under Embed code, with its own Copy embed code button.
- Paste it once. Paste the code where the popup should load. It is a frame and a short script together; keep both, because the script is what lifts the card over your page. A page that already has the code picks up each later publish within a minute, with nothing to paste again. Embedding on your site covers where to paste it on WordPress, Wix, Shopify and other website builders.
If you started building without an account, publishing first asks you to create a free one, and the popup you built comes with you.
If something goes wrong
The card does not float over your page. The embed code on your page is an older one without the script. Copy it again from the Settings tab and replace what you pasted.
Nothing shows on a phone. You have chosen When the visitor moves to leave and left the fallback at 0. A phone has no pointer, so give it a number of seconds instead. Also check that Hide on phones is off.
You closed it and cannot get it back. Your own browser is remembering. Change Popup id, or open your site in a private window to see it as a new visitor would.
The card is taller than a phone screen. Switch to Mobile above the preview, lower the text sizes and the card padding there, and if you are using a picture, lower Max image height. These are in Advanced Tools.
Anything else: hello@dreamwidget.com, and tell us the widget's name.