How to embed a countdown in your website
If you use content management or blogging software such as Blogger, Wordpress, Drupal or similar, you must ensure you are editing your content in HTML mode when you paste the embed code.
Embedding countdown widgets from CountingDownTo.com is very similar to embedding a video from a website such as YouTube.com. On CountingDownTo.com, locate the countdown that you want to embed by clicking "My countdowns" then clicking the name of the countdown you want to embed. Alternatively you can create a new countdown widget by clicking "New countdown". Below the countdown you will see a button labeled "Embed on your site". Click it. Some html code will be displayed below the button. The code will look something like the screen shot below. Copy the code and paste it into your website or blog.
Below are instructions for embedding countdown widgets in Blogger, Wordpress, Drupal and Weebly, the procedure should be similar in other systems.
If you have followed the instructions on this page but are still unable to embed your countdown, please contact us for assistance.
Which platforms can embed a live countdown?
Most sites that let you paste custom HTML or an iframe URL will show your countdown live and ticking. A few page-builder and design tools only show a static preview image instead. Here's what we've hands-on verified:
| Platform | Live countdown? | Notes |
|---|---|---|
| Wordpress (self-hosted) | Yes | Paste the embed code in HTML mode, or use our Wordpress plugin. |
| Notion | Yes |
Use an /embed
block with your countdown's direct /w4/
link (not the regular share link) so Notion iframes just the countdown, not the whole page.
|
| Canva | No | Canva's Embed element shows a static preview image for our links instead of the live countdown. This is a Canva limitation, not something you're doing wrong. |
| No | Facebook doesn't support embedding third-party interactive content directly. Share a link to your published countdown page instead. | |
| Blogger, Drupal, Weebly, Joomla!, Wix, Google Sites | Yes | Paste the embed code as custom/raw HTML — see the platform-specific instructions below. |
Haven't seen your platform here? WhatsApp and Squarespace, among others, haven't been formally tested yet — if you try one, let us know what you find.
Embed a countdown widget in Blogger
Ensure that you select "Edit HTML" NOT "Compose" before you paste the embed code into your Blogger blog. Remember that the countdown will not appear while you are editing your post. It will only appear when you publish or preview your post.
Embed a countdown widget in Wordpress
Note that while the countdown should work fine in regular Wordpress sites, it may not work in free Wordpress.com sites which do not support iframes (more info). Ensure that you select "HTML" NOT "Visual" before you paste the embed code into your Wordpress site. Remember that the countdown will not appear while you are editing your post. It will only appear when you publish or preview your post.
Update: If you're using Wordpress 5.0 or higher (released December 2018), you likely have the new Gutenberg editor. If this is the case you won't see the two tabs mentioned above. The process for embedding a countdown using the Gutenberg editor is a little different. Please follow the instructions in this video
Embed a countdown widget in Drupal
Ensure that you select "Full HTML" in the "Input format" settings before you paste the embed code into your Drupal site. Remember that the countdown will not appear while you are editing your page. It will only appear when you save or preview your page.
Embed a countdown widget in Weebly
Use the Custom HTML element to embed the countdown widget in your Weebly site.
Embed a countdown widget in Webs
Insert custom HTML by clicking HTML on the top right.
Embed a countdown widget in Webs sidebar
Embed a countdown widget in Joomla!
Please checkout these instructions for
embedding a countdown clock in Joomla!
Unfortunately the default setup of Joomla! doesn't handle Flash in the same way that other content management software does. The TinyMCE editor that Joomla! uses by default allows the user to add custom HTML code by clicking the HTML button. However, when the custom HTML is saved, the editor modifies the HTML code in such a way that the Flash will not display. You can see this by clicking the HTML button, adding some HTML, saving it. Later, click the HTML button again and notice that the HTML code that is displayed is different from what was entered. There are workarounds for this that involve changing the behavior of TinyMCE or using a different editor Mambot. In future we hope to document these workarounds but in the meantime you would need to research them yourself, or try one of the other great free content management systems out there.
You may be able to embed the countdown by disabling your wysywig editor: http://www.joomlapackages.com/help/joomla-answers/how-do-i-turn-off-my-j... or by installing the Mod HTML module: http://extensions.joomla.org/extensions/edition/custom-code-in-modules/5435.
Embed a countdown clock in Zeeblio
Use the Custom HTML add-on available by clicking Add-ons and selecting Basic.
Embed a countdown clock widget in Google Sites
When editing your content, click <HTML> in the menu at the top of the editor. Then paste the embed code we provided into the popup panel that appears.
Embed a countdown widget in WIX
Check out this video to see how easy it is to add a countdown to Wix.
Embed a countdown widget in Google Forms
Note, you can't embed our web countdowns into Google Forms, but you can actually embed our email countdowns. Please follow the instructions in this video