FAQ content

LibChat: View embed code and direct links for chat widgets

In this article

Embed a chat widget

Each widget you create will have its own unique embed code. This HTML code can be added to any webpage where you want to make your chat service available. For example, you could embed your reference department's chat widget on your library homepage or in a LibGuide, and a personal chat widget in your LibGuides profile box.

To get view a chat widget's embed code:

  1. Log into LibAnswers and go to LibChat > Chat Widgets.
  2. Locate the chat 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

The embed code for a widget consists of two parts -- you need to include each on your page in order for the widget to work:

  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. :)
  2. A <div> tag, which is what positions your widget on the page.
    • For in-page and button pop-out widgets, where you place this <div> tag is where your widget will appear.
    • For slide-out tab and floating widgets, however, the chat widget's CSS code will reposition the <div> element to the appropriate side of the page. In that sense, you could put the <div> tag for these widgets someplace out of the way, such as your page footer.

Example of a widget's embed code

Linking to a chat widget

If you only want to have a direct link to a chat widget -- making it possible to view a chat widget in its own browser window/tab -- each widget includes its own direct link.

To get a chat widget's direct link:

  1. Log into LibAnswers and go to LibChat > Chat Widgets.
  2. Locate the chat 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

  1. Click on the Direct Link tab on the Widget Code modal.
  2. Copy and paste the direct link for the chat widget.

Example of a view a widget's direct link

Pass additional parameters in the chat widget link

You can also append additional query string parameters to the direct link for a chat widget to pass known data about the patron into the resulting chat exchange. These are generally used by sites who are custom coding their own scripts to help pass these details into the chat exchange from a third party communication tool (like a chatbot).

Available parameters:

  • question: fills in the initial question field.
  • patron_name: fills in the patron name field.
  • patron_email: fills in the patron email field.
  • referer: include the referring URL.
  • referer_title: include the referring URL title.

If you would like to pass the name and email address of the patron in the query string for the chat widget link, you can include the parameters for patron_name and/or patron_email.  We recommend using a chat widget that has the Login Form enabled and also prompts for contact info so that the name and contact info (email) fields are available when the widget is loaded.

  • To include the patron's name, add the patron_name parameter to the URL, and pass the name in a URL-encoded format. This URL would look like:
  • To include the patron's email address, add the patron_email parameter to the URL, and ensure that the email address is valid. (The widget will not accept partial/invalid email addresses.) This URL would look like:
  • To include both the patron name and patron email address, the URL would look like:

Manage chat widgets

Every chat widget you create is saved so that you can customize it over time. That means you don't need to completely start from scratch if you need to change your widget's fallback options, appearance, etc. To manage your widgets, click on the appropriate icon in the Actions column.

  1. Click on the View Widget Code icon to view a widget's embed code and direct link. (See the How to embed chat widgets section below for more details.)
  2. Want to use an existing widget as a template for a new widget? Click on the Copy Widget icon to create a copy of that widget. You can then customize the copy without affecting the original.
  3. To make changes to the widget's options and appearance, click on the Edit Widget icon. When you edit a widget, the changes will automatically be reflected everywhere the widget is embedded.
  4. To delete a widget, click on the Delete Widget icon. This will permanently remove the widget; if the widget is still embedded on a webpage, it will no longer display.

Screenshot showing the different widget management options