FACULTY: Creating Interactive Timelines with TimelineJS

Overview

TimelineJS is a free, open-source tool developed by Northwestern University’s Knight Lab. It allows users to build visually rich, interactive timelines using a simple Google Spreadsheet. It is an ideal tool for history projects, biological sequences, or mapping out complex narratives in any discipline.

Before You Start: Your BSU Google Account

TimelineJS requires a Google account to access and edit the spreadsheet template.

[IMPORTANT]

BSU students and faculty do not need to create a personal Gmail account. > Your @student.bridgew.edu or @bridgew.edu email address is already integrated with Google Workspace. Simply go to drive.google.com and sign in with your full BSU email and password to access your university-provided Google Drive.

Step-by-Step Instructions

1. Get the Template

  1. Visit the TimelineJS Website.

  2. Scroll down to the "Make a Timeline" section and click the Get the Spreadsheet Template button.

  3. Click Make a copy. This saves a private copy of the template to your BSU Google Drive.

2. Add Your Content

  • Dates: Enter your start and end dates. TimelineJS can handle everything from ancient history to minutes/seconds.

  • Text: Add a "Headline" and "Text" for each event.

  • Media: Paste links to images, YouTube videos, SoundCloud clips, or Google Maps directly into the Media column.

  • Grouping: You can categorize events (e.g., "Politics" vs. "Culture") by typing a category name in the Group column to create parallel rows.

3. Publish to the Web

TimelineJS needs to "read" your spreadsheet to generate the timeline.

  1. In your Google Sheet, go to File > Share > Publish to web.

  2. In the popup, click Publish and then OK.

  3. Copy the URL from your browser's address bar (the link to the spreadsheet itself).

4. Generate & Preview

  1. Return to the TimelineJS site and scroll to Step 3.

  2. Paste your Spreadsheet URL into the box.

  3. Scroll down to Step 4 to see your preview. You can now copy the link to share it or the embed code for Blackboard.

Integrating with Blackboard

To display your timeline directly inside a Blackboard course shell:

  1. Copy the Embed Code (the <iframe> snippet) from the TimelineJS site.

  2. In your Blackboard course, create a new Document or Item.

  3. In the text editor, click the HTML or Source Code icon (<>).

  4. Paste the code and click Save.

Troubleshooting & Tips

  • Don't touch the headers: Do not delete or rename the top row of the spreadsheet; this will break the connection.

  • Empty Rows: If a slide isn't appearing, make sure you don't have empty rows between your events in the spreadsheet.

  • Need Help? Contact the Teaching and Technology Center (TTC)  at (ttc@bridgew.edu) for a 1-on-1 walkthrough.

Print Article