How to create and customize 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


Creating a simple in-page widget

The LibChat Widget Creator page provides you with a lot of available options. However, if you'd like to quickly create a simple chat widget, the steps below will guide your through the essential settings.

  1. Go to LibChat > Chat Widgets.
  2. Under the Chat Widgets tab, click on the Create New Widget button. This will take you to the LibChat Widget Creator page.

The Create New Widget button

  1. In the Widget Name field, give your widget a descriptive 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 it's purpose (e.g. "Joe's personal chat widget").
  2. The Who monitors the widget setting is one of the most important options because it determines which departments or staff members will monitor the widget. When the assigned department or staff member is online, then the widget will also appear online and allow patrons to chat with you. Otherwise, the widget will appear offline and direct patrons to your LibAnswers homepage.
    1. By default, this will be set to List All Depts (& let user choose) which will allow the patron to select from any available department.
    2. However, if you would like to change this to a specific department or chat operator, click on the Edit link.
  3. For the Widget Type, select In-page chat.
  4. For the Queue, select the queue to be used whenever a ticket is submitted using this chat widget.
  5. Click the Save button. This will both save your widget and display its embed code, which you can use to embed it into a webpage or LibGuide.

Options for creating a simple in-page chat widget

Those are the bare essentials for creating a new widget, but there are many customization options available. The sections below will take a deeper dive into each so you can learn more.

[Return to top]


Widget Name & Type settings

Click on a panel below to learn more about the available options.

