HTML Content widget

Use the HTML Content widget to display custom content on your digital workplace's pages, spaces, and dashboards. The HTML Content widget leverages the WYSIWYG editor to create content that includes text, images, videos, and embedded content from elsewhere in your digital workplace or third-party sources. 

Sections in this article:

Considerations and caveats

  • JavaScript in the WYSIWYG editor. Refer to our Developer KB article Accessing the WYSIWYG editor to learn more about how to use JavaScript in the WYSIWYG editor.
  • Embedded content is not showing. When you embed content from a third-party site, ensure that the URL is for a site that uses SSL. Your digital workplace will not display content from sites that do not use SSL. URLs from sites that use SSL will begin with HTTPS instead of HTTP.
  • Page load times. HTML Content widgets can run complex code, display high-quality images, and pull information from a variety of sources inside your site and out. All these functions can increase the load time of a page, especially if they are waiting on third-party services for data. 

Set up

Follow these steps to set up this widget:

  1. Place a  HTML Content widget on a page, space, or dashboard. For more information, see Placing and setting up a widget. 
  2. Select the placed widget's Edit button.
  3. Review and make changes to the settings on the Options and Appearance tabs. You can find details about the widget's settings in the Settings section below.
  4. In the widget editor, select Update to apply your changes or Cancel to discard them.  
  5. At the bottom of your page, space, or dashboard, select Publish or Save as Draft to save your changes.

Settings

Setting Description
Title

Enter a title for the widget. The title appears as a heading above the widget's contents. You should use the title to provide context to the widget and better structure a page's content by clearly denoting different sections.

When entering a title, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select  Translation and enter a title for each supported language. 

This field can contain a maximum of 140 characters.
Content

 Enter the content that the widget displays. For more information about the WYSIWYG editor, see WYSIWYG editor. Common workflows include: The WYSIWYG editor in the HTML widget does not include the Embed URL option for embedding graphical links to third-party sources.
Show content to:
 Select who can view the widget. Options include:
  • Everyone
  • Members Only
  • Non Members Only
Options tab
Setting Description
Class Enter CSS class selectors to provide additional styling to the widget. For more information, see Applying custom CSS to widgets.
Height Select the height of the widget. Options include:
  • Auto: The leftmost slider position. The height of the widget will increase and decrease to contain what it is displaying.
  • Fixed: Select a fixed height between 50px to 600px in increments of 50px. A vertical scrollbar will appear on the widget if the content exceeds this fixed value.
Appearance tab

Note

Your digital workplace's theme overwrites many of the settings on the Appearance tab. However, the settings listed above are usable.

How users interact with it

What content you put in the HTML Content determines how users can interact with it. Some potential use cases include:

  • Static banners and messages
  • Welcome videos on a landing page
  • Embedded surveys and documents
  • Custom functionality (e.g., displaying a media feed, or the weather)