How to Add an Event Progress Bar to WordPress

An embedded event page shows the percentage completed and the time left, and refreshes itself every time a visitor loads it. You do not have to touch the post again after publishing.

Get the embed code

1. Create an event.
2. On the event page, click Embed in the Share section.
3. Choose Normal or Compact and copy the code.

The code is a standard iframe pointing at the embed version of your event:

<iframe src="https://eventcompletion.com/embed/your-event-slug?mode=normal"
  width="100%" height="420" frameborder="0" scrolling="no"
  title="Event progress"></iframe>

Use mode=compact and a height of about 220 for the shorter card.

Method 1: Custom HTML block

In the block editor, add a Custom HTML block and paste the iframe. This works on any WordPress site that lets you add HTML to a post.

Method 2: Shortcode

If you embed events often, add a small shortcode to your theme’s functions.php or a code-snippets plugin:

function eventcompletion_shortcode($atts) {
  $slug = sanitize_title($atts['slug'] ?? '');
  $mode = ($atts['mode'] ?? 'normal') === 'compact' ? 'compact' : 'normal';
  $height = $mode === 'compact' ? 220 : 420;
  return '<iframe src="https://eventcompletion.com/embed/' . esc_attr($slug) . '?mode=' . $mode . '"'
    . ' width="100%" height="' . $height . '" frameborder="0" scrolling="no" title="Event progress"></iframe>';
}
add_shortcode('eventcompletion', 'eventcompletion_shortcode');

Then use [eventcompletion slug="your-event-slug"] or [eventcompletion slug="your-event-slug" mode="compact"] in any post.

Page builders

The same iframe code works in the HTML widget of Elementor, the Code module of Divi, and the Custom HTML block of Gutenberg.

Tips

• Give the iframe the full width of its container so it scales on mobile.
• If content gets cut off on small screens, increase the height a little.
• Some security plugins block iframes from other domains. If the embed does not appear, allow eventcompletion.com.

Next steps

• Add events to Notion
• Countdown timers for product launches