Each widget needs to have a name, which is used to identify the widget within LibAnswers (it doesn't actually display on the public widget). By giving each widget a descriptive name, you can make it easier for people to know what the widget does. That can help reduce duplication, since people may be more inclined to reuse existing widgets instead of creating new ones.

The Widget Name field

This is one of the most important options because it determines which departments or staff members will monitor the widget. When the assigned department or staff member is online, then the widget will also appear online and allow users to chat with you. Otherwise, the widget will appear offline and direct users to your LibAnswers homepage.

  1. Click on the Edit link to select an operator or department. This will open the Who Monitors the Widget window.

The Edit link for the Who Monitors the Widget option

  1. Under Option 1, select the primary operator or department(s) monitoring this widget.
    1. If you select more than one department for an option (e.g. you selected "List All Depts" for Option 1), patrons will be able to select a department to chat with. Use the Department Label field to customize the label for that dropdown menu.
  2. Click on the Add another fallback button to add backup options (e.g. if Option 1 is offline, try Option 2; if Option 2 is offline, try Option 3; and so on).
    1. Fallback options are handy because they increase the odds that your chat widget will appear online.
      • For example, you could set Option 1 to your "Reference" department and Option 2 to your "Circulation" department.
      • If nobody from the Reference department is online, then LibChat will check to see if anyone from the Circulation department is online.
      • If the Circulation department is online, then they will receive the chat. Otherwise, the widget will appear offline.
    2. To remove a fallback option, click on the red x icon () next to that option's heading.
  3. Click the Set button to apply your changes.

Options in the Who Monitors the Widget window

This is probably the next most important option, as it allows you to pick which form of widget you want to create. See the Links & Files section below for more details on customizing each type of widget.

  1. In-page chat: these widgets display the entire chat window inside the page where its embedded. 
  2. Button pop-out: these widgets 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.
    • If chat is offline, clicking the button will direct the user to a URL of your choice.
    • One perk of these widgets is that the chat window will remain open even if the patron navigates to other pages.
  3. Slide-out tab: these widgets 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.
  4. 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.

Example of an in-page widget

Example of a button widget

Example of a slide-out widget

Example of a floating widget

[Return to top


Widget Appearance settings

Click on a panel below to learn more about the available options.

Use the width and height fields to customize the dimensions of your widget.

  • The width can be either a percentage value (e.g. 100%) or a fixed value in pixels (e.g. 300px).
  • The height can only be set in pixels. Simply enter the height value (do not add "px" to the end -- just enter the number).

The Width and Height options

Although the widget creator allows you to customize much of your widget's appearance, you can include optional CSS code to customize the appearance of your widget. Just add your CSS rules to the Custom CSS text box (do not include <style> tags).

The Custom CSS text box

[Return to top


Widget Options settings

Click on a panel below to learn more about the available options.

When a patron submits a ticket via this widget, the Queue you select in the widget's settings is where the ticket will be created.

The Queue dropdown

Patrons can submit tickets in the following situations:

  • When presented with the widget's away message (i.e. when all available chat operators are currently set to Away)
  • When presented with the widget's delayed claim message (i.e. when an operator does not claim the chat in a set window of time)
  • When present with the widget's connection error message (i.e. when the patron is having issues staying connected to the chat server)
  • When the patron selects the "I would like to be contacted for a follow-up" checkbox at end of a chat

[Return to top


Widget Options: Before the Chat

The following settings apply to the widget before a chat begins. Click on a panel below to learn more about the available options.

A widget's login form refers to the initial screen that displays prior to a chat, prompting the patron to provide a name, as well as their initial question (if enabled). If you have added custom questions to your widget and/or enabled the Prompt for contact info option, those fields will also appear on the login form.

The Skip Login Form option

By default, the login form is enabled for new widgets. If you would like to bypass this, allowing patrons to start a chat more quickly, select the Skip login form option. When this option is selected, please note the following:

  • Because users will not be prompted to enter a name, all chats will be anonymous.
    • As a result, you will not be able to modify the Allow anonymous login option while the login form is being skipped.
    • Because users cannot provide a name, the Name Validation error field will be hidden from your settings.
  • To start a chat, patrons will just need to submit their initial question.
    • As a result, you will not be able to modify the Initial question option while the login form is being skipped .
  • Without a login form you will not be able to ask patrons to respond to any custom questions.
    • As a result, the three Custom question fields will be hidden from your settings.
  • Similarly, you will not be able to prompt users to enter their contact info prior to starting a chat.

Unless you are skipping the login form, your widget will prompt patrons to enter a name before chatting. By default, you'll see the Allow anonymous login option enabled, which will allow patrons to chat without entering a name. Instead, they will simply appear as "Guest" in the chat transcripts. (Please note, however, that their IP address will still be recorded.)

If you would prefer to require patrons to enter a name on the widget's login form, deselect the Allow anonymous login.

  • When this option is disabled, patrons will be required to enter text in the Name field of the widget before they can start chatting.
  • Otherwise, they will see the Name validation error message. You can customize this message if needed.

The Allow Anonymous Login and Name Validation Error options

If using the chat login form, you have the option of requiring users to enter their initial question before they can start a chat session. You may find this helpful, as it will allow staff to review the question before claiming the chat.

If you would like to require this, select the Initial question checkbox. 

  • When this option is enabled, patrons will be required to enter text in the Your Question field of the widget before they start chatting.
    • Please note: if Skip login form is enabled, you will not be able to modify the Initial Question field in your settings.
  • Otherwise, they will see the Question validation error message. You can customize this message if needed.
    • This field will be hidden if Skip login form is enabled.

If the Initial question option is disabled (as it is by default), users can start a chat without first entering a question. However, they may still be required to enter their name, custom questions, etc.

The Initial Question and Question Validation Error options

If you choose to display the login form, you can add up to three custom questions to gather additional information about the user. Each custom question can be either a free text entry field, or a single-select dropdown field. Responses to each custom question will be recorded in the chat's transcript.

Please note that the Custom question fields will be hidden from your settings if the Skip login form option is enabled.

Add custom question
  1. Click on its Create field link

The Create Field link for a custom question

  1. In the Edit Custom Field window, enter your question in the Question label field
  2. Select the answer type ("Text" or "List")
    1. If you selected List, this will allow you to present a dropdown field with different options. Enter your options in the Values text box, separating each option with a comma.
  3. Click the Set button to apply your changes.

Custom Question options in the Edit Custom Field window

Edit or delete a custom question
  1. Click on its Question Label link (this appears where the Create field link had previously, letting you know the custom question has been added).

A question label link for a custom question

  1. In the Edit Custom Field window:
    1. Make any needed changes, then click the Set button to apply them.
    2. Or, to permanently delete this question, click the Delete button. (This will not delete responses to this question from previous transcripts.)

The Set and Delete buttons in the Edit Custom Field window

When the Prompt for contact info option is enabled, patrons will be able to enter their contact info before chatting. Users can enter either an email address or SMS number, which will be recorded in the transcript and used if a ticket is generated from the chat.

  • Initially, providing contact info will be optional. However, you can require patrons to provide an email or SMS number by enabling the Require contact info at start option.
    • If a patron does not enter valid email address or SMS number, they will see the widget's Contact validation error message (which you can customize).
  • In addition to requesting contact info before a chat begins, chat operators can request it at any time during a chat. When doing this, patrons will be see the text from your widget's Contact request message setting, along with a contact info field.

Please note that the Contact Request Message and Contact Validation error fields will be hidden from your settings if the Prompt for contact info field is disabled.

The Contact Validation Error, Prompt for Contact Info, Contact Request Message, and Require Contact Info at Start options

If either you or the patron gets disconnected during a chat, the Follow-up Message will display, prompting users to enter a message that will be used to create a LibAnswers ticket. If they haven't already, they will also be prompted to enter their contact info before the ticket is created.

The Follow-up Message option

If all logged-in operators have set their LibChat status to Away, then the Away Message will appear in the chat widget. The purpose of this message is to let users know that chat is online, but temporarily unavailable. They will be prompted to try again later or submit their question as a ticket for follow-up. These tickets will be added to the Queue selected in your widget options.

  1. To customize the current away message, click on its Edit link.
    1. A preview of the current message appears on the widget options page.

The Edit link for the Away Message option

  1. In the Away Message Options window, add or edit the Message text to customize the message the patron sees.
  2. Use the Link text field to customize the text of the link to your queue's question form.
  3. Click the Set button to apply your changes.

The away message options window

If a patron starts a chat, but a staff member does not claim it quickly, the patron will receive the delayed claim message. You can use this message to apologize for the delay and direct users to your ticket queue's question form instead. This can really come in handy if you stepped away from the desk without setting your status to Away; got inundated with reference questions; or simply didn't notice that a new chat arrived.

  1. Click on the Edit/Disable link to customize the message.
    1. A preview of the current message will appear on the page.

The Edit/Disable link for the Delayed Claim Message option

  1. In the Delayed Claim Message Options window, enter a Wait time (in seconds) to define how long a patron must wait before the message appears.
    • Don't want to use a delayed claim message? Then set this option to 0.
  2. Use the Message text field to customize the message that the user will see in the chat widget.
  3. Use the Link text field to customize the text of the link to your queue's question form.
    • Note: the Link Text option will not appear if you have enabled Prompt for Contact Info for this widget. Instead, the widget will use the text in the Follow-up Message field.
    • Users will be taken to the question form for the queue selected in your widget's Widget Options.
  4. Click the Set button to apply your changes.

The Delayed Claim Message Options window

[Return to top


Widget Options: During the Chat

The following settings apply to the widget while chatting. Click on a panel below to learn more about the available options.

When the Allow file uploads option is enabled, users will have the option to upload and share files with you. For example, if a patron needs help with a works cited list, they could share a copy of their paper with you.

Please note that uploaded files are only retained for one month.

The Allow File Uploads option

When the Allow iFrame chat mode option is enabled, users will see a button allowing them to launch iFrame chat mode. This button will launch a new window with the website they're viewing loaded inside of an iframe. The widget itself will overlay this, allowing them to navigate through the site without accidentally disconnecting from their chat session. (Note: this option will not appear if the patron is chatting from a mobile device.)

If you disable this option, this button will not appear in the widget. However, operators will still be able to invite the user to launch iFrame chat mode during the chat.

The Allow iFrame Chat Mode option

If a patron loses their connection to LibChat in the middle of a chat session, the Connection error message will display to the patron while LibChat attempts to reconnect them. This will include a link allowing them to submit a ticket to the queue selected in your widget's options.

  1. To customize the Connection error message, click on its Edit link.
    1. A preview of the current message will appear on the widget options page.

The Edit link for the Connection Error Message option

  1. In the Connection Error Message Options window, use the Message Text field to customize the message the patron sees.
  2. Use the Link Text field to customize the text of the link to your queue's question form.
  3. Click the Set button to apply your changes.

The Connection Error Message Options window

[Return to top


Widget Options: After the Chat

The following settings apply to the widget after a chat ends. Click on a panel below to learn more about the available options.

When the Enable comments & ratings option is enabled, patrons will have the opportunity to rate their chat experience and submit any comments they might have. If you disable this option, then users will only see a "thank you" message and a link to view and email the chat transcript.

The Enable Comments & Ratings option

When a chat widget is not being monitored, the widget will display a special offline view with a link to your LibAnswers site. When the Enable LibAnswers Search option is enabled, the offline view will include a search box so patrons can look for FAQs right from within the widget. 

  1. Select the Enable LibAnswers search checkbox.

The Enable LibAnswers Search checkbox and Edit Search Options link

  1. To customize the search box, click on the Edit search options link. This will launch the LibAnswers search options window.
    1. Group to Search: this determines which FAQ group the patron can search. Select "All Groups" if you want the search box to include FAQs from all of your groups.
    2. Form Label: this allows you to add a label for your search form that will be displayed to screen readers (it will not display on-screen).
    3. Placeholder Text: this allows you to customize the default text that displays in the search field (e.g. "Search all FAQs").
    4. Button Text: this allows you to customize the text of the search form's submit button.
  2. Click the Set button to apply your changes.

The LibAnswers search options window

If you subscribe to LibCal and are using Appointments, you can enable the Include myScheduler link option to add a link to your personal appointment page (or a group's appointment page) to your widget's offline view. Once enabled, this will give patrons the option to schedule an appointment with you or another staff member if chat is unavailable.

  1. Select the Include myScheduler link checkbox.
  2. To select the appointment scheduler to display, click on the Pick myScheduler link.

Screenshot of the Pick Appointments link

  1. In the Calendar link window, select which scheduler link to display from the Choose a myScheduler dropdown.
  2. Click the Set button to apply your changes.

Example of selecting a Appointments

[Return to top


Customize the widget's colors & text

The Preview/Text Customization column of the Widget Creator page allows you to customize and preview the appearance of your chat widget. As you build your widget, it will be broken out into the different views that your patrons will see. For example, you will be able to see what the login form looks like, how the chat window will look, and so on. 

To customize an element in your widget, all you need to do is click on it (seriously!).

  • For example, if you click on the "Start Chat" button in the Login View, you will be able to customize the button's text and colors.
  • Not sure what you're customizing? No worries! Just hover over the element and a tool tip will appear explaining what it is.

Screenshot of the Preview/Text Customization section, demonstrating hovering over a widget element

Click on a panel below to learn more about the available options.

If you're using the login form, this will allow you to customize its appearance. You can customize:

  1. The text and text color of the welcome message
  2. The text of the Name field's label
  3. The text of the Contact Info field's label (when Prompt for Contact Info is enabled)
  4. The text of the Select Department field's label (when users are allowed to choose a department)
  5. The text of the Your Question field's label (when the Initial Question is enabled)
  6. The text, background color, and text color of the Start Chat button
  7. The background and border color of the widget
Example of the Login View

This is the primary view of the chat widget and is what patrons see while chatting. You can customize:

  1. The text and text color of the chat title
  2. The text of the "Please wait" message
  3. The label for the Email Transcript button
  4. The foreground color of the text bubbles
  5. The text and text color of the Submit button
Example of the Chat View

This is what the patron will see when the chat is ended. You can customize:

  1. The text and text color of the End of Chat message
  2. The text of the intro above the rating options
  3. The labels of each rating (if ratings are enabled)
  4. The label of the "Any Comments?" text box (if comments are enabled)
  5. The label of the follow-up option
  6. The text, background color, and text color of the "Submit Feedback" button
Example of the End Chat View

If no assigned departments or operators are monitoring LibChat, the widget will appear offline and patrons will see this view. You can customize:

  1. The text and text color of the offline view heading
  2. The text of the offline message
  3. The text of the offline link (this can be plain text, or include <a></a> tags to create a link)
  4. The text of the Schedule a Meeting button (when the Include Appointments Link option is enabled)
Example of the Offline View

If file uploads are enabled, this is the view that patrons will see. You can customize:

  1. The text and text color of the heading
  2. The text of the introduction
  3. The label of the "Attach a file" form
  4. The text of the "Upload" and "Cancel" buttons
Example of the File Upload View

[Return to top

Related Articles