Create LibChat widgets

What are LibChat widgets?

Chat widgets are what allow patrons to chat with you. Each chat widget can be monitored by an individual staff member or an entire chat department. You can even set up fallbacks; that way, if the first department is offline, LibChat will check the fallback department or staff member to see if they are online. This can help you keep your chat service online longer since it expands the staffing possibilities.


How do chat widgets work?

LibChat allows you to create customized chat widgets, which you can place on just about any webpage (including LibGuides) with just a little embed code. Chat widgets have a few different types:

  • In-page chat: these widgets display the chat window entirely inside the page where you embedded them.
  • Button pop-out: these widgets allow users to click on a button, which launches the chat window in a new browser window.
  • Slide-out tab: these widgets hang out on the left, right, or bottom of the browser window; when a user clicks on them, they expand to display the chat window.
  • Floating: these widgets display a button that floats in the bottom-left corner of the browser window. When a user clicks on the button, the widget expands above it.

When you create a widget, you can choose which departments and/or staff members will monitor it. This is important because it will help determine when a widget appears online.

  • If the assigned department or staff member is online, then the chat widget will appear online and allow users to start chatting.
  • You can also set up fallbacks. This works by setting up tiers of options, so if Option A is offline, LibChat will see if Option B is online; if Option B is offline, then Option C will be checked, and so on.
    • For example, you could create a widget that checks to see if your Reference department is online.
    • If it's not, then you could configure the widget to check if anyone from the Circulation department is online.
    • You could even set up a third fallback option to check if anyone from Special Collections is currently online.
  • If none of the assigned departments are online, then the chat widget will appear offline and direct users to your LibAnswers site (or another URL) to search your FAQs or submit a ticket.

How do I create a widget?

Before you get started, you must have either a Regular or Admin user account in your LibAnswers system. Reader and Ref. Analytics only users cannot create their own chat widgets--or perform any LibChat-related actions.

You can add a new chat widget to your site by either creating it from scratch or by copying an existing widget.

Creating an in-page chat widget

An in-page chat widget will embed the entire chat window directly into a webpage. Although this can take up more space on a page, it can help patrons start a chat more quickly since they will not have to press a button to launch the chat window itself.

Example of an in-page chat widget

Once you've created a widget, consider customizing some of the following options, which can make it easier for your users to use and get to the help they need.

  • Widget Name & Type settings
    Learn how to change the name and type of widget, and, most importantly, determine who is monitoring the widget along with setting any (optional) fallbacks.
  • Widget Appearance settings
    Customize the look of your widget with custom CSS code.
  • Widget Options
    Use the widget options to fine tune the look and behavior of the widget before, during, and after the chat.
  • Customize the color & text
    The Preview/Text Customization column of the Widget Creator page allows you to customize and preview the appearance of your chat widget.

Creating a button pop-out chat widget

A button pop-out chat widget will display a button that indicates whether or not the widget is online. If chat is online, clicking the button will launch the chat window in a new browser window. Otherwise, it will direct the user to a URL of your choice. Compared to the other types of widgets, one perk of button widgets is that the chat window will remain open even if the patron navigates to other pages.

These widgets can also be configured to proactively prompt patrons to start chatting. When you chat service is online, patrons will see a prompt after a set number of seconds, with options to start chatting or to dismiss the prompt and continue viewing the page.

Example of a button pop-out chat widget

Once you've created a widget, consider customizing some of the following options, which can make it easier for your users to use and get to the help they need.

  • Widget Name & Type settings
    Learn how to change the name and type of widget, and, most importantly, determine who is monitoring the widget along with setting any (optional) fallbacks.
  • Widget Appearance settings
    Customize the look of your widget with custom CSS code.
  • Widget Options
    Use the widget options to fine tune the look and behavior of the widget before, during, and after the chat.
  • Customize the color & text
    The Preview/Text Customization column of the Widget Creator page allows you to customize and preview the appearance of your chat widget.

Creating a slide out (i.e. side tab) chat widget

A slide-out chat widget will display a tab at the left, right, or bottom edge of the browser window. When a user clicks on the tab, the widget slides out and they can start chatting.

These widgets can also be configured to proactively prompt patrons to start chatting. When you chat service is online, the widget will slide out after a set number of seconds, with options to start chatting or to dismiss the prompt and continue viewing the page.

Example of a slide-out chat widget

Once you've created a widget, consider customizing some of the following options, which can make it easier for your users to use and get to the help they need.

  • Widget Name & Type settings
    Learn how to change the name and type of widget, and, most importantly, determine who is monitoring the widget along with setting any (optional) fallbacks.
  • Widget Appearance settings
    Customize the look of your widget with custom CSS code.
  • Widget Options
    Use the widget options to fine tune the look and behavior of the widget before, during, and after the chat.
  • Customize the color & text
    The Preview/Text Customization column of the Widget Creator page allows you to customize and preview the appearance of your chat widget.

Creating a floating chat widget

A floating chat widget will display a button that floats in the bottom-left corner of the browser window. When a user clicks on the button, the widget expands above it.

These widgets can also be configured to proactively prompt patrons to start chatting. When you chat service is online, patrons will see a prompt after a set number of seconds, with options to start chatting or to dismiss the prompt and continue viewing the page.

Example of a floating chat widget

Once you've created a widget, consider customizing some of the following options, which can make it easier for your users to use and get to the help they need.

  • Widget Name & Type settings
    Learn how to change the name and type of widget, and, most importantly, determine who is monitoring the widget along with setting any (optional) fallbacks.
  • Widget Appearance settings
    Customize the look of your widget with custom CSS code.
  • Widget Options
    Use the widget options to fine tune the look and behavior of the widget before, during, and after the chat.
  • Customize the color & text
    The Preview/Text Customization column of the Widget Creator page allows you to customize and preview the appearance of your chat widget.

How do I embed a widget?

Once you've finished building the widget, the last step is to embed it. Each widget has its own embed code that you will use to add the widget to any webpage where you want to make your chat service available.

  • Embedding a chat widget
    Learn how to generate the widget code and where it should be added into the HTML of the webpage you are adding the widget to.

Related Springboards