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 banner image to my chat box title?

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

 

When using an 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.

This is example chat skin number 21760.

Overview

Use the widget skin designer in the admin dashboard, locate the Title field.  Plug in the HTML to create a clickable image in the chat box title. Wrap the image in an a href tag with target=_blank and your image becomes clickable. This is useful if you're creating a banner to advertise something like a survey.

Then, use the Wicked CSS Hack area to create extra space at the top of the chat box, if needed, to position your image.

Title:

<a border="0" target="_blank" href="https://libraryh3lp.com/"><img alt="banner" src="https://libraryh3lp.com/img/widget-assets/bg_branding_header.png"></a>

 

Wicked CSS Hack:

#title {
position: absolute;
top: -23px;
}

#layout {
top: 49px;
height: expression(document.body.clientHeight - 60 - 10*parseInt(document.body.currentStyle.fontSize) + 'px');
}

 

Topics