How to embed links to render HTML content

This tutorial explains how you can embed links from various sources like Google Form, Google Calendar, Trello boards and so on using the HTML macro.

Content available on public domain can be easily accessed and displayed on your Confluence pages. However, to display HTML content located in restricted locations, ensure that you have the required permissions.

We recommend to use profiles to access data that are protected. An administrator specifies parameters like user name, password, and the base URL of the location to be accessed to create a profile. Users can then select this profile and provide the relative URL to the content to be rendered in the macro. Read the Configuration page for more information about profiles.

In this article, the following sources are explored:

• Google Form

• Google Calendar

• Tableau script

• Trello board

Google Form

You can embed a link or enter the URL, in case when the form can be accessed without any restrictions, of the required form.

Depending on the allocated permissions, you may be required to log in to a Google account to access the form after the page is published. It is recommended to use profiles in such cases. Read the Configuration page for more information about profiles.

Instructions

1. Ensure that you have the iframe link to the required Google Form for the sake of this tutorial. Read this article for more information.

2. Add the HTML macro to the relevant page.

3. Select HTML embed code from the Data source drop down and enter the link in the editor body. If you have the Google Form URL instead, select URL from Data source and enter the form’s URL in the URL parameter.

4. Click Insert to save changes and Publish the page.

Result

In this scenario:

• The form used is available for all at: https://docs.google.com/forms/d/e/1FAIpQLSeI8_vYyaJgM7SJM4Y9AWfLq-tglWZh6yt7bEXEOJr_L-hV1A/viewform?formkey=dGx0b1ZrTnoyZDgtYXItMWVBdVlQQWc6MQ&pli=1

• A link is being used to embed the form in the page.

• After the page is published, you can work with the form normally and save the data.

Open

Sample - Display Google Form using HTML macro

If an error pops up as shown above, ensure that your browser has enabled JavaScript. If the error still persists, go to the HTML Configuration page and verify the status of the Enable JavaScript parameter.

Google Calendar

You can add a Google calendar to your Confluence page. You can directly embed the code or enter the URL of the calendar in the HTML macro.

Depending on the calendar’s user permissions, you may have to log in to the relevant Google account to view the calendar once the page is published. It is recommended to use profiles in such cases. Read the Configuration page for more information about profiles.

Instructions

1. Get the calendar link. Refer to the links mentioned above for more information. For this tutorial, let’s use the embed code option to open and work on a Google Calendar.

2. Add the HTML macro to the required page.

3. Select HTML embed code from the Data source drop down. If you are using the public URL of the calendar, you can either enter the relevant HTML code using the HTML embed code option, or select the URL option in the drop down and enter this URL in the URL parameter.

4. Click Insert to save the changes and Publish the page.

Result

For this tutorial:

• The embed code option was used to render the calendar.

• After publishing the page, you can perform the same actions as on using the Google Calendar itself.

Open

Sample - Display Google Calendar using HTML macro

Tableau script

Tableau is a Business Intelligence (BI) tool used to analyse and visualize your data. You can display this data on your Confluence pages using the HTML macro.

Instructions

1. Get the Tableau link. Refer to this article to know more.

2. Add the HTML macro to the required page.

3. Select HTML embed code from the Data source drop down. Enter the iframe link in the editor.

4. Click Insert to save the changes and Publish the page.

Result

For this tutorial:

• The Tableau script used in the tutorial is not available for public use.

• After publishing the page, you can view and filter columns shown in the table.

Trello board

Trello boards are versatile tools used for team or project management basically creating cards to list all the tasks and tracking its progress. Like Google Form or Google Calendar, you can use a link or specify the URL to work with the required Trello board or a card from your Confluence page.

If the board is restricted to certain users or groups, you will be required to log in after the page is published. It is recommended to use profiles in such cases. Read the Configuration page for more information about profiles.

Instructions

1. Ensure that you have the link to the required Trello board. If you want to work with just a card on the board, click the required card and click Share to get the link and the URL for the card. For this tutorial, let’s use the embed code option to open and work on a board. The process remains the same to work on a card.

2. Add the HTML macro to the required page.

3. Select HTML embed code from the Data source drop down. If you are using the URL, select the URL option in the drop down and enter this URL in the URL parameter.

4. Click Insert to save the changes and Publish the page.

Result

For this tutorial:

• The board is available at: https://trello.com/b/nC8QJJoZ.html

• The board is accessed using a link.

• Selecting a card opens the card details in a new tab or window. You can perform all actions as you normally would.