(v23) Generate a Visual Gallery HTML Snippet

Generate a Visual Gallery HTML Snippet

This applies to: Visual Data Discovery

You can generate an embeddable HTML snippet for the visual gallery using the UI.

Generate an embeddable HTML snippet

1. Log into the UI as an administrator or as a user assigned to a group with the Generate Embed Code privilege.

2. Select the Visual Gallery option from the Tools menu in the main menu. The visual gallery appears.

3. Select the embed library icon () above the list of visuals. 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 Copy to Clipboard 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.

4. The default width setting (100%) is shown in the Width box. Select the entry field, then enter the width value you want in CSS units. For example, 800px, 75%, 500em and 80vw are all valid settings.

5. The default height setting (100%) is shown in the Height box. Select the entry field, then enter the height value you want in CSS units. For example, 800px, 75%, 500em and 80vh are all valid settings.

6. 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.

7. When all the optional settings are defined as you need, select Copy to Clipboard to copy the HTML snippet to the clipboard. You can then paste the this snippet into your application code.

8. Close the Embed Code dialog by selecting the x in the upper right corner of the dialog.