Manage, copy, and embed chat widgets

To manage your chat widgets and view their HTML embed code, go to LibChat > Chat Widgets.

Getting to the Chat Widgets page

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. (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


How to embed chat widgets

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, and a personal chat widget in your LibGuides profile box.

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 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 slide-out widgets someplace out of the way, such as your page footer.
Example of a widget's embed code

Related Articles