Generating an Embeddable Dashboard Snippet
You can generate an embeddable snippet for a dashboard using the UI.
To generate an embeddable snippet for a dashboard:
Log into the UI as an administrator or as a user assigned to a group with the Can Generate Embed Codeprivilege.
Locate the dashboard in the dashboard library list for which you want to generate an embeddable snippet.
Select in the associated Actions column. The Embed Code dialog appears.
The Code section of this dialog shows the embeddable snippet. If you do not need to change any of the default settings on this page, simply select and you can skip the rest of these steps and embed the copied snippet in your application.
If, however, you want to alter the default settings on this dialog, continue with the rest of these steps. Note as you change settings that the embeddable snippet is updated automatically. All settings are optional.
The default width setting (100%) is shown in the Width box. Click in the box and enter the width value you want in CSS units. For example,
80vware all valid settings.
The default height setting (100%) is shown in the Height box. Click in the box and enter the height value you want in CSS units. For example,
80vhare all valid settings.
Select a mode in the Mode box. The mode setting determines the way in which your users will be able to work with the embedded dashboard. If you do not want the user in your application to change anything and only be able to view the dashboard, select Read Only. If you want your users to be able to make changes to the dashboard, select Interactive. The default is Interactive.
The level of interactivity a user has with an embedded dashboard is determined by the interactivity settings of each visual in the dashboard. See Controlling How Users Interact With a Visual.
Select a theme in the Theme box. By default, three possible themes are available: Logi-Composer, Logi-Modern, and Logi-Dark. However, if you add your own themes to the application, more options are available in this list. The default is Logi-Composer, which is the same as the Logi-Modern theme. For information on adding your own UI themes, see Manage UI Themes.
To view advanced settings for the embedded snippet, select . The Embed Code dialog expands to show additional settings.
In the Root box, specify a CSS selector for the element in which the dashboard snippet should be placed. This setting defaults to the parent of the
<script>element of the embed script. Valid values include such things as the name of an element (for example,
body), the ID of an element, (for example,
#container), or a classname, (for example,
.classname). The dashboard snippet will be embedded inside the first element found matching the CSS selector you specify.
By default, Composer generates a unique embed ID for each snippet, generated from the current time. In the Embed ID box, you can specify a unique identifier you prefer. This identifier is appended to the
logi-embed-HTML ID of the container. For example, if you specify
myembedin the Embed ID box, the element will have the HTML ID
Slide the Show Banner slider to the right (on) to show the top-level navigation banner in your embedded dashboard snippet. Links on the banner will appear in your application, as appropriate, and allow for a partial self-service Composer experience by your user. By default, this slider is off.
When you turn this option on, you are provided with an option to show the Composer logo.
Optionally, slide the Show Logo slider to the right (on) to show the Composer logo in you embedded dashboard snippet. By default, this slider is off.
Slide the Show Header slider to the right (on) to show the dashboard or visual editor header in your embedded dashboard snippet. These headers can include a breadcrumb, the title, and the action buttons and menus for the dashboard. By default, this slider is off.
When you turn this option on, you are provided with options to show the dashboard title and to show the dashboard actions in your embedded dashboard snippet.
Optionally, slide the Show Title slider to the right (on) to show the dashboard title. When you turn this option on, an option to show the breadcrumbs appears. Optionally, slide the Show Breadcrumb slider to the right (on) to show the breadcrumb in the embedded dashboard snippet. By default both of these sliders are off.
Optionally, slide the Show Actions slider to the right (on) to show the dashboard actions with the embedded dashboard snippet. By default this slider is off.
When this slider is on, some actions, ordinarily available to users who develop your visuals and dashboards, will not be available for the users of the application in which a dashboard is embedded. The actions available are determined by the mode setting (see Step 7) and by the user permissions for dashboards and visuals.
When all of the optional settings are specified as you need, select to copy the embeddable dashboard snippet to the clipboard. You can then proceed with actually embedding the snippet into your application code.
Close the Embed Code dialog by selecting the x in the upper right corner of the dialog.