Want to build your own knowledgebase?
Each LibraryH3lp subscription includes unlimited independent internal or public-facing knowledgebases (FAQs).



Search the LibraryH3lp Knowledge Base

 

 


How do I add a background image to a chat box?

339 views   |   Last updated on Feb 14, 2017    chat widget

 

Background images can be used to add branding or visual effects to the chat box. These customizations are added within the Widget designer of the admin dashboard as a Wicked CSS Hack. Background images can be placed nearly anywhere inside the widget.

Background images cannot be made clickable. However, you can use a different technique to place clickable images or text inside the widget title if desired.

When using a background image inside your chat box, it important that the file is placed on a server that supports HTTPS since our chat boxes use https by default and mixed content is blocked by most modern browsers. If you do not have the ability to host your image on a server that supports HTTPS, contact support and we will host the image for you.


Banner at the top


This customization is based on a widget by Cheng Library, William Paterson University.

Overview

Here is the background image file used in the above chat box:

banner

Note that the chat box title, "Ask Us!" is not part of the image; it is set as the title. The orange color of the chat box (#ff6600) is set in the frame as the background color and matches the orange in the banner so that the widget can resize gracefully when detached from the page or when deployed embedded at different dimensions.

Wicked CSS Hack

The background image is placed in the body of the chat box and is set to not repeat. The #layout component is adjusted with margin-top settings to create enough vertical space for the banner:

body {background-image: url(https://us.libraryh3lp.com/img/widget-assets/bg_branding_header.png);background-repeat: no-repeat;}

#layout {margin-top: 18px;}

Small logo watermark image in the #recv area

This is example skin number 21749.


This customization is based on a widget originally by South Texas College Library.

Overview

When placing images in the #recv area, it is important to use a very light, washed-out watermark-style image so that the guest will not have difficulty reading the text of the chat that will occur on top of the image.

Wicked CSS Hack

The background image is placed at the bottom right of the #recv area of the widget and is set to not repeat.

#recv {
  background:  url(https://us.libraryh3lp.com/img/widget-assets/bg_branding_logo_watermark.png) bottom right no-repeat;
}

Repeating color at top for visual effect

This is example skin number 21734.


This customization is based on a widget by Indiana University Bloomington.

Note: Detach the above chat box using the pop-out icon and resize it to see how the background image repeats.

Overview

Here is the background image used to create the overhang effect; the small line creates a solid color bar because it is set to repeat:
bg image line

Wicked CSS Hack

The background image is placed at the top left of the body area of the chat box and is set to repeat horizontally (repeat-x). Background color (#f5f5f5) is also set.

body {
  background: #F5F5F5 url(https://us.libraryh3lp.com/img/widget-assets/maroon_top.png) repeat-x top left fixed;
 }

Repeating watermark image in the #recv area

This is example skin 21734.


Background image is Creative Commons by 2.0 and is by CCAC North Library via Flickr.

Note: Detach the above chat box using the pop-out icon and resize it to see how the background image repeats.

Overview

When placing images in the #recv area, it is important to use a very light, washed-out watermark-style image so that the guest will not have difficulty reading the text of the chat that will occur on top of the image.

Wicked CSS Hack

The background image is placed at the top right of the #recv area of the widget and is set to repeat vertically (repeat-y).

#recv {background: url(https://us.libraryh3lp.com/img/widget-assets/books_bg.png) top right repeat-y;}

Topics