How can I make a floating chat button in the corner of my page, like you all have on your site?

It just takes a little bit of custom styling to transform your service's online and offline appearance into a floating button that appears at the bottom of a web page.  When guests click the button, 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, or simply indicate that chat is offline with no link at all.

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

1. Log into the Chat Snippets management page. Make sure to sign in as someone with Administrator permissions.
    
   Links by regional server:  Main North America (including US),  CA,  EU,  SG
    
2. Find and edit an existing service or add a new service.  You'll want to use the pop-up style of chat widget.
    
3. In the service edit page, update the Online appearance section (under Routing for incoming chats) with the following HTML: 
    

   <span data-chat-tooltip="We're available! Click to chat.">
     <img src="https://s3.amazonaws.com/libraryh3lp.com/us/buttons/ask-a-librarian/chat-bubbles-light.svg" alt="Chat is online. Click to chat." style="height: 50px; width: 50px;">
   </span>
   

   Note that you can change the wording on the tooltip, and the alternative text for the image.
   
   


4. Now, we need to work in the Offline appearance section (under What guests will see when your service is unavailable).  This is where all of the styling happens, in addition to controlling the offline behavior itself.
   
    
   • Part A - Start by pasting in the following into the Offline appearance area. This is the basic HTML that contains the envelope image and the behavior for your offline link.
      

     <a href="" data-chat-tooltip="Chat is offline. E-mail us.">
         <img src="https://s3.amazonaws.com/libraryh3lp.com/us/buttons/ask-a-librarian/email-envelope-light.svg" alt="Chat is offline. Click to email us." style="height: 50px; width: 50px;" /></a>
     

      

     Modify the link target (a href="") so that it does what you're after:

     • Example mailto:
       <a href="mailto:YOUR-EMAIL@YOUR-DOMAIN">
        
     • Example for your email contact page:
       <a href="https://YOUR-DOMAIN/CONTACTPAGE">
        
     • Example for your LibraryH3lp FAQ:
       <a href="https://FAQ-NAME.ask.libraryh3lp.com">
        
   • Part B - Just below the HTML you provided above, add the following custom styling and tweak it to match your web page theme.  The main background color and the hover colors are the background-color in the .libraryh3lp section and the background-color in the .libraryh3lp-hover section:
      

     	<style type="text/css">
     	.libraryh3lp {
     	   background-color: #294A70;
     	   border: 2px solid white;
     	   border-radius: 50%;
     	   padding: 16px 20px;
     	   position: fixed;
     	   bottom: 20px;
     	   right: 20px;
     	   z-index: 999;
     	}
     	.libraryh3lp:hover {
     	   background-color: #FFAB1F;
     	}
     	.libraryh3lp img {
     	   margin: 0;
     	}
     	
     	/* Add this attribute to the element that needs a tooltip */
     	[data-chat-tooltip] {
     	   z-index: 2;
     	   cursor: pointer;
     	}
     	
     	/* Hide the tooltip content by default */
     	[data-chat-tooltip]:before,
     	[data-chat-tooltip]:after {
     	   visibility: hidden;
     	   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     	   filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
     	   opacity: 0;
     	   pointer-events: none;
     	}
     	
     	/* Position tooltip above the element */
     	[data-chat-tooltip]:before {
     	   position: absolute;
     	   bottom: 93px;
     	   left: 0;
     	   margin-bottom: 0;
     	   margin-left: -10px;
     	   padding: 7px;
     	   width: 100px;
     	   -webkit-border-radius: 3px;
     	   -moz-border-radius: 3px;
     	   border-radius: 3px;
     	   background-color: #000;
     	   background-color: hsla(0, 0%, 20%, 0.9);
     	   color: #fff;
     	   content: attr(data-chat-tooltip);
     	   text-align: center;
     	   font-size: 14px;
     	   line-height: 1.2;
     	}
     
     	/* Triangle hack to make tooltip look like a speech bubble */
     	[data-chat-tooltip]:after {
     	   position: absolute;
     	   bottom: 90px;
     	   left: 45px;
     	   margin-left: -5px;
     	   width: 0;
     	   border-top: 5px solid #000;
     	   border-top: 5px solid hsla(0, 0%, 20%, 0.9);
     	   border-right: 5px solid transparent;
     	   border-left: 5px solid transparent;
     	   content: " ";
     	   font-size: 0;
     	   line-height: 0;
     	}
     	
     	/* Show tooltip content on hover */
     	[data-chat-tooltip]:hover:before,
     	[data-chat-tooltip]:hover:after {
     	   visibility: visible;
     	   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     	   filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
     	   opacity: 1;
     	}
     	</style>



5. 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: