FAQ content

Widgets & LibChat: Create and edit a combination widget (includes an FAQ search, chat widget, and question form)

In this article

What is a combination widget?

combination widget allows you to provide your users with an opportunity to search and view your FAQs, chat via LibChat, and/or submit a ticket all in one location and on whatever page you've embedded the widget. Each combination widget that you create can be customized to select which FAQ group to search (FAQ search is a required element for the widget), the chat widget used, and the queue that tickets are submitted to, while also allowing you to turn the options to chat or submit a ticket on and off—with additional options to customize the look and feel and text used on the widget. 

Note: A chat widget needs to be set up for the combination widget to offer the option to launch a chat.

The customized combination widgets you create can be placed on just about any webpage (including LibGuides) with just a little embed code. These widgets can be configured to display in three different ways:

  • Button pop-out: These widgets allow users to click on a button to launch the combination widget in a modal on the page.
  • Slide-out tab: These widgets reside on the left, right, or bottom of the browser window; when a user clicks on them, the combination widget opens in a modal on the page.
  • Floating: These widgets display a button that floats in the bottom-right corner of the browser window. When a user clicks on the button, the combination widget opens in a modal on the page.
Example combination button widget
Combination widgets bring together the ability to search for FAQs, submit tickets, and launch a chat session.

Who can create combination widgets?

Everyone! Any LibAnswers user can create and embed customized combination widgets. Admins can edit and delete any widget in the system. Regular users, on the other hand, can only edit and delete their widgets. However, any user can copy or embed any widget they'd like. That way, if you have a heavily customized widget, they can simply reuse it instead of starting from scratch.


Create, copy, or edit a combination widget

To create a new combination widget, copy an existing widget, or make edits to an existing widget:

  1. Go to Admin > Widgets & API.
    • If you are a Regular-level user, go to Admin > Widgets.
  2. Under the Widgets tab, click on the + Create Combination Widget button.
    1. Click the Copy Widget () icon to make a copy of an existing widget
    2. Click the Edit Widget () icon to adjust the settings for an existing widget.
      • Any edits made to an existing widget will automatically update any instance of the widget that has been embedded on a webpage.
The Create New Combination Widget button
  1. Set the Widget Name.
    • This does not display publicly, so you may find it helpful to use this to describe where the widget is used (e.g. "Library homepage widget") or its purpose (e.g. "Search and submit tickets widget").
  2. Add an optional Internal Note that is used for internal identification purposes only.
  3. Set the Base Language to be used for non-customizable text in the widget.
    • Customizable text for the widget (set on the Look & Feel tab of the builder) will not automatically be updated and should be adjusted as needed.
  4. Click the Save button.
    • This will take you to the Combination Widget Builder page where you can fully customize the widget.
The Create New Combination Widget modal

Configure the widget's settings

When creating a new widget, or editing an existing one, you will land on the Widget Settings tab of the widget builder. From this tab, you can set the widget's name and select how each module (search, chat, and ticket submission) is configured for the widget.

Reminder: The FAQ Search module is required for all combination widgets.

  1. Widget Name: Adjust the name of your widget, if needed.
  2. Internal Note: Add or adjust the internal description for the widget.
  3. Select FAQ Group: Use the dropdown to select what FAQ group is searchable from the widget.
    • You can choose to search "All Public Groups" or select a specific public group.
  4. Add Chat Widget: If you want to include a chat widget in the combination widget select the checkbox for this option.
    • When active, you will use the dropdown to select the chat widget to include.
    • Note: If chat is offline (and no Chatbot is active for the chat widget), users will not see the button to launch a chat from the combination widget.
  5. Add Ticket Queue: If you want to include a button to open a queue's question form in the combination widget, select the checkbox for this option.
    • When active, you will use the dropdown to select the queue the patron will submit their questions to.
  6. Click the Save button.
    1. Click on the Look and Feel tab to further customize the widget.
The Settings for the widget

Customize the widget's look and feel

From the widget builder's Look and Feel tab, you can customize the widget's style (button, slide-out, or floating), the colors used, add custom CSS, and tweak any/all of the text used on every view of the widget.

