Embed Your Timeline

Preceden allows you to embed timelines on other websites using an HTML IFRAME.

Note that when you embed your timeline, it will just show the timeline and not the list of events below it. If you have a Pro or Premium account you can work around this by making the timeline password protected and linking to it from the website.

How It Works

Click the Export & Share button above your timeline.

f you would like to embed your timeline on other websites, check the box that says Allow this timeline to be embedded in other websites:

You'll then be shown an HTML code like this that you can copy and paste to embed the timeline in other websites:

<iframe src="https://www.preceden.com/timelines/1/embed" width="100%" height="466" frameborder="0">
 <a href="https://www.preceden.com" target="_top">Preceden Timeline Maker</a>
</iframe>

Private and Password Protected Timelines

When a timeline is public, the URL in the IFRAME will look something like this:

https://www.preceden.com/timelines/1/embed

When the timeline is private or password protected, there will be additional numbers and letters at the end of the URL:

https://www.preceden.com/timelines/1/embed/16bb5c75d9c2ef8c8d69f2ab4fd131fe

This extra code makes it next to impossible for anyone to guess the URL, which means that only the people you want to see the timeline can access it.

Update the Height Value in the IFRAME When Your Timeline Changes

The IFRAME has a height value that is set to the height of your timeline based on its height right now. For example, in the HTML code above the height is set to 466.

If you add more layers or events to your timeline after you embed it somewhere, the embedded timeline may wind up displaying a scroll bar and viewers will have to scroll down to see the new content.

To fix this, click the Embed link below your timeline like you did originally, make a note of the new height value, and update the embed code on your website accordingly.

FAQs

Does embedding work on mobile?

Kind of - I your embedded timeline is viewed on smaller screen, the timeline visualization will be hidden and replaced with a list of the layers and events. It's not possible to render the full visualization on narrow screens which is why it behaves like this.