How to Work with Custom Iframes within Dashboards

Dashboarding is a powerful tool to display information to your clients - and sometimes, you may need to reach into other tools to bring in valuable information.

For that, you must turn to the HTML widget within the dashboards.

Note: This article is specifically for iframes, so it'll be light on instructions on how to set up dashboards in totality. If you're looking for more general help on creating and setting up dashboards, see this article.

• Create the Dashboard(s)
• Add the HTML Widget
• Add the Iframe Code

1. Create the Dashboard(s)

In CloudRadial, a dashboard is nothing more than a frame that holds together multiple widgets/gauges.

The first step is to create the dashboard, either locally on a specific company's account or within Partner > Content with a dashboard content package.

2. Add the HTML widget

1. Once the dashboard has been created, you will need to add an HTML widget
   
   • If you created the dashboard within Partner > Content:
     • Select the dashboard you created
     • Navigate to the Layout tab
     • Select the +Add Widget button at the top right
   • If you created the dashboard on a specific client's Account > Dashboards area:
     • Select the dashboard tab you created
     • Select the +Add Widget button at the top right
       
       
2. Add the HTML widget from the list of available widgets.
   • • • It is listed under the Miscellaneous section
       • You can also search for it in the search dialogue

Once the widget has been placed on the dashboard, you can drag it to re-arrange and re-size it as you see fit, as long as the Dashboard Elements panel is open. This is the panel that opens when you select +Add Widgets.

3. Add the Iframe Code

Once the HTML widget(s) are added, you'll need to insert the iframe code within the widget.

To access the code editor:

1. Select the 3 blue-dot menu at the top right of the widget
2. Select the Settings option
   
   
3. Select the Code View (</>) option 
   
                                  
   
   
4. Enter in your HTML code
   • (Optional) Below, you will find sample HTML code that will work for most iframes. Just remember to replace the link portion with the data source you wish to add in:

   • <p>
     <iframe width="100%" height="750" src="YourURLSourceGoesHere" frameborder="0" allowfullscreen="true"></iframe>
     </p>

      

5. Select the same Code View (</>) button to finalize code input
   • Once the code is saved, you will instantly see a preview of it working
6. Finalize the widget creation
   • If you're creating this widget locally (within a specific company client's Account > Dashboards area), select the Save button to finalize the HTML widget/dashboard.
     
     
   • If you're creating a widget within Partner > Content, swap to the Details tab of the dashboard and select Submit at the bottom of the tab to finalize the HTML widget/dashboard. Don't forget to Publish your changes so your customers can see them!