Embed Your Timeline
You can embed a Preceden timeline on another website using an HTML iFrame, which is what this article covers. If you are still deciding how to embed a timeline at all, 3 Ways to Embed a Timeline on Your Website compares an iFrame against the alternatives.
Get the embed code
Click the Share button above your timeline, then click Embed.
Check the box that says Allow this timeline to be embedded in other websites.
Preceden then shows you HTML like this to copy and paste into your site:
<iframe src="https://www.preceden.com/timelines/1/embed/16bb5c75d9c2ef8c8d69f2ab4fd131fe" width="100%" height="466" frameborder="0"> <a href="https://www.preceden.com" target="_top">Preceden Timeline Maker</a></iframe>
Finally, click Save Embed Settings. The embedded timeline will not load until you save.
Embed URL
The URL in the embed code ends with an extra string of numbers and letters, like 16bb5c75d9c2ef8c8d69f2ab4fd131fe in the example above. That string makes the URL nearly impossible to guess, so only people who load your webpage can see the timeline. The one exception is a visitor who copies the embed URL and shares it with someone else.
The string is left off only for older timelines that are still set to Public, since anyone can already view those.
Update the iFrame Height When Your Timeline Changes
The height value in the iFrame is your timeline's height at the moment you copy the code. In the example above it is set to 466.
If you add more layers or events after embedding it, the embedded timeline may display a scroll bar, and viewers will have to scroll down to see the new content.
To fix this, open Share > Embed again, note the new height value, and update the embed code on your website to match.
FAQs
Does embedding work on mobile?
Yes. On narrow screens the interactive timeline is replaced with an image followed by a list of the timeline's events. On wider screens viewers get the full interactive timeline without the list.
Editing is more limited than viewing, so see Offline or Mobile Version of Preceden if you want to build a timeline from a phone.
Can the embedded timeline be loaded zoomed in?
Timelines have three 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 uses the same setting.
If you've zoomed into a specific date range (#2), the embedded timeline zooms out by default and displays all of your events. That way the embed stays put instead of zooming in and out every time you do while working on the timeline.
To load the embedded timeline zoomed in anyway, add ?zoomed=true to the iFrame URL. For example:
https://www.preceden.com/timelines/1/embed?zoomed=truehttps://www.preceden.com/timelines/1/embed/16bb5c75d9c2ef8c8d69f2ab4fd131fe?zoomed=true
The embedded timeline doesn't have a scroll bar, but viewers can click on it and then use the left and right arrow keys to move earlier or later in time. They can only go so far, though, so they may not be able to reach all of its content at the zoomed-in level.
How do I stop my timeline from being embedded?
Open Share > Embed, uncheck Allow this timeline to be embedded in other websites, and click Save Embed Settings. Every site that already has your embed code stops loading the timeline right away, so you don't need to track down each copy of the code.
The embed URL doesn't change when you do this. If you check the box and save again later, the code already on those sites starts working again.
Will the embedded timeline last forever?
Your account, and therefore its embedded timelines, is subject to our cancellation policy: to keep the account you need to either pay or log in at least once a year. We'll email you reminders before anything is canceled, and as long as you do one of those, your embedded timeline keeps working.
One alternative to an iFrame is to download your timeline as an image and add that to your website instead. The image stays on your site even if your Preceden account is deleted, but it won't update automatically as you change the timeline.