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.
Note: The chat skins tool will only change the appearance of the chat box that is embedded or that pops-up when a user clicks on a widget. It can NOT be used to customized the appearance of the chat tab, button, or proactive chat invitation. If you want to customize these widgets, contact the Admin Centre.
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 chat snippet or create a new chat snippet for your library, see the FAQ Edit or create a new embedded chat box for your library.
Update an existing chat skin
- Sign into the LibraryH3lp Dashboard using your library's admin username and password
- Navigate to the chat skins tool
- Find the chat skin for your library that you want to change. You can search by typing the chat skin name or ID number in the "Filter skins by" search box
- If you're unsure which chat skin a particular chat snippet is using, ask the Admin Centre or find this information when editing a chat snippet
- Hover over the preview of the chat skin that you want to change and click "Edit"

In the branding area, there are several quick and easy changes that you can make to customize your library's chat box:
Branding
Branding Basics
- Require guest to complete an entry form before chat
- Leave this unchecked. Requiring an entry form would violate AskAway's privacy policy.
- Background color
- Choose a color that meets WCAG guidelines for accessibility.
- Height and width
- This will set the default size for your library's chat box.
- You can also customize this for individual chat snippets (e.g., chat tab) in the chat snippet area.
- Most libraries have this set to height 325px and width 275px. You may want to set the width to 90% or 100% for a more responsive design.
- Presence theme
- This is what will display when the chat is online. Select from the drop-down.
- AskAway uses the "flat-chat-bubbles" as default.
- Title
- Choose a title that is short and descriptive (e.g. AskAway Research Help, Ask a Librarian, Research Help, Chat Now). A longer title looks squished in some sidebars, especially in databases.
- Title color
- Choose a colour that meets WCAG guidelines for accessibility.
- Title font size
- Choose a font size that is readable (e.g., 16px)
- Operator identity
- This is the service provider identity that will display to the patron (e.g., Librarian)
- You may wish to change this to another term (e.g. Library Staff)
- Operator, typing notification, and Guest (me) colors
- Choose colours that meet WCAG guidelines for accessibility
- Include a greeting
- Select this to include greeting text that you want the patron to see before they send their first message
- Default AskAway greeting: "AskAway connects you with real people for research and library assistance. How can we help you?"
Click "Save" or "Apply" to save your changes. Most (but not all) of your changes will also be previewed automatically in the chat box on the right hand side.
Example settings:


Additional Flair
- Outer border
- Enter a width and colour for the outer border
- Chat history background, border, and message colour
- Choose colours that meet WCAG guidelines for accessibility
- Sound alerts enabled as a default for the guest
- AskAway currently has these turned on. You can choose if you want them on or off for your patrons by default.
- Include a chat policy
- Select to support AskAway's privacy policy
- When this is enabled, patrons can click on the ? icon in the chat box and read AskAway's privacy notice
- Include the following text:
- AskAway Privacy Notice: Please be aware that any personal information you provide will be recorded in the transcript of our conversation and stored on AskAway's LibraryH3lp servers in Canada. Transcripts are used solely for evaluation purposes to improve the service and are collected from users from public institutions under the authority of the University Act (R.S.B.C. 1996, c.468, s. 27(4)(a)) and the College and Institute Act (R.S.B.C 1996, c.52, s. 41(1)(4)) and from users from private institutions in compliance with the Personal Information Protection Act (S.B.C. 2003, c. 63, s. 6(2)(a)). More information can be found here: https://askaway.org/content/askaway-privacy-notices
- Require guest to acknowledge chat policy
- Disable file upload for the guest
- Select
- Currently AskAway does NOT offer file upload for patrons
- Icon color
- Choose a colour for the chat box icons that meets WCAG standards
- Typing area background color, border, and color
- Choose colours that meet WCAG standards
- Typing instructions
- These are the instructions that the patron sees in the typing area
- Default AskAway text: "Type your question and press ENTER to send..."
Click "Save" or "Apply" to save your changes.
Example settings:


Wicked CSS Hack and Custom Java Script
You can make some additional changes in the Wicked CSS Hack and Custom Java Script tabs. For example, in the CSS, you can update the appearance of the AskAway exit survey link that appears in the bottom right hand corner of the chat box. The Custom Java Script includes the URL for the exit survey.
Create a new chat skin
- Sign into the LibraryH3lp Dashboard using your library's admin username and password
- Navigate to the chat skins tool
- Find the default chat skin for your library. You can search by typing the chat skin name or ID number in the "Filter skins by" search box
- Hover over the preview in the results list, and click "Copy"
- Do NOT click "Create New Skin"
- If you create a new skin, it will not include the necessary CSS and custom java script
- Enter a title for your new chat skin that includes your institution's acronym and a descriptive name so you can easily identify it later (e.g., KPU AskAway EBSCO)
- Customize the chat skin using the instructions above
- Click "Save" to save all changes
- When you're ready to use the new chat skin you've created in a chat snippet, see the FAQ Edit or create a new embedded chat box for your library