Make a Timeline

TimelineJS works on any site or blog. Make your own in four easy steps. (video tutorial)

1

Create your spreadsheet

Build a new Google Spreadsheet using our template. Drop dates, text and links to media into the appropriate columns.

Google Spreadsheet Template

2

Publish to the web

Publish to Web

Under the File menu, select “Publish to the Web.”

In the next window, check “Automatically republish when changes are made.” Uncheck all other boxes. Click “start publishing.” This will give you the URL to embed in your HTML file.

3

Copy/paste spreadsheet URL into the generator box below

Google Spreadsheet or other data source URL

Make sure you've published it.

Size

Width

Height

More Options

Customize (Optional)

Language

Map Type

Due to recent changes to the Google Maps API, you need a API Key in order to use custom map types.

Fonts

Misc

Wordpress PluginIs the embed for the Wordpress Plugin? Start at the End?The most recent event will be shown first. Hash BookmarksOn each slide change, a # will be added to the end of the url in the url bar. These urls are bookmarkable so you can share or return to the same place in the timeline DebugIn debug mode, you will see console logs.

Adjust the default calculated zoom level

This will tweak the default zoom level. Equivilent to pressing the zoom in or zoom out button the specified number of times. Negative numbers zoom out.

Start at specific slide number?

Slide

You can tell TimelineJS to start at a specific slide number

4

Embed the code into your website

Grab the embed code and paste it on your site where you want your TimelineJS to appear (just like a YouTube video).

<iframe src='http://cdn.knightlab.com/libs/timeline/latest/embed/?source=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&font=Bevan-PotanoSans&maptype=toner&width=600&height=600' width='600' height='600' frameborder='0'></iframe>

Preview