Embed Your Timeline
There are several ways to embed a timeline in your website, depending on which tool and which content management system (CMS) you're using.
You can embed a Preceden timeline on other websites using an HTML iFrame.
How It Works
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" 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:
https://www.preceden.com/timelines/1/embed/16bb5c75d9c2ef8c8d69f2ab4fd131fe
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.
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
Viewers can scroll left and right on the timeline, but only so far, so they may not be able to reach all of its content at the zoomed-in level.
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.