Countdown
A countdown to a date, or one per visitor
A deadline people can see makes them act. This widget counts down to a moment you choose and puts a button next to it, so a visitor can go straight to the offer or add the moment to their own calendar. It can also give every visitor a clock of their own, start again every day or every week, or count up from a moment instead. See one running.
Set it up
- Make a countdown widget. Sign in at dreamwidget.com/dashboard, press Countdown, pick a template or Create from scratch, and give it a name for your own list.
- Set the moment. The editor's tabs are Templates, Content, Design and Settings. On the Content tab, Count chooses down to a moment or up from one, and Ends at takes the date and time the offer closes. Your visitor sees it counted in their own time zone, so a shopper in Tokyo and a shopper in Madrid both see the right number of hours left.
- Write the words. Title is the headline above the clock, and Line under the title is the smaller line beneath it. Either can be left empty.
- Add the button. Button text is what it says. It either goes to the Button link you give it, or adds the moment to the visitor's calendar (see Add to calendar). Leave the text empty and there is no button.
- Publish it and paste the code. Press Publish changes at the top right, then copy the embed code and paste it where the clock should sit. Publishing and the embed code has the details.
Start from a template
The Templates tab shows every countdown template as a picture, with a tab for each use: sales and deals, launches and coming soon, events and live, holidays, personal milestones, evergreen and repeating, and counting up. Click one and its look goes on your countdown at once, live in the preview. The template you are using is marked In use, and Undo at the top of the editor takes it back.
A template brings its look and its kind of clock. A holiday template counts to its holiday, a repeating one starts again on its own, and a count up counts up, so check Ends at or Counting up from on the Content tab after you pick one.
Kinds of deadline
A fixed date, for a real deadline
Fill in Ends at and every visitor sees the same finish line, counted in their own time zone. This is the one for a sale that really does end on Friday, a webinar, a launch or a ticket deadline. Until a date is set the clock reads all zeros in the editor and stays off your page.
When it ends can start the clock again: Start again for the same time tomorrow for a daily deal, or Start again for the same time next week for a weekly show, so you never change the date by hand.
Do not show it before (optional) lets you set everything up in advance. The widget stays off your page until that moment arrives, then appears on its own. The preview in the editor always shows the clock, so you can keep working on it.
A clock per visitor, for an offer that always runs
Or evergreen: minutes from each visitor's first look gives every visitor a clock of their own. Put 1440 in it and each person gets twenty four hours, counted from the first moment they saw it, kept in their own browser. Start each visitor's clock again when it runs out starts it over for them. Leave the minutes at 0 to use the date instead.
Counting up
Set Count to Up from a moment and fill in Counting up from. The widget shows the time since, which suits an anniversary, the day a business opened, or days without an incident.
What the clock shows
Under What the clock shows on the Content tab, tick the units you want: years, months, weeks, days, hours, minutes, seconds, and thousandths of a second. The largest one shown takes everything above it, so a clock without days shows 50 hours rather than 2 days and 2 hours.
Each unit has its own Word under the line, so a French site reads "jours" and a short layout can read "d", "h", "m" and "s". Leave one blank and the English word comes back.
The button
Button action sets what a click does. Goes to the link opens your Button link, which needs the whole address, starting with https://. Until there is a link the button is drawn but goes nowhere, which is worth checking before you publish. Write words that say where the link goes, such as "Shop the sale" for a sale page.
The Button section on the Design tab has the fill, the text color, the stroke, the corner radius, the padding and what happens under the pointer, plus a library of ready made buttons. Space above the button sets how far it sits below the clock.
Add to calendar
Set Button action to Add to calendar and a click opens a small menu: Google Calendar, Apple Calendar or any other calendar app (as an .ics file), Outlook.com and Microsoft 365. The visitor picks one and the event goes into their calendar. Nothing is sent from DreamWidget; their own calendar adds it.
- Event name is what their calendar calls it. Left blank, it uses your title.
- Event starts left blank adds the moment your countdown ends, and for a clock that starts again every day or every week, the next one, so the button and the clock always agree.
- Event ends left blank makes it one hour long. All-day event makes it a whole day instead.
- Event time zone, Event location and Event details fill in the rest. Offer Yahoo Calendar adds Yahoo to the menu.
A clock that counts up, or one that starts for each visitor, has no single moment to add, so give it an Event starts of its own. Until it has one, the menu tells visitors the date of the event has not been set yet.
When it reaches zero
In place of the clock, show, under When it ends on the Content tab, has three answers. A heading, a paragraph and a button replaces the clock with a closing message, such as "This offer has closed", and a button to what comes next. Another of your widgets puts one of your published widgets where the clock was. Nothing: the widget disappears takes it off the page, leaving nothing behind.
Two more things can happen for a visitor who is watching when it ends. Also open a popup opens a card over the whole page with a heading, some text and up to three buttons, after a delay you choose. Then take the visitor to this page (optional) sends them on to another address after a few seconds. Both happen only for somebody watching at zero, unless you turn on Also for visitors who arrive after it has ended.
The ending's look is on the Design tab under The ending, including How it comes in, and the popup's under The popup.
Questions against the clock
Ask questions in a popup, against the clock turns the countdown into a timed quiz. Add up to 40 questions under Question, each with up to six answers and the right one marked. The clock waits until the visitor presses Start, then runs in the popup's header for the Time allowed. You can shuffle the questions, show right and wrong after each answer, write the headings for a finished quiz and for time running out, show the score, offer another try, and link to a page to go on to.
The look
Clock style, in the Layout section of the Design tab, chooses how the time is drawn: numbers in tiles (clear the cells for a bold, bare look), flip cards whose top half folds down on every change, one ring that runs out with the time and the time in the middle, or a ring for each unit. With one ring, The ring runs out between this moment and the end on the Content tab sets when the ring starts full; without it the ring sweeps once a minute.
Align everything puts the title, the clock and the button to the left, the center or the right together, and Space between parts opens the whole thing out or tightens it up.
The clock cells holds the space between cells, their width, padding, background, border and corners; set the background and border to nothing and the numbers sit bare on your page. Digits, Unit labels, Title and Line under the title are each their own section, with font, size, weight, color, spacing and hover color, so large numbers can sit under a small headline. Where the title sits and Where the labels sit move them around the clock. End time line adds a small line with a bell and the time it ends, in the visitor's own time.
Desktop and Mobile
The editor has two screens, Desktop and Mobile. Every setting on the Design tab is kept once for each, and the buttons above the preview choose which one you are editing. 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.
The dates, the words and the link are shared by every screen. Only the look is kept per screen, which matters here: four cells that sit comfortably across a desktop can be cramped on a phone, so a smaller Digits size and narrower cells on the Mobile screen are usually worth setting. See both above the preview puts Desktop and Mobile beside each other at life size before you publish. Replay draws the widget again from the start.
Publishing and the embed code
Press Publish changes at the top right, then Copy embed code; the same code is on the Settings tab under Embed code. Paste it once where the clock should sit. Every later publish reaches that page within a minute, with nothing to paste again, so you can move the date without touching your site. 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 countdown you built comes with you.
If something goes wrong
The widget is not on your page at all. Check Do not show it before (optional) on the Content tab, and that Ends at has a date. If that moment has not arrived, or no date is set, the widget is deliberately absent from your site, even though the editor preview shows it.
It shows the ending straight away. The date in Ends at is in the past. Set a later one, choose a clock that starts again, or use the evergreen minutes instead.
The button does nothing. With Goes to the link, Button link is empty. A link needs the whole address, starting with https://.
Add to calendar says the date is not set. The clock counts up, or starts for each visitor, so there is no end to add. Fill in Event starts.
The numbers are cut off on a phone. Switch to Mobile above the preview and lower the Digits size, or untick Seconds under What the clock shows to make room.
Anything else: hello@dreamwidget.com, and tell us the widget's name.