How to customize a System Status Management product widget

Each product you add to the System Status Management (SSM) tool has its own customizable widget. By embedding the widget in a webpage for a system or service, you can provide your patrons with point-of-need support.

  • Ask questions, get answers: if a user needs help, they can ask a question via the widget. Relevant FAQs and LibGuides will appear automatically as they type. If those don't answer their question, though, they can easily submit it and a ticket will be created in your LibAnswers queue for follow-up.
  • Report a problem: patrons can use these widgets to report a problem, such as a bug or a broken link. These will go straight to your queue and assigned a "Problem" tag so you can spot these tickets right away.
  • Share an idea: patrons can share ideas for changes or new features. Ideas are stored separately from tickets within your System Status Management tool, displaying within each product's page. Admins can choose to publish ideas, allowing other users to chime in with a thumbs up or down vote.
  • Give praise: widget aren't just for reporting problems! Patrons can also use these to send kudos about a particular system or service. These will be submitted as tickets to your queue, where you can follow up with the patron if you'd like.
  • Chat with library staff: you can even include a button that launches LibChat right within the product widget. This allows users to easily get help from library staff in real time.

Although Admin users can customize product widgets, regular users must first be given Editor or Admin access to the SSM tool. 

Example of a product widget displaying relevant FAQs


Customizing a product widget

  1. Go to Admin > Systems Status Management.
  2. Under the Products tab, locate the product you want to customize and click on its list () icon in the Actions column.
    • Alternatively, you can click on the Widgets tab, select the product you want to customize from the dropdown menu, and click the Go button.

The option to edit a product's widget

Widget Options

  1. Text in button/sidetab: if using the button or side-tab style of widget, you can use this field to customize the text that appears in the button or tab.
  2. Header: use this field to customize the widget's header text. This displays above the widget's form fields.
  3. Introduction: use this field to add optional intro text, which will display below the widget's header.
  4. Queue: select the queue to which tickets will be submitted from this widget.
  5. User: optionally, you can choose to automatically assigned tickets to a specific user in the selected queue.
  6. FAQ Group: select which group's FAQs you would like to display in the widget.
  7. LibChat Widget: optionally, you can select one of your embedded-style chat widgets to display in your product widget.
  8. LibGuides Search: in addition to FAQs, you can choose to display relevant guides from one of your LibGuides systems.
  9. Button/Tab Background Color: if using the button or side-tab style of widget, you can use this to select the background color for the button or tab (white is the default).
  10. Button/Tab Text Color: if using the button or side-tab style of widget, you can use this to select the text color of the button or tab (black is the default).
  11. Custom CSS: to make advanced customizations to your widget, you can add your own custom CSS code. (Do not enclose your code between <style></style> tags -- just enter the CSS rules.)

Widget options

List of FAQ Entries

  1. Type: select which type of FAQ list you would like to display when the widget launches.
    • Recent FAQ Entries: displays the most recently updated FAQs.
    • Popular FAQ Entries: displays the most viewed FAQs.
    • FAQ Entries by Topic: displays a list of FAQs assigned to the topic you select, sorted either by most recent or most viewed.
    • FAQ Entries by Keyword: displays a list of FAQs assigned to the keyword you select, sorted either by most recent or most viewed.
    • Custom FAQ Entries List: enter the ID numbers of the FAQs you want to display (separated by commas). You can find an FAQ's ID number by going to Answers > FAQ Entries.
  2. # Items to Show: for all types except Custom FAQ Entries List, enter the maximum number of FAQs to display.
  3. List Header: customize the header text that displays above the list of FAQs.
  4. FAQ Template: when a patron clicks on an FAQ, it will pop up inside of a modal window. This template is what structures the layout of the FAQ's content. Use the HTML and template tokens (e.g. {{question}}) to move, format, or delete FAQ content.
    • Click the Restore Default Template button to return to the default code.

Options for the list of FAQ entries

Widget Embed Code

  1. Widget Style: select which type of widget to use.
    • Button: this will display as a button. When a user clicks it, the widget will pop up in a modal window.
    • Tab (left): this will display a tab along the left side of the screen. When a user clicks it, the widget will pop up in a modal window.
    • Tab (right): this will display a tab along the right side of the screen. When a user clicks it, the widget will pop up in a modal window.
    • Embedded: this will embed the entire widget into the page.
  2. Embed Code: the HTML embed code for your widget will appear. Copy and paste it into the HTML code of your webpage to display the widget.
    • All widget styles will have a <script> element. For best results, paste this in the <head> section of your webpage (though it can go in the <body> if needed).
    • The Button and Embedded styles will also include a <div> element. Paste this in the <body> section of your webpage in the spot where you want the widget to display.

Widget embed code options

Preview and Save

  1. At the very bottom of the page, you'll find a live and fully interactive preview of your widget. Click the Refresh Preview button at any time to see how your latest changes look.
  2. When finished, click the Save button.
    • Your changes will automatically be reflected wherever the widget is being used. (The widget style is not saved -- you can use a different style of widget on each webpage.)
    • Important: if you want to switch widget styles (i.e. from Button to Embedded), you will need to replace the widget's embed code in your webpages.

Options to save and preview a widget

Related Articles