Trending content widget

You can use the Trending Content widget to display content from connected channels ordered by recent views, likes, or comments. Users can interact with the displayed content by viewing, liking, sharing, or bookmarking it.

The trending content widget can only display content from the following channel types:

Trending Content Gadget Displaying Three Articles

Sections in this article:

Considerations

  • Keyboard Navigation: The following functionality of the widget does not support keyboard navigation:
    • Bookmark button
    • Add a Personal Bookmark pop-up
  • Firefox web browser: When using Firefox, selecting the Share or Bookmark buttons will cause the browser window to jump to the top of the current page. If your organization uses Firefox, we recommend hiding the Share and Bookmark buttons from the widget.
  • Images: If no feature image or image in the content is found, the widget can be configured to display the workplace logo, a custom fallback image, or nothing.

Who can do this?

  • Enterprise administrators
  • Workplace administrators
  • Space administrators
  • Members of the digital workplace with Edit or Full access

Language support

  • Widget text: All widget interface text and tooltips have translations for all platform languages, excluding Croatian and Slovenian.
  • Widget configuration: The configuration options for the widget are displayed in English.
  • Content objects: If the content being displayed in the widget has a version available in the selected language, it will be displayed in the widget.
  • Files: The platform does not support file languages, so file names and descriptions will appear as they are uploaded to the digital workplace.
  • Error messages: Error messages are displayed in English.

Set up

Follow these steps to set up this widget:

  1. Place an Integrations widget on a page, space, or dashboard. See Placing and setting up a widget. The widget can be placed in any size column. However, it does look best in a small or medium-sized column rather than spanning the whole page.
  2. Select the placed widget's Edit button.
  3. Under Integration Library, select Igloo Integration Library.
  4. Select the Trending Content widget from the library.
  5. 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.
  6. In the widget editor, select Update to apply your changes or Cancel to discard them.
  7. At the bottom of your page, space, or dashboard, select Publish or Save as Draft to save your changes. 

Settings

Options tab

Setting Description
Title Enter a title for the widget to provide context to the widget. The title appears as a heading above the widget's contents. 

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

This field can contain a maximum of 140 characters.
Title link Enter the URL of a location in your digital workplace. Users who select the widget's title, if it has one, will go to this location. The URL may be a relative URL or an absolute URL. 

This field can contain a maximum of 2,083 characters.
Description

Enter a description of the widget to provide information to users about it. The description appears between the title and the widget's contents. 

When entering a title, enter it in your currently selected language. If your digital workplace supports multiple languages, you select Translation and enter a description for each supported language.  
General Options
Setting Description
Channel paths

Enter a comma-separated list of URLs to identify which channels the widget will display trending items from. This should be the whole path after the site's domain. For example, for a channel located at https://example.igloodigitalworkplace.com/files/mp4_files, the path would be /files/mp4_files.

To display objects from multiple channels, list the paths separated by commas. For example: /files/spring_videos, /blogs/blog_articles.

It is recommended that 1-4 channels be connected to the widget to optimize the performance and predictability of the displayed content.
Number of items to display

Select the maximum number of objects to display. Options include:

  • 5
  • 10 (Default)
  • 15
  • 20

This limit is applied after items are sorted. As a result, the sort order can result in different objects being displayed.
Date range

Select the date range to use for sorting the trending position of each item. Items from the channels selected will be sorted based on activity within this time period. Options include:

  • Last week (Default)
  • Last day
Include archived items

Select to display archived objects.

This setting is not selected by default.
Sort order

Select the criteria to sort trending content by. Options include:

  • Number of Views (Default)
  • Number of Likes
  • Number of Comments
Content Options
Setting Description
Number of top trending items to highlight

Select the number of items that will appear with a highlighted styling. For example, if 3 is entered, but there are 10 objects being displayed, there will be a carousel for items 3-10 to cycle through, and objects 1 and 2 will always be displayed.

If this value is not 0, a negative number, or a number higher than the number entered in the configuration option Number of items to display, the widget will use the value 3.

The default value is 3.
Open links in the same or a new tab

Select how users experience links that redirect to another location. Options include:

  • Same tab (Default)
  • New tab
Use feature images for blog articles

Select to display blog article's featured images, if present, instead of images from the blog's content.  

To use this feature, the configuration options Do not display images and Always use custom fallback image must be unselected.

