Help » Draw attention to Olark - Click to chat images

Add click to chat images to Olark

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
Available/Unavailable Image
Callout Image on Widget
Click to Chat Tabs

Place a click to chat link anywhere on your page

Add the following code to your website where you want the link to appear.  <a href="javascript:void(0);" onclick="habla_window.expand()">click here to chat!</a>
Optional for Premium Users
Visit the customizer to turn "Invisible Olark" ON. This way the widget doesn't show unless somebody clicks on your link.

Return to Top

Place a click to chat image anywhere on your page

Place this code where you want your image to appear (you can change the source of the online and offline image): Log in to Olark to get your code
Optional for Premium Users
Visit the customizer to turn "Invisible Olark" ON. This way the widget doesn't show unless somebody clicks on your link.

Return to Top

Add a click to chat image above the minimized widget (as seen on Olark.com)

Paste the following script anywhere within the <body> tags of your webpage:
 <style> #habla_window_div{ z-index:5000; display: none; } #habla_window_div #callout{ /*Change background url, height and width to your image dimensions, and bottom and right to adjust your image placement*/ background: url(http://www.olark.com/portal/images/thisisolark-trans.png) no-repeat; height: 153px; width: 164px; bottom: 25px; right: 90px; position: absolute; z-index: -1; cursor: pointer; } #habla_window_div a:hover{ background-color:transparent; } </style> <div id="habla_window_div"> <div id="habla_available_div"> <a href="javascript:void(0);" onclick="habla_window.expand()"><div id="callout"></div></a> </div> </div>
Optional for Premium Users
Visit the customizer to turn "Invisible Olark" ON. This way the widget doesn't show unless somebody clicks on your link.

Return to Top

Chat Tab (Image Based)

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

Copy the following code within the body of your html.  <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="habla_window.expand()"><img src="http://static.olark.com/images/livehelp-tab-icon.png" /></a> </div>
Optional for Premium Users
Visit the customizer to turn "Invisible Olark" ON. This way the widget doesn't show unless somebody clicks on your link.

Chat Tab (Fully CSS Based)

Full CSS Version (may have some browser incompatibilities)

Copy the following code within the body of your html.  <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="habla_window.expand()">click to chat</a> </div> </div>
Optional for Premium Users
Visit the customizer to turn "Invisible Olark" ON. This way the widget doesn't show unless somebody clicks on your link.

Return to Top