The best way to embed a map, timeline or any other third party platform into a Scalar page is by using an iframe tag (read more about iframes here). Here's how to do it.

1. Click edit at the bottom of the Scalar page in which you wish to insert your map, timeline or other third party material.


2. Click the HTML tab at the top of the page editor.


3. Find the url where the map, timeline or other material resides.


4. Paste the code below into the html editor, being sure to insert the url you have inside the quotation marks after src=. Also be sure to include http:// at the beginning of the url you're using.

<iframe src="[your url]" frameborder="0" height="650" width="100%"></iframe>

Using your own url, your code should then look something like this:

<iframe src="http://www.tiki-toki.com/timeline/embed/137152/4308693385" frameborder="0" width="100%" height="650" ></iframe>

And the page with embedded material should look like this.

Frameborder defines the width of the border around the material inside the iframe; a frameborder of 0 means there is no frame; a frameborder of N (frameborder="N") will place a border N pixels wide around the material.

Width sets the width of the material displayed. Width can be set to pixels or percentages. Setting the width to 100% (as in the example above) allows the iframe to expand to the maximum width allowed inside the main content area of a Scalar page.

Height sets the height of the material displayed. In the example above, we've set the height to 650 pixels.

Click below to see examples of Scalar pages with third party platforms embedded.

Begin this path

1. Story Map Embedded in a Scalar Page
2. Neatline Embedded in a Scalar Page
3. Tiki-Toki Embedded in a Scalar Page
4. TimelineJS Embedded in a Scalar Page

Comment on this page