If you have important or recommended topics that your users might find useful, the custom Topics widget can be used to focus attention to those topics and make users aware of them. For example, you might configure the custom Topics widget to only show specific topics that you think members of a certain community might like to see or that are essential for them to see, and then add it to the homepage of that community so that those users can see those topics as soon as they land on the community.

To configure the custom Topics widget in the Widget builder:

1. Go to the widget builder community here.

2. Select the Topics widget template.

   

3. In the Appearance section, configure the look and feel of the widget. You can control format, the size of the widget, cards within it, the colour, and the widget title.

   You can configure the following appearance settings:

   • Title: This is the title of the widget and is shown to users when viewing it. The title will automatically translate into the user’s chosen language. You can also exclude words from the translation, such as brand-specific terms that you don’t want included in the widget title, using the Words to exclude field.

     

   • Select format: Select how you want the content to be displayed:

     

     • Carousel: The topics are shown to users in a moveable carousel, with each card representing a topic.

       

     • List: The topics are shown to users in a list, with each row representing a topic.

       

     • Grid: The topics are shown to users in a grid, with each card representing a topic.

       

   • Select widget size: Select a preset width for your widget. You can give your widget a width of:

     • 2 columns

     • 3 columns

     • 4 columns

     • 6 columns
       Note: If you have selected List above, you can only make your widget 3 columns in width.

       

   • Height: Select the height for your widget. You can choose to make the widget 1 row in height or 2 rows in height.

     

   • Show progress bar: You can choose to show or hide the progress bar. The progress bar shows a user how much progress they’ve made on each topic shown on the widget.

     
     

   • Configure widget colour: Select the colour of the widget buttons and progress bars shown on the widget. You can select the primary colour for your instance or manually specify a colour by entering a hexadecimal value.

     

     
     As you are configuring each setting, you can preview the changes using in the DESKTOP EXAMPLE PREVIEW section at the bottom of the screen:

     

4. When you’ve finished configuring the look and feel of the widget, click NEXT.

   

5. In the Configure section, you can determine what is displayed on the widget.
   You can configure the following settings:

   • Display: Choose which topics will be shown to users on the widget:

     • All topics that the user has access: Select this option to display all the topics the user has access to.
       

     • All topics from specified communities: Select this option to display all the topics the user has access to from a specific community. To specify the communities, enter the ID of each community in the Community ID number field and only topics from those communities will be shown.
       

     • Only specified topics: Select this option if you only want to display specific topics that the user has access to. To specify the topics, enter the ID of each topics you want displayed on the widget.

       

   • Sort: Here you can determine how the topics are sorted on the widget. You can sort them in alphabetical order from A-Z, Most recently added, and by the amount of progress the user has made on each one.

     

   • Pin topic(s) to beginning: You can pin a particular topic to the widget so that it is always displayed. You can do this selecting the checkbox and then entering the IDs of the topics you wish to pin.

     

6. When you’ve finished configuring the display settings, click GET CODE.

   

7. The code is then generated based on the configuration options you’ve selected. Once you are satisfied with the styling and behaviour of the widget, COPY CODE to copy the code.

   

8. Go to Design Studio in your Fuse platform and add the Custom HTML widget to a page, ensuring that it is the same dimensions chosen in the widget builder (e.g. if your widget in the widget builder is set to 3 columns, wide, make the custom HTML widget in design studio is also 3 columns wide).

   

9. Paste the code into the widget and publish the changes. The widget then appears on the specified page with the chosen styling, content and dimensions.