Preceden

3 Ways to Embed a Timeline on Your Website

Learn how to embed your timeline using an image, iFrame, or JavaScript

If you're looking to embed a timeline in your own website, you have a number of options which we'll outline below:

1. Image

Every timeline maker should let you export your timeline as an image (or if not you can simply take a screenshot). Every website supports displaying images, so if you're fine simply displaying a static image, this is your easiest and most reliable option.

However, if you would prefer your embedded timeline be interactive, things become a bit more complicated because your options will depend on the capabilities of your Content Management System (CMS).

Pros:

  • Every CMS and web page will allow you to embed images
  • You can generate an image for any timeline maker, either using their built-in export features or by taking a screenshot

Cons:

  • Your embedded timeline will not be interactive
  • Your embedded timeline will not automatically update as you make changes to your timeline

2. HTML iFrames

If your CMS supports iFrames (an inline frame), then you'll be able to include interactive timelines from timeline makers that support them. For example, there are a variety of methods for embedding iFrames on WordPress sites.

The iFrame code will look something like this:


<iframe src="example.com"></iframe>

For example, with Preceden, the embed code will look like this:


<iframe
src="https://www.preceden.com/timelines/1234/embed"
width="100%"
height="503"
frameborder="0">
</iframe>

Pros:

  • Easy to use, assuming your CMS supports iFrames
  • Your embedded timeline will automatically update as you make changes to your timeline

Cons:

  • Not every CMS supports iFrames
  • Downloadable timeline maker tools would not support iframes, only web-based ones
  • You can't programatically adjust the content of the embedded timeline (more on that below)

Tools that support iFrames:

3. JavaScript widget

There are also several open source timeline makers that you can use. They will allow you to host all of the code for generating the timeline yourself. You then use code to add content to your timeline. You can have the content be static for timelines that won't change much over time, or you can tie the code to your internal database to build the content dynamically.

Pros:

  • You host all of the code yourself
  • You programatically add content to your timeline

Cons:

  • Requires programming knowledge and the ability to add third party code to your website
  • The widget is not automatically updated on your site if the tool's creators make changes to it

Tools that support JavaScript widgets:

Conclusion

Here's how we would recommend making the decision:

  • If you don't care about your timeline being interactive or if your CMS doesn't support iFrames, use an image
  • If you want your timeline to be interactive and your CMS supports iFrames, use an iFrame
  • If you need to programatically generate the timeline content, use a JavaScript widget