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.
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.
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.