Skip to Main Content


A research guide for students interested in history which includes several useful databases and sites to help you with research.

How to Make an Interactive, Multimedia Timeline Using Timeline JS

Follow these steps to make an interactive, multimedia timeline using Timeline JS:

Step 1: Go to Timeline JS & Click "Make a Timeline"

Step 2: Get the Google Spreadsheet Template


Step 3: Save the Spreadsheet to Your Drive


Step 4: Click in the Upper Left to Rename the Spreadsheet


Step 5: Delete the Data & Fill in the Spreadsheet With New Information

What each spreadsheet field looks like in Timeline:




Be as specific as you need to. End dates are optional. Use negative numbers for BCE

Display Date

Use if you want the date to display differently than the default (Example: circa 1900)


Write a headline that is brief, descriptive, & attentional-grabbing


Being concise is key here


Here is where you put the image/video/google map/etc url. Right-click and "add image location" or "add image url" to get correct url for images. Do not link to obviously infringing content. Use this field for quotes as well. Put the tags <blockquote> & </blockquote> around the quote you want to highlight. This is a good option for calling out important ideas/quotes or for adding visual appeal to content that doesn't easily associate with an image.

Media Credit

Always give attribution for your media! See the "Citing non-traditional sources" link on the "citing" tab of this guide for help citing images, video, art, etc.

Media Caption

Use to help reader interpret image and/or connect it to the text


Select title to create a title slide


Paste an image url or color hex code to change the background of the slide.




Step 6: Publish Your Spreadsheet to the Web:

screenshot of spreadsheet with the file menu open and an arrow pointed to the publish to the web option

Step 7: Copy the Spreadsheet URL from your browser address bar:



Step 8: Paste the Link Into the Box on the Timline JS Website:


Step 9: Click Preview to See What Your Timeline Looks Like:


Step 10: Copy the Embed Code to Add to Website or Brightspace D2L:


You Did It!

Ta Da! You just made an interactive, multimedia timeline!

Work-around for adding ContentDM image to Timeline JS

Useful html tags

To make text a link: <a href="url"> Text </a> Ex) Video/Image Credit: <a href=""> Green Day </a>

Italicize text: <i>text</i>

Block quote: <blockquote>text</blockquote>


Other useful links

©2024 St. Catherine University Library, St. Paul, Minnesota, USA

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License