For more information on how blog article feature images are displayed in the widget, see Feature image.

This setting is unselected by default.
Fallback image

Select what to display if the content has no image to display. Options include:

  • Show workplace logo (Default)
  • Custom fallback image
  • Show nothing

If the configuration option Do not display images is selected, this configuration option will not affect the widget. 

If the configuration option Always use custom fallback image is selected, this configuration option will not affect the widget.
Custom fallback image

Enter the absolute link of an image to display if an image is not found in the content.

To use this configuration option, the previous configuration option Fallback image must be set to Custom fallback image.

If the configuration option Always use custom fallback image is selected, this image will be used for every object in the widget. If the configuration option Do not display images is selected, this configuration option will not affect the widget.

Keep in mind the following:

  • The image file format must be PNG, JPEG, JPG, or GIF.
  • The image source must use an absolute URL with https://. For example,https://example.igloodigitalworkplace.com/files/image.jpg 
  • The image can reside in the digital workplace using the widget, hosted in a service such as Azure, or be an image from the internet. 
Always use custom fallback image

Select to use the custom fallback image for every object in the widget instead of using images from the content. If the configuration option Do not display images is selected, this configuration option will not affect the widget.

This setting is unselected by default.
Image position

Select how the content's image is displayed in the widget. Display options include:

  • Beside the content – Left (Default)
  • Beside the content – Right
  • Above the content

If the configuration option Do not display images is selected, this configuration option will not affect the widget. For smaller viewports and column sizes (440 pixels width or smaller), the image will default to Above the content.
Which author to credit

Choose whether the author credited in the widget will be the author who created the object or the author who last modified the object. Options include:

  • Created (Default)
  • Last Modified

If the configuration option Hide content author is selected, this configuration option will not affect the widget.
Do not display images

Select to not display images found in the widget's content. If turned on, the configuration options Fallback image and Image position will not affect the widget.

This setting is unselected by default.
Hide rank change icons

Select to not use icons to track the ranking changes for the items displayed in the widget. If turned on, the order of trending items will not be stored in the user's local storage, and the content in the widget will still display their numerical ranking, but all items will use the Fire icon instead of displaying arrows trending up and down.

This setting is unselected by default.
Hide trending number and icon

Select to not display the chip with the trending ranking and icon. If turned on, the order of trending items will not be stored in the user's local storage, and the numerical ranking for each item will be hidden.

This setting is unselected by default.
Hide the published date

Select to not display the published date on items.

This setting is unselected by default.
Hide content author

Select to not display the chip with the author's name and profile picture in the widget.

This setting is unselected by default.
Hide content author's profile image

Select to not display the content author's profile picture beside their name in the widget. If this setting is selected, all author's profile images will be icons with the first letter of their first name. If Hide content author is selected, this configuration option will not affect the widget.

This setting is unselected by default.
Hide content channel

Select to hide the name and icon of the channel from which the content originated.

This setting is not selected by default.
Hide the object summary

Select to hide the object descriptions in the widget.

This setting is not selected by default.
Hide views

Select to not display the number of views on items.

This setting is unselected by default.
Hide likes

Select to not display the number of likes on items.

This setting is unselected by default.
Hide comments

Select to not display the comment button on items. The comment button displays the current number of comments on an item, and users can select it to go to the comment section of that item.

This setting is unselected by default.
Hide the like button

Select to hide the Like button and the number of likes. Users can interact with this button to add a like to an item, and if the user has liked this item, the button changes styling.

This setting is unselected by default.
Hide the share button

Select to hide the Share button. Users can interact with this button to copy the URL of an item displayed in the widget. If this button is hidden, users can still access the item by clicking on the link in the title.

When clicked, options include:

  • Copy Link

This setting is not selected by default.
Hide the bookmark button

Select to hide the Bookmark button. Users can interact with this button to add a personal bookmark for an item displayed in the widget.

When clicked, a form will pop up with text fields auto-filled with the item's title and URL. The field for the title can be edited, but the field for the URL can't. Users can click Save to save the personal bookmark or Cancel to close the form.

This setting is not selected by default.
Display Options
Setting Description
Load styles from the main Igloo stylesheet

Select to style the widget according to the theme of your digital workplace.

This setting is selected by default.
Color scheme

Select a color scheme. Options include:

  • (Default) Light Mode
  • Dark Mode

