WeddingTimer

WeddingTimer

Complete guide

How to add a wedding countdown to any website

From Squarespace to Canva, WordPress to Wix — this guide covers every platform and every use case. No coding required.

What is it?

A beautiful, embeddable wedding countdown timer

WeddingTimer is a free, lightweight widget that displays a live countdown to your wedding day. It updates every second, adapts to any screen size, and transforms elegantly into a "Just Married" message once your date arrives.

Built with modern web standards (HTML5, CSS3, JavaScript), it works inside any platform that supports HTML embeds — no plugins, no extensions, no accounts needed.

Real-time updates

Days, hours, minutes and seconds ticking down automatically.

Fully responsive

Looks perfect on phones, tablets, laptops and desktops.

Customizable

Colors, fonts, layouts and wording — all adjustable.

Zero maintenance

Set it once, forget it. No updates or fixes needed.

Getting started

4 simple steps to your wedding countdown

01

Configure your countdown

Visit the Generator page and enter your details:

  • • The Couple: Your names (e.g., "Emma & Leo" or "Sarah and Michael")
  • • Wedding Date: The exact date of your ceremony
  • • Title: A subtitle like "Our journey to forever" or "Counting down to I do"
02

Choose your style

Select from four elegant layout options:

Classic

Traditional four-column grid with days, hours, minutes, seconds

Progress

Horizontal bar showing journey completion percentage

Ring

Circular dial with days remaining in the center

Minimal

Ultra-clean design with large day count

03

Customize the design

Make it yours with these options:

  • • Background: Choose from presets (white, ivory, blush, sage) or pick any custom color
  • • Text Color: Match your wedding palette with any hex code
  • • Typography: Minimalist sans-serif, elegant serif, or romantic script

Pro tip: Use the live preview on the right to see changes instantly before copying the code.

04

Copy & embed

Click the "Copy Code" button to copy your personalized iframe snippet. It looks like this:

<iframe src="https://weddingtimer.com/widget.html?names=Emma%20%26%20Leo&date=2026-08-15&bg=%23FAF6F0&text=%232D2A26&font=serif&layout=classic" width="100%" height="280" style="border:none; background:transparent;" allowtransparency="true"></iframe>

Paste this code into any HTML block on your website. See platform-specific instructions below.

Platform guides

How to embed on every platform

Step-by-step instructions for the most popular wedding website builders and design tools.

S

Squarespace

Difficulty: Easy • Time: 2 minutes

  1. 1. Open your Squarespace site editor and navigate to the page where you want the countdown.
  2. 2. Click the "+" button to add a new section, then select "Code" or "Embed" from the block menu.
  3. 3. Paste your WeddingTimer iframe code into the code block.
  4. 4. Click "Apply" or "Save" — your countdown will appear immediately.
  5. 5. Adjust the block width if needed by dragging the edges.

Note: Squarespace sometimes strips iframe tags in preview mode, but they work correctly on the live site.

W

Wix

Difficulty: Easy • Time: 2 minutes

  1. 1. In the Wix Editor, click "Add" (+) in the left sidebar.
  2. 2. Select "Embed" → "Embed HTML".
  3. 3. Choose "Enter your code" and paste your WeddingTimer iframe snippet.
  4. 4. Click "Update" and position the element wherever you want it on your page.
  5. 5. Resize by dragging the corners — the countdown is fully responsive.
W

WordPress

Difficulty: Easy • Time: 1 minute

Gutenberg (Block Editor)

  1. 1. Edit your page or post in Gutenberg.
  2. 2. Click the "+" to add a block, search for "Custom HTML" and select it.
  3. 3. Paste your iframe code into the HTML block.
  4. 4. Click "Preview" to see it, then "Update" or "Publish".

Classic Editor

  1. 1. Switch to the "Text" tab (not "Visual").
  2. 2. Paste your iframe code directly into the editor.
  3. 3. Switch back to "Visual" to preview, or publish directly.