Widget style
  1. Combination Widget Style: Select how the widget will appear on the page. Choose from:
    • Button pop-out: This style allows users to click on a button to launch the combination widget in a modal on the page.
    • Slide-out tab: This style resides on the left, right, or bottom of the browser window; when a user clicks on them, the combination widget opens in a modal on the page.
    • Floating: This style displays a button that floats in the bottom-right corner of the browser window. When a user clicks on the button, the combination widget opens in a modal on the page.
  2. Slide-out direction: When the Slide-out tab style is selected, you can set where the widget will be shown on the page. Choose from:
    • Right side of page: the tab will be positioned on the right side of the screen.
    • Left side of page: the tab will be positioned on the left side of the screen.
    • Bottom: the tab will be positioned on the bottom of the screen.
  3. Button/Tab Text: Set the button text that displays for the widget.
    • Note: Text is limited to 20 characters for the button.
The widget style options
Color customizations
  1. Button(s) Background Color: Applies to the background of each button in the chat widget (and includes the buttons to search, chat, and submit a ticket).
  2. Button(s) Text Color: Applies to the color of the text in a widget's buttons (and includes the buttons to search, chat, and submit a ticket).
  3. Custom CSS: To customize the look of the widget beyond the options offered in the widget builder, you can include optional custom CSS code.
    • This applies only to the widget body itself. To customize a widget's buttons and tabs, add your custom CSS to the page where the widget will be placed.
    • Use standard CSS rules and do not include <style> tags.
The widget color options
Language customizations

The Language Customizations section of the widget builder's Look & Feel tab allows you to personalize specific labels and other text snippets used throughout the widget.

  1. Header Text: Displays in the header field on the open widget modal.
  2. FAQ Search Introduction Text: Text that displays above the initial FAQ search box.
    • Field has a 1,000-character limit.
  3. ​​​Placeholder for Search: The placeholder text patrons will see in the search field.
    • Field has a 50-character limit.
  4. Other Contacts Intro Text: Text that displays above the buttons for chat/ticket prompts.
    • Field has a 500-character limit.
  5. LibChat Widget Button: Text that displays on the LibChat button.
    • Field has a 50-character limit.
  6. Ticket Form Button: Text that displays on the question form button.
    • Field has a 50-character limit.
The widget language options

Preview the combination widget

When creating a new widget or editing an existing widget, you can use the Widget Preview pane to see how the widget will look when added to a webpage. Any edits/customizations that you make in the widget builder will be reflected in the preview after clicking the Refresh Preview button.

  1. Click on the button/tab in the preview to see how the modal will display to users.
  2. Click the Refresh Preview button (or save the widget) to see an updated view of the widget after you have made changes to it.
screenshot highlighting the auto-updating widget preview pane
Edits made to a chat widget are displayed in the widget preview.

Embed a combination widget

Each widget you create will have a unique embed code. This HTML code can be added to any webpage where you want to make your combination widget available. For example, you could embed a widget with options to contact your reference department on your library homepage or in a LibGuide.


To view a widget's embed code:

  1. Log into LibAnswers and go to Admin > Widgets & APIs.
  2. On the Widgets tab, locate the widget you want to use and click on its View Widget Code () icon in the Actions column.
Example of a view a widget's embed code

For button pop-out widgets, the embed code for a widget consists of two parts—you need to include each on your page for the widget to work. For slide-out and floating widgets, only the <script> tag is required.

  1. A <script> tag, which is what loads the necessary JavaScript that makes the widget work. This can be placed in your page's <head> element (or in LibGuides, your Custom JS/CSS code), but it can also be placed right alongside the rest of the widget's code—it'll work either way. :)
    1. For button widgets, there will also be a <div> tag, which is what positions your widget on the page.
      • Where you place this <div> tag in the page's HTML is where your widget will appear.
      • Note: For slide-out tab and floating widgets, there will be no <div> tag shown or needed. These widgets are automatically positioned on the page.
Example of a widget's embed code