If Check to load styles from the main Igloo style sheet is selected, this setting will use the color theme of your digital workplace when determining the colors of the widget. If it is not selected, the color scheme will use black (#000000), white (#FFFFFF), and colors (#1976d2, #d32f2f, #0288d1) as the default colors.
Custom CSS file

If you are using a custom CSS file to style this widget, enter the absolute URL of where the style sheet is located. Keep in mind the following:

  • The style sheet will take precedence over styles in your digital workplace's theme.
  • The style sheet must reside in the same digital workplace using the widget or be hosted in a service such as Azure.
  • If you are hosting the style sheet in your digital workplace, it must be located in a folder channel named files that is located at the root of your digital workplace. The style sheet can be located anywhere within this folder channel. For example: https://customercare.igloosoftware.com
    /files/css/stylesheetcss
  • Valid files must end with css.
Text color

Enter the color used for the text in the widget.

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #000000 if Choose the color scheme is set to Light Mode.
  • #FFFFFF if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
  • The background color of your digital workplace's Userbar if Check to load styles from the main Igloo style sheet is selected and Choose the color scheme is set to Light Mode.
  • The text color of your digital workplace's Userbar if Check to load styles from the main Igloo style sheet is selected and Choose the color scheme is set to Dark Mode.
Background color

Enter the color used for the background of the widget.

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #FFFFFF if Choose the color scheme is set to Light Mode.
  • #000000 if Choose the color scheme is set to Dark Mode.
  • The background color of your digital workplace's Userbar if Check to load styles from the main Igloo style sheet is selected and Choose the color scheme is set to Dark Mode.
  • The text color of your digital workplace's Userbar if Check to load styles from the main Igloo style sheet is selected and Choose the color scheme is set to Light Mode.
Clickable button and links color

Enter the color used for the widget's links (the content title and comments) and buttons (which appear in the bookmark form).

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #1976d2 if Check to load styles from the main Igloo style sheet is not selected.
  • The background color of your digital workplace's Userbar if Check to load styles from the main Igloo style sheet is selected and Choose the color scheme is set to Light Mode.
  • The text color of your digital workplace's Userbar if Check to load styles from the main Igloo style sheet is selected and Choose the color scheme is set to Dark Mode.
Like Button color - clicked

Enter the color used for the like icon in the widget if an item is liked.

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is #d32f2f.
Trending chip color

Enter the color used for the chip displaying the object's current trending position in the widget.

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is #0288d1.
Style Options

Appearance tab

Setting Description
Class Enter CSS class selectors to provide additional styling to the widget. See Applying custom CSS to widgets.
Height

Select the height of the widget. Options include:

  • Auto: The leftmost slider position. The widget's height will increase and decrease to contain what it displays.
  • Fixed: Select a fixed height between 50px and 600px in increments of 50px. If the content exceeds this fixed value, a vertical scrollbar will appear on the widget.

Note

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

Use it

On page load, the widget displays trending content from configured channels. 

The widget provides the following options: 

  • Article title: Select to navigate to view the content in the original location in the digital workplace. 
  • Author chip: Select to navigate to view the author's profile page. 
  • Channel chip: Select to navigate to view the content's channel in the original location in the digital workplace. 
  • Comments: Select the comments link to navigate to view the content in the original location in the digital workplace. Comments can be added to this location. 
  • Like button: Select to like the displayed content item. Selecting a second time will remove your Like from the content.
  • Share button: Select to copy the original location URL of the displayed content item.
  • Bookmark button: Select to add a personal bookmark for the displayed content item. 

Troubleshooting

The widget will be unable to display any information if any of the following conditions are met:

  • No valid blog, calendar, folder, forum, and wiki channel paths are provided in the widget configuration.
  • The blog, calendar, folder, forum, and wiki channel paths are valid, but they do not contain any content for the widget to display. If there has been no activity on the content in the last day or week (depending on the Date range configuration option), no content will be shown in the widget.
  • The blog, calendar, folder, forum, and wiki channel paths are valid, but the user viewing the widget does not have Read access or higher to the connected channels. The user needs to have Read access to at least one channel in the widget configuration to see content in the widget.
  • If they have Read access to a specific content object (blog, event, etc.) but not the parent channel, they cannot see that object.
  • If a user has Read access to a channel but not the channel's content, they will likewise not see content in the widget.