how to embed a timeline with Timepath

How to embed a timeline in your website

A timeline is a great way to increase the engagment with your readers. You are able to tell your readers in a chronological and visual way what happend over time. Our data shows that the time spend on site increases when a timeline has been added to your article. In this blog post we will explain how to embed a timeline in your website, blog post of news article. In this example we have build a timeline about Apple's car project and we are going to embed it in this blogpost.


How to embed a timeline in 10 steps

Step 1 - Create a timeline

We will start with creating our timeline about Apple's car project by clicking on 'create timeline'. Please notice that you must have an account in order to perform this action.

Step 2 - Add events

In the timeline editor you start adding events to your timeline. If you need to know how to build a timeline. Check out our blog post on how to build a beautiful timeline with Timepath

Step 3 - Customize timeline

After you have finished building your timeline it is time to customize fonts and styles so it blends in with your design. To start customizing your timeline click on the 'build' icon in the top right corner. The customize toolbar will appear on the right side of your screen.

Step 4 - Change fonts & styles

In the customize toolbar you are able to change the fonts and colors of your timeline.

Step 5 - Preview your timeline

After customizing your timeline it is important to view your timeline in preview mode. This will give you an idea how your final timeline will look like.

Step 6 - Publish your timeline

If all is good, you are able to publish your timeline. You can do this by clicking on the 'share button' in the top right corner.

Step 7 - From private to public

By default your timeline is in private mode. If you want to embed your timeline in your website, blog post or news article you need to make your timeline public. You can do this by clicking on the 'public' mode and hit the save button.

Step 8 - Determine height of iframe

Before you can copy paste the embed code into your website, it is important to determine the height of your timeline. The default value is 600px. If you want to change this you simply replace 'height=600' to what ever number you want.

Step 9 - Dynamically change height

It is also possible to change the height dynamically. To make this work you must wrap your iframe into a div and add custom styling. You can copy paste this example.

Step 10 - Copy paste iframe code

Now it is time to copy paste your iframe code into your website, blog post or news article. Depending on what CMS you use in the editor mode there is a 'custom code' mode.


Final result

Below you will see the final result of our timeline that we have build and embedded into this article:

Nex steps

Once you have embedded your timeline, you can monitor the performance of your article. According to our data the average reading time of a timeline is around 2 minutes. This could mean that your readers will stay longer on your website. This offers the ability to keep them engaged and increase the likehood that they will share your article including your timeline. Interested in trying out? Create a free timeline on Timepath and start enriching your articles!