HTML widget: overview

Our HTML widget is a robust tool for users who wish to add custom content to their dashboard environment.  You can iframe videos or webpages, represent data using a selection of Javascript libraries -- Backbone.js, Highcharts, d3.js -- or simply write HTML code directly within the app.

To get started, navigate to the services pane on the left side of the app (blue “+” button).  Select “Custom Content” and then the “<HTML>” tile -- you’ll notice that a new widget has been deployed to your dashboard.

html overview 1

html overview 2

Now that you have your widget, you need to specify if you will be using HTML or one of the integrated Javascript libraries to populate your widget.  Hit the gear icon at top right of your widget and select the “Edit Widget Settings” menu.

html_overview_3_02

You’ll immediately be defaulted to the “Widget Settings” tab where you can select a Javascript library.  If you would like to use HTML code, you do not need to check a box.  Simply hit the save button and by default the widget will be prepared to accept / process your HTML.

Please note: you cannot add HTML to your new widget prior to entering the “Edit Widget Settings” menu and hitting the “Save” button.


html overview 4

Now that you’ve specified your library of choice, you’ll want to start adding your script.  To do so, you’ll once again need to navigate to the gear icon at top right of your widget -- this time select the “Add Data” menu.  You’ll then be presented with a large text field where you can enter your code.  Just be sure to hit the “Save” button once you’ve made your changes!

html_overview_5_02

html overview 6

Was this tutorial helpful?  Please take a moment to submit your “Yes” or “No” answer below!  You can also contact us or post a public question for further instruction.

Did you find this article helpful?