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

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. Questions? Ask us!
    
4. In the Offline appearance section (under What guests will see when your service is unavailable), add the linked phrase you want guests to see when your service is offline.
    
   • Example mailto link:
     <a href="mailto:YOUR-EMAIL@YOUR-DOMAIN">Chat is offline. Email us!</a>
      
   • Example link to your email contact page:
     <a href="https://YOUR-DOMAIN/CONTACTPAGE">Chat is offline. Email us!</a>
      
   • Example link to your LibraryH3lp FAQ:
     <a href="https://FAQ-NAME.ask.libraryh3lp.com">Chat is offline. View our FAQ!</a>
      
5. 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.
    
6. In the Offline appearance section just below your offline link, add this custom styling and tweak it to match your web page theme:
   
   <style type="text/css">
    .libraryh3lp a {
      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 a:hover {
      color: #fff;
      padding-bottom: 1em;
    }
   </style>
7. 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.

FAQ URL: