Embed Your Timeline

There are a number of ways to embed a timeline in your website depending on which tool you're using and which Content Management System (CMS).

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

How It Works

Click the Export & Share button above your timeline, then click. Embed.

If 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?

Yes, however on narrow screens the interactive timeline will be replaced with an image followed by a list of timeline's events. On wider screens the full interactive timeline is displayed without the list of events.

Can the embedded timeline be loaded zoomed in?

Timelines have 3 possible date range settings:

Always display all of the events on your timeline
Zoom in to a specific date range
Set a date range relative to today

If your timeline uses #1 or #3, the embedded timeline will use that.

However if you've zoomed into a specific date range (#2) then by default Preceden will zoom out and display all of the events on your embedded timeline. It's done this way so that as you're working on your timeline (which may include zooming in and out) the embedded timeline is not zooming in and out too.

However, you can tell Preceden that you really do want to load the embedded timeline zoomed in by adding ?zoomed=true to the iFrame URL. For example:

Will the embedded timeline last forever?

Your account (and therefore its embedded timelines) are subject to our cancellation policy which essentially states you either need to pay or log in at least once a year for your account to be kept around (and we'll email you reminders before it's cancelled). As long as you do that, your embedded timeline will continue to work.

One alternative to embedding via in iFrame is to download your timeline as an image and add that to your website instead. This has the benefit that even if your Preceden account is deleted the image on your site will still remain, though the obvious downside is that the image won't be updated automatically as you make changes to your timeline.