Local Coordinators FAQs

Customize the appearance of your library's chat boxes

 

What this FAQ covers

This FAQ covers how you can make changes to the appearance of your library's chat box when the service is online.

In the LibraryH3lp dashboard, this is done using what's called the chat skins tool.

Some context...

Your library's chat service in LibraryH3lp has two major elements - a queue and a chat box skin. The queue is tied to your institution and determines how chats are routed. The chat box skin determines what the chat box looks like.

The chat snippet combines a queue and a chat box skin and gives you the embed code you need to add chat to your library's website, in databases, etc. To learn how to access your library's chat snippet, see the FAQ Access your library's chat snippet. To learn how to edit an existing or create a new chat snippet for your library, see the FAQ Edit or create a new embedded chat box for your library.

 

Chat Skins

The chat skins tool is where you can change the appearance of the chat box that displays to students when the service is online.

Before making any changes to your library's chat skin, it's highly recommended that you first create a copy of your library's current skin so that you're not making changes to the chat box that is live and up on your websites. Creating a copy will also give you all of the customizations for the default AskAway widget, which is a highly customized version of the default LibraryH3lp chat box.

Create a copy of your library's chat skin

1. Login to the LibraryH3lp Dashboard
2. Navigate to the "Chat Skins" area in the left-hand menu (look for the paintbrush icon)
3. Select your library's widget from the "Widget:" drop-down (e.g. KPU AskAway watermark/feedback)
4. Note the 5-digit unique ID number (write it down)
5. Click "Copy Widget"
6. The widget is now copied and you should see a new unique ID beside the widget name
7. Change the name of the widget so that you can easily recognize it. For example, add Copy to the title or give it a descriptive name with your institutional acronym (e.g. KPU brand color)
8. Take note of the new widget ID number (write it down)
9. Click "Save Widget"

You now have a copy of your library's default chat skin and you can play around with it without affecting the appearance of the chat boxes that are live on your library's website.

There are several quick and easy changes that you can make to customize your library's chat box:

Branding

• Title
  • You may want to change this to something shorter and descriptive (e.g. Ask a Librarian, Research Help, Chat Now) as the longer title looks squished in some sidebars, especially in databases
• Typing Notification Identity
  • You could change this to something more inclusive than Librarian (e.g. Library Staff)

Frame

• Background color
  • Here you can change the color of the chat box. This color must be a hex color code. You may wish to change it to your institutional brand colors.

Wicked CSS Hack

Since AskAway chat boxes are highly customized, there are some things you'll have to change here instead of in the fields above.

Here are a few simple changes you could make to the wicked CSS hack code:

• Title color
  • Search for the header "h1"
  • Beside color: you can enter a new color for the title (must be hex color code)
• Sprites (these are the icons for volume, email for transcript, and to pop-out chat)
  • Search for "span.sprite"
  • In the png URL that follows, change to either light_sprite (this will be white) or dark_sprite (this will be black)
• Feedback link
  • Search for "a#feedback"
  • Beside color: you can enter a new color for the feedback link (must be hex color code and change to either black #000000 or white #FFFFFF to match the sprites)

***Click "Save Widget" to save any changes***

Preview changes

You can preview most of the changes you make live in the chat skins tool. However, the preview chat box won't show all of the features (e.g. the feedback link is missing). To preview your changes and to see a fully rendered version of the chat box, follow these steps:

1. Click on the "Queues" area in the left-hand menu
2. Open the "AskAway Queues" folder
3. Click on your "institution's queue"
4. Open the "Queue URL" in a new tab
5. At the end of the URL, add the following: ?skin=##### (the #s will be the 5-digit skin ID of the chat skin you're working on)
6. When you reload the page, you'll see a rendered version of the chat box, with any changes you've made now visible

Implement new chat skin in chat snippet

If you would like to use the new chat skin you've created in a chat snippet, please see the FAQ Edit or create a new embedded chat box for your library.