What is the difference between a chat box skin and a chat snippet?

A chat box skin and a chat snippet are two different components used in customizing the appearance and behavior of the chat service on your website.

A chat box skin refers to the visual design and branding of the chat box. It includes elements such as the background color, presence theme, title, operator identity, font colors, and optional greeting, and optional entry form. The chat skin defines the overall look and feel of the chat box.  

On the other hand, a chat snippet is a piece of embed code that you place on your web site to display the chat box with the desired skin, optional proactive chat invitations, and the desired appearance when chat is offline. It includes the necessary JavaScript and HTML code to load and interact with the chat box. The chat snippet is responsible for integrating the chat box into your website and specifying the chat skin to be used. 

In summary, the chat skin determines the visual appearance and branding of the chat box itself, while the chat snippet is the embed code that enables the chat box and other chat-related items (such as the appearance when chat is offline) to be displayed and used on your website.

How can I tell them apart by looking at code?

A chat skin will appear as a parameter on the end of a simple chat box URL.  In cases where you are not able to use a JavaScript chat snippet on your web site, an alternative simple chat box URL can provide an overlay with an offline contact information, and you will still see the skin parameter in this alternative URL.  Here are examples of simple chat box URLs where "123456" is the chat skin ID number:

Standard chat box URL with skin parameter:

https://libraryh3lp.com/chat/libh3lp-faq-support@chat.libraryh3lp.com?skin=123456

Alternative chat box URL with skin parameter and offline contact overlay:

https://libraryh3lp.com/html/chat-box.html?queue=libraryh3lp-faq-support&skin=123456&email=support@libraryh3lp.com

A chat snippet can be identified by looking at the end of the embed code line that starts with "x.src" and looking for the ID number at the end of that line, after libraryh3lp.js.  For example, the following line in a chat snippet is for chat snippet # 999999:

<!-- Place this div in your web page where you want your chat widget to appear. -->
<div class="needs-js">chat loading...</div>

<!-- Place this script as near to the end of your BODY as possible. -->
<script type="text/javascript">
  (function() {
    var x = document.createElement("script"); x.type = "text/javascript"; x.async = true;
    x.src = (document.location.protocol === "https:" ? "https://" : "http://") + "libraryh3lp.com/js/libraryh3lp.js?999999";
    var y = document.getElementsByTagName("script")[0]; y.parentNode.insertBefore(x, y);
  })();
</script>

How do I edit each thing?

In the dashboard interface, look at the left navigation menu as a user with Administrator priveledges. 

The chat skin editor has an icon that looks like a paintbrush with a "chat skin" tooltip.

The chat snippet editor has an icon that looks like angle brackets < > and a "chat snippets" tooltip.

FAQ URL: