Adding Click-to-Chat Images

Olark is an extremely effective tool for increasing sales, but only if people see and use it! Sometimes it can be more effective if you add large attention grabbing images, or "click to chat" images that are strategically placed on your website. Other times you may only want to show Olark when someone clicks on one of these images (requires a premium account) to conserve screen real estate. This tutorial runs over some ways to add this sort of functionality.

• Click to Chat Link
  
• Availablity Image
  
• Click to Chat Tabs
  

Place a click to chat link anywhere on your page

1. Add this code to your site where you want the link to appear: <!-- BEGIN OLARK CHAT LINK --> <a href="javascript:void(0);" onclick="olark('api.box.expand')"> Click here to chat! </a> <!-- IMAGE OLARK CHAT LINK -->
2. Optional for Premium Users

   Visit the customizer (advanced settings) to turn "Invisible Olark" ON. This way the widget doesn't show unless somebody clicks on your link.

Place a click to chat image anywhere on your page

1. Place this code where you want your image to appear (the links to the images should be after online= and offline= in the src attribute) Log in to Olark to get your code
2. Optional for Premium Users
   Visit the customizer (advanced settings) to turn "Invisible Olark" ON. This way the widget doesn't show unless somebody clicks on your link.

Chat Tab - Image Based

Remember, you can use your own custom image or change the position by modifying this code.

1. Copy the following code within the body of your html. <!-- BEGIN OLARK IMAGE TAB--> <style> div#olark_tab{ position: fixed; left: 0; bottom:0%; z-index:5000; } #olark_tab a { display:block; /*Edit these to change the look of your tab*/ border: 3px solid white; border-left-style: none; border-bottom-style: none; margin-top:0px; } #olark_tab a:hover{ border-color: orange; } </style> <div id="olark_tab"> <a href="javascript:void(0);" onclick="olark('api.box.expand')"><img src="http://static.olark.com/images/livehelp-tab-icon.png" /></a> </div> <!-- END OLARK TAB-->
2. Optional for Premium Users
   Visit the customizer (advanced settings) to turn "Invisible Olark" ON. This way the widget doesn't show unless somebody clicks on your link.

Chat Tab - Fully CSS Based

(may have some browser incompatibilities)

1. Copy the following code within the body of your html. <!-- BEGIN OLARK TAB--> <style> div#olark_tab{ position: fixed; left: 0; bottom:40%; z-index:5000; } #olark_tab div{ height: 150px; width: 150px; float: left; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); } #olark_tab a{ /*Edit these to change the look of your tab*/ background-color: black; color: white; font: bold 18px "century gothic"; height: 20px; padding: 6px; border: 2px solid #363636; display: block; text-decoration: none; text-align: center; width: auto; -webkit-border-bottom-right-radius:9px; -webkit-border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -moz-border-radius-bottomright:9px; border-top-style: none; border-top-width: 0; } #olark_tab a:hover{ background-color: white; color: black; } </style> <div id="olark_tab"> <div> <a href="javascript:void(0);" onclick="olark('api.box.expand')">click to chat</a> </div> </div> <!-- END OLARK TAB-->
2. Optional for Premium Users
   Visit the customizer (advanced settings) to turn "Invisible Olark" ON. This way the widget doesn't show unless somebody clicks on your link.