How to embed a timeline in your website, blog post or news article.

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 - Copy paste embed code

After you have set your timeline to public, you are able to see the embed code. This is displayed into a textblock which you can easily copy to your clipboard. Below you see the example of the embed car of apple car.

<iframe id="6OKltBf525gC3RNOzMET" loading="lazy" width="100%" height="600" title="Steve Jobs" src="https://timepath.co/embed/steve-jobs/6OKltBf525gC3RNOzMET" frameBorder="0" scrolling="yes"></iframe><script type="text/javascript">(function(){window.onmessage=(e)=>{if ( e.origin==="https://timepath.co" && e.data.hasOwnProperty("frameHeight") ){document.getElementById(e.data.timelineId).height=`${e.data.frameHeight}`;}};})();</script>

Step 9 - 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. Click on add custom code and simply copy paste the embed code into the code block and press save.

Step 10 - Publish

After you have copy pasted your embed code into your CMS you can publish your page. All the changes you make in your timeline editor on Timepath are automatically updated to your timeline. This means that you do not need to embed your timeline again after you made some changes. That is the power of Timepath!

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!