Adding a chat link to your website

Being able to make any image or link bring up the Olark chat box lets you highlight your live chat service anywhere on your site. As with all the examples below, we recommend enabling Invisible Olark so that your chat box is hidden until someone clicks the link.

Note: You need to be on a paid account in order to enable Invisible Olark.

If you send a message to your visitor, either as an operator or using the Greeter or Targeted Chat rules, the chat box will automatically appear and expand itself.

You can make the chat box pop out when a link is clicked in any of the examples below by replacing olark('api.box.expand') with olark('api.box.popout').

Click-to-chat link

This click-to-chat link makes use of the Olark Javascript API. You can modify or hide the link itself when your operators are away by using the api.chat.onOperatorsAway call.

1. Copy the following HTML and CSS code.
   
   <!-- BEGIN OLARK CHAT LINK --> <a href="javascript:void(0);" onclick="olark('api.box.expand')"> Click here to chat! </a> <!-- IMAGE OLARK CHAT LINK -->
2. Paste the code in to your website source, anywhere between the two body tags.
3. Save your page and reload. It should look something like this example.

Click-to-chat image

1. Copy the following HTML and CSS code.
   
   <!-- BEGIN OLARK CHAT IMAGE --> <a href="javascript:void(0);" onclick="olark('api.box.expand')"> <img src="http://images-async.olark.com/status/YOUR_SITE_ID/image.png?online=http://static.olark.com/images/image-orangelark-available.png&offline=http://static.olark.com/images/image-orangelark-unavailable.png" border=0> </a> <!-- END OLARK CHAT IMAGE -->
2. 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.
3. Save your page and reload. It should look something like this example.

Chat side tab

You can add a click-to-chat tab to the side of your page. Remember, you can use your own custom image or change the position by modifying this code.

1. Copy the following HTML and CSS code.
   
   <!-- 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. Paste the code in to your website source, anywhere between the two body tags.
3. Save your page and reload. It should look something like this example.

Chat side tab (CSS only)

If you'd rather use a solution that doesn't require any images, you can use CSS to position a click-to-chat tab on the side of your page.

Note: This method uses CSS3 which may not work on older browsers.

1. Copy the following HTML and CSS code.
   
   <!-- 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. Paste the code in to your website source, anywhere between the two body tags.
3. Save your page and reload. It should look something like this example.