How to design and embed a custom timeline slider in your website with Timeline JS

As part of the project to define, develop and foster our own company’s culture, we have crafted a welcome kit we are proudly handing over to the new members of the team.

The Appszoomer Ultimate Survival Guide (that’s the humble name we’ve given to it) is in web format and teaches the newbies the basics of our company: our history, our mission and values, our jargon, and our daily routine.

Developing the Survival Guide in a landing page format was both fun and a learning process. However, we had to deal with some design crunches. One of them was how to create and embed a Javascript-based timeline for the history section.

Fortunately, we came across an excellent solution: Timeline JS.

Timeline JS is an open-source tool that lets you build outstanding interactive timelines seamlessly.

Signing up isn’t required. Just go to the website and hit Make a timeline now. You’ll be taken to the instructions page where you can actually design, customize and get the outcome of your creation as an <iframe>.

First off, you must create a copy of the Google Drive Spreadsheet template you are given. Simply open the template and hit the Use this template button to copy it to your Google Drive account.

Next step is filling up cells with your data. You can check in the template which fields are required and which ones are optional. Add a start/end date, a headline for the event, the containing text, and those media files you want to attach (video, photo, gifs…). Bear in mind that you have to provide a working link to each media source. We did it by uploading images to Dropbox and Imgur.

You can preview the timeline from Timeline JS website. Once you are done editing, hit File > Publish to the web from the spreadsheet. That will generate your javascript timeline slider and will output an iframe to the Timeline JS website, which you can embed into your own website.

Of course, you can tweak some style parameters either from the Timeline JS website or your css file (width, height, font, starting slide…) – but not everything.

Since the content of the timeline is being broadcasted in real-time from the spreadsheet, you can modify it at anytime by adding or removing data. Just refresh your webpage to see the changes.

In short, Timeline JS is an elegant, easy to implement solution if you need a Javascript-based timeline.