Elementor / Divi / Other Page Builders

  1. 1. Add an "HTML" or "Code" widget/module to your layout.
  2. 2. Paste your iframe code into the widget's content area.
  3. 3. Save and preview.
W

Webflow

Difficulty: Easy • Time: 2 minutes

  1. 1. In the Webflow Designer, add an "Embed" element from the Add panel.
  2. 2. Click the embed element and open its settings.
  3. 3. Paste your WeddingTimer iframe code into the "Custom Code" field.
  4. 4. Click "Save" and position the element in your layout.
  5. 5. Publish your site to see the countdown live.
C

Canva

Difficulty: Medium • Time: 3 minutes

Important: Canva websites support iframe embeds, but Canva designs (images/PDFs) do not. This method works only for Canva Websites, not static designs.

  1. 1. Open your Canva Website project (not a regular design).
  2. 2. Click "Embed" in the left sidebar (looks like </>).
  3. 3. Select "HTML Embed" or "Custom HTML".
  4. 4. Paste your WeddingTimer iframe code.
  5. 5. Position and resize the embed block on your page.
  6. 6. Publish your Canva website to see the live countdown.

Alternative: If you're designing a static invitation in Canva, export it as an image and add the countdown to your actual wedding website instead.

N

Notion

Difficulty: Easy • Time: 1 minute

  1. 1. Open your Notion page and type "/embed" to insert an embed block.
  2. 2. Paste your WeddingTimer iframe code (or just the URL: https://weddingtimer.com/widget.html?...).
  3. 3. Press Enter — Notion will automatically render the countdown.
  4. 4. Resize by dragging the edges of the embed block.

Note: Notion works best with the URL-only format. If the full iframe doesn't render, try pasting just the src URL.

F

Framer

Difficulty: Easy • Time: 2 minutes

  1. 1. In the Framer editor, click the "+" icon to insert a new element.
  2. 2. Search for "Embed" and select the Embed component.
  3. 3. Paste your iframe code into the embed settings.
  4. 4. Position and resize the element on your canvas.
  5. 5. Preview or publish to see the live countdown.
</>

Custom HTML / Any Website

Difficulty: Easy • Time: 30 seconds

  1. 1. Open your HTML file in a code editor.
  2. 2. Paste the iframe code wherever you want the countdown to appear (inside the <body> tag).
  3. 3. Save and upload to your server, or preview locally.

Works on: Shopify, Ghost, Jekyll, Hugo, static site generators, or any platform that accepts HTML.

Common questions

Frequently asked questions

Yes, absolutely. The countdown uses responsive design with CSS clamp() for fluid typography and a 100% width iframe, so it adapts perfectly to any screen size from phones to large desktops.

No. Once you set your wedding date and embed the code, the countdown updates automatically every second. When your wedding day arrives, it transforms into a "Just Married" message — no maintenance required.

Yes. Simply go back to the Generator, make your changes, copy the new code, and replace the old iframe in your website. The countdown configuration is encoded in the URL, so you can regenerate it anytime.

No. The widget runs in a sandboxed iframe and loads fonts asynchronously. It doesn't block your page rendering, doesn't affect SEO scores, and uses minimal bandwidth (under 1KB for the embed code itself).

Absolutely. While designed for weddings, the countdown works beautifully for engagements, anniversaries, baby showers, proposals, honeymoons, or any milestone worth counting down to. Just change the names and subtitle.

Most modern platforms support iframes. If yours doesn't, you can use a screenshot of the countdown (though it won't be live), or consider using a platform that does support HTML embeds for your wedding website.

Yes, completely free with no strings attached. No premium tiers, no watermarks, no usage limits, no expiration. Generate unlimited countdowns for unlimited weddings.

Ready to start counting down?

Create your personalized wedding countdown in under 60 seconds. No account, no credit card, no fuss.

Go to Generator →