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 agent or using the Greeter or Targeted Chat rules, the chat box will automatically appear and expand itself.

Contents

This article contains four short guides with examples. They are:

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

  1. Copy the following HTML code.

    <!-- BEGIN OLARK CHAT LINK -->
    <a href="javascript:void(0);" onclick="olark('api.box.expand')">
        Click here to chat!
    </a>
    <!-- END 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:

click to chat text link

Click-to-chat image

  1. Copy the following HTML code.

    <!-- BEGIN OLARK CHAT IMAGE -->
    <a href="javascript:void(0);" onclick="olark('api.box.expand')">
          <img src="https://static.olark.com/imageservice/library/thumbnails/simple/hummingbird-attention-woman-2.jpg.thumb-200-200.png">
        </a>
    <!-- END OLARK CHAT IMAGE -->
    

Note: You can find the siteID for your account here.

  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.

  2. Save your page and reload.

It should look something like this:

click to chat link image

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 TAB-->   
    <div id="olark_tab">
        <a href="javascript:void(0);" onclick="olark('api.box.expand')">
            <img src="https://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. Include the following CSS either in your HTML document or your CSS stylesheet. If including in your CSS stylesheet, the <style> and </style> tags are not necessary:

    <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>
    
  4. Save your page and reload.

It should look something like this:

Side tab click to chat image

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 code.

    <!-- BEGIN OLARK TAB-->
    <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. Include the following CSS either in your HTML document or your CSS stylesheet. If including in your CSS stylesheet, the <style> and </style> tags are not necessary:

    <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>
    
  4. Save your page and reload. It should look something like this example.