How to Embed a Gantt chart in Atlassian’s Confluence software

Recently we got a question from one of our users on how to embed a Tom’s Planner Gantt chart in a page in Atlassians Confluence app. You can do this by adding an iFrame to a page, but it’s not as smiple to do as we would like it to be. So here is a step by step guide:

In Confluence open the page that you would like to add the Tom’s Planner Gantt chart to. Click on the ‘insert more content’ button in the top toolbar of that page and choose the ‘Other macros’ option in the menu that appears:

This opens a window with a collection of different macros. One of the macros inserts an iFrame in your page. Iframes allow you to show web pages from elsewhere on the web right in your Confluence page. This guide will explain you how to insert an iframe with your Tom’s Planner Gantt chart in a Confluence page. 

First search for the term ‘iframe’ in the window with all the macros:

Then click on the macro called ‘iframe’. A window will open which will allow you to configure the iframe that you are going to insert in your page. You have to fill in at least two things to make this work properly. First the url (internet address) of the Gantt chart you would like to embed and secondly the width and height you would like the iframe (and so also your chart) to have.

So let’s start with the url of the Gantt chart you would like to show in the iframe. In this case the url is the internet address of your Tom’s Planner Gantt chart. 

You can find that url in the Tom’s Planner app: 

  1. open the Tom’s Planner tool in your browser
  2. open the chart that you would like to embed
  3. click on the ‘share/collaborate online’ button in the top toolbar
  4. click on the ’embed your schedule’ link in the window that just opened
  5. follow the instructions until you get to this window:


In the ’embed code’, as shown in the picture above, you can find the url of your Gantt chart that allows you to embed it on a Confluence page. It’s underlined in red. 

Copy the whole address. Be sure to start at the ‘https’ part and the end at the ‘zoom=9’ part.  Don’t include the single quotes at the start and the end! 

So in this case the complete url is: https://www.tomsplanner.com/embedded/?id=4500dd8c-f1c3-11e4-a73b-12313b0e4453&zoom=9 

If this step by step guide doesn’t give you the result you want this is the first place to check if something went wrong. Did you copy url correctly?

After you have found and copied the url we go back to the Confluence app and paste it in ‘insert iframe macro’ window we just opened:


Then you need to scroll down the left column of the window a bit to enter a width and height for the chart:

 

The width and height are set in pixels. Just play around with these settings to discover what works best for your chart and/or page. 

After you have set the width and height, you can click the insert button at the bottom of the window. The macro will insert an iframe in your Confluence Page. It doesn’t look like much when you are still editing the page but when you click on the preview button of the page the result will look something like this:


Well there you go. That’s it. You have embeded a Tom’s Planner Gantt chart in your Confluence page. Good work. Time for another cup of coffee I would say.

Join 178,117 customers and have your first
Gantt chart live today!