Trending content gadget

Note:

Your organization must be subscribed to Igloo's Gadget Depot to use gadgets in your digital workplace. Contact your Customer Success Manager or email the Customer Success Team to subscribe to the Gadget Depot and get access to all available gadgets.

 

Use the trending content gadget to display content from connected channels ordered by views, likes, or comments. Users can interact with the displayed content by viewing, liking, sharing, or bookmarking it.

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

  • Blog
  • Calendar
  • Folder
  • Forum
  • Wiki

Trending Content Gadget Displaying Three Articles

Sections in this article:

Considerations and Caveats

  • Keyboard Navigation: The following functionality of the gadget does not support keyboard navigation:
    • Share button
    • Bookmark button
    • Add a Personal Bookmark popup
  • 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 gadget
  • Images: If no featured image or image in the content is found, the gadget can be configured to display the workplace logo, a custom fallback image, or nothing.

Language support

  • Files do not have language support on the platform, names and descriptions of files will appear as they are uploaded on the digital workplace.
  • Error messages are displayed in English.
  • If adding an object as a personal bookmark from the gadget, the title will autofill to the same title as the object. As a result, if the object has a title for the currently selected language, that will be the title the bookmark uses. The title can be changed before saving the personal bookmark.
  • All gadget interface text and tooltips have translations for all platform languages.

Set up

Follow these steps to set up this gadget:

  1. Place an  Integrations widget on a page, space, or dashboard. For more information, see Placing and setting up a widget. The gadget 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 Gadget Depot.
  4. Select the Trending Content Gadget 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 for the widget to provide information to users about the widget. 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 to search for trending items

Enter a comma-separated list of URLs to identify which channels the gadget 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.

We recommend connecting the gadget to 1-4 channels to optimize performance and predictability with the content that will be displayed.

Number of items to display

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

  • 5
  • (Default) 10
  • 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 for trending items

Select the date range that will be applied to the items found in the channels listed in the gadget configuration. If items are published within the selected time range, they will be displayed in the gadget. Options include:

  • (Default) All time
  • Last year
  • Last month
  • Last week
  • Last day
Include archived items

Select to display archived objects.

This setting is not selected by default.

Sort order

Select the order in which objects are displayed. Options include:

  • (Default) Number of Views
  • Number of Likes
  • Number of Comments
Content Options
Setting Description
Number of Top Trending Items to Highlight

Select the number of items in the gadget that will appear with a highlighted styling. For example, if 3 is entered but there are 10 objects in the gadget, 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 gadget will use the value 3.

The default value is 3.

Choose whether links open in the same or a new tab

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

  • (Default) Links open in the same tab
  • Links open in a new tab
Use article feature images for blog articles

Select to enable the gadget to check if a blog article has a featured image and use that object's image in the gadget instead of an image in the content of the blog.  

To use this feature, the configuration options Do not display images in the gadget and Use custom fallback image instead of using images from content must be unselected.

 The following aspect ratios are used:

  • 7.35:1 – Used if the configuration option Select an image position is set to Above or if the viewport is 400 pixels or less.
  • (Default) 1:1

 This setting is unselected by default.

Image to display if no image available

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

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

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

If the configuration option Use custom fallback image instead of using images from content is selected, this configuration option will not affect the gadget.

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 Image to display if no image available must be set to the option Custom fallback image.

If the configuration option Use custom fallback image instead of using images from content is selected, this image will be used for every object in the gadget. If the configuration option Do not display images in the gadget is selected, this configuration option will not affect the gadget.

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 gadget, hosted in a service such as Azure, or be an image from the internet. 
Use custom fallback image instead of using images from content

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

This setting is unselected by default.

Select an image position

Select how the content’s image is displayed in the gadget. Display options include:

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

If the configuration option Do not display images in the gadget is selected, this configuration option will have no effect on the gadget. 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 gadget will be the author who created the object or the author who last modified the object. Options include:

  • (Default) Created
  • Last Modified

If the configuration option Hide content author is selected, this configuration option will not affect the gadget.

Do not display images in the gadget

Select to not display images found in the content in the gadget. If enabled, the configuration options Image to display if no image is available and Select an image position will not affect the gadget.

This setting is unselected by default.

Do not use icons to show rank changes for trending items

Select to not use icons to track the ranking changes for the items displayed in the gadget. If enabled, the order of trending items will not be stored in the user’s local storage, and the content in the gadget 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 the trending number and icon

Select to not display the chip with the trending ranking and icon. If enabled, 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 gadget.

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 gadget. If this setting is selected, all author's profile images will be an icon with the first letter of their first name. If Hide content author is selected, this configuration option will not affect the gadget.

This setting is unselected by default.

Hide content channel

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

This setting is not selected by default.

Hide the object summary from the toolbar

Select to hide the object descriptions in the gadget.

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 on an item, and this button changes styling if the user has liked this item.

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

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 be edited. 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
Check to load styles from the main Igloo stylesheet

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

This setting is selected by default.

Choose the 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 gadget. 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 gadget, 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 either the same digital workplace that is using the gadget 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 gadget.

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

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 links (the content title, and comments) and buttons (that appear in the bookmark form) of the gadget.

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

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. For more information, see Applying custom CSS to widgets.
Height Select the height of the widget.

The default value is Auto (leftmost slider position) scales the widget's height to fit its contents. You can use the slider to set a fixed height between 50px to 600px in increments of 50px.

Selecting a Height other than Auto will add a vertical scrollbar to the gadget.

Note

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

Using it

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

The gadget 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 display 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 gadget 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 gadget configuration.
  • The blog, calendar, folder, forum, and wiki channel paths are valid, but they do not contain any content to display in the gadget.
  • The blog, calendar, folder, forum, and wiki channel paths are valid, but the user viewing the gadget 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 gadget configuration to see content in the gadget.
    If they have Read access to a specific content object (blog, event, etc.) but not the parent channel, they will not be able to see that object. If a user has Read access to a channel but not the content in the channel, they will likewise not see content in the gadget.