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



Search the LibraryH3lp Knowledge Base

 

 


How can I add a chat tab to a web page?

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

 

It just takes a little bit of custom styling to transform your service's online and offline appearance into a tab that appears at the bottom of a web page.  When guests click the tab, they'll get a chat widget in its own small window.  And when your service is offline, you can direct guests to email or your FAQ.

Here is how you can edit your service code snippet to create a chat tab:

  1. Log into the Chat Snippets management page.
     
    Links by regional server: US, CA, EU, SG
     
  2. Find and edit an existing service or add a new service.  You'll want to use either the pop-up or follow-me style of chat widget.
     
  3. In the service edit page, update the Online appearance section (under Routing for incoming chats) with the phrase you want guests to see when your service is online. 

    E.g. Chat is online
     
  4. In the Offline appearance section (under What guests will see when your service is unavailable), add the phrase you want guests to see when your service is offline. 

    E.g. Chat is offline
     
  5. (optional) If you'd like to direct guests to email or your FAQ when your service is offline, change your offline text into a link.
     
    • Example mailto link:
      <a href="mailto:YOUR-EMAIL@YOUR-DOMAIN">Chat is offline</a>
       
    • Example link to your email contact page:
      <a href="http://YOUR-DOMAIN/CONTACTPAGE">Chat is offline. Email us!</a>
       
    • Example link to your LibraryH3lp FAQ:
      <a href="http://FAQ-NAME.ask.libraryh3lp.com">Chat is offline. Try our FAQ!</a>
       
  6. In the Browser JavaScript disabled / Service error tab next to the Offline appearance tab, add the same phrase or link as in the Offline appearance tab.
     
  7. In the Offline appearance section just below your offline phrase (or link), add this custom styling and tweak it to match your web page theme:

    <style type="text/css">
     .libraryh3lp {
       background: #005293; /* Fallback for IE7 & IE8 */
       background: rgba(0, 82, 147, 1);
       border: 1px solid #c0c0c0;
       border-bottom: 0;
       border-radius: .5em .5em 0 0;
       -moz-border-radius: .5em .5em 0 0;
       -webkit-border-radius: .5em .5em 0 0;
       box-sizing: inherit;
       color: #fff;
       cursor: pointer;
       font-size: 1.5em;
       line-height:  1em;
       padding: 0.5em;
       position: fixed;
       text-align: center;
       text-decoration: none;
       z-index: 100;
       bottom: 0;
       right: 10%;
     }
     .libraryh3lp:hover {
       padding-bottom: 1em;
     }‚Äč

    </style>
  8. Save your service.

If you've edited an existing service, refresh the web page containing your service code snippet.  The changes should be auto-magically picked up.

If you've added a new service, cut and paste the snippet for that service from the services management page (US, CA, EU, SG) into a web page.

Topics