This guide shows how to use some custom code to make your Olark chat box animate in and out from the side of your website.

Note: We’re using custom HTML, CSS and Javascript here which is provided as a how-to. In other words, this is intended to be helpful and give you a head start on coding this yourself.

  1. First of all, let’s create a simple HTML layout.

    <div id="olark-box-wrapper">
    
      <!-- Olark click-to-chat tab -->
      <a id="side-chat" href="javascript:void(0);" onclick="changeClass()">
             Click here to chat!
      </a>
    
      <!-- Empty container for Olark chat box  -->
      <div id="olark-box-container"></div>
    
    </div>
    

    Here we have created a link which will be used to expand and shrink the Olark chat box. We’ve also created a <div> for the Olark chat box to fit inside. It’s all wrapped with a parent container.

    Notice the onclick="changeClass() event on the link itself. This means when the link is clicked, it will look to perform a function called changeClass, which we will create below.

  2. Next, we’ll use Javascript force the Olark chat box to load inside in a HTML <div> element. This line goes in your existing chat box code from the Olark install page where it says custom configuration goes here.

    /* custom configuration goes here (www.olark.com/documentation) */
    olark.configure('box.inline', true);
    
  3. We now need some custom Javascript to add a class to the wrapper, depending on whether the chat box was already closed or open.

    // Keep things from polluting the global namespace, except changeClass, which we want accessible
    var changeClass;
    
    (function (d, olk) {
        // These functions are helpers for the below
        function getOlarkWrapper() {
            return d.getElementById("olark-box-wrapper");
        }
    
        function setOlarkVisible(olark_wrapper) {
            olark_wrapper.className = "chatbox-open";
        }
    
        function setOlarkHidden(olark_wrapper) {
            olark_wrapper.className = "chatbox-closed";
        }
    
        function olarkIsVisible(olark_wrapper) {
            return olark_wrapper.className.match(/(?:^|\s)chatbox-open(?!\S)/);
        }
    
        // This is used by the link to show/hide the inline page element
        changeClass = function() {
            var olark_wrapper = getOlarkWrapper();
            // Get the HTML object containing the Olark chat box
            // If the chat box is already open, close id
            if (olarkIsVisible(olark_wrapper)) {
                setOlarkHidden(olark_wrapper);
            } else {
                setOlarkVisible(olark_wrapper);
            }
        }
    
        // This is used to cause the box to auto-open if a visitor is already in conversation
        olk('api.visitor.getDetails', function (details) {
            if (details.isConversing) {
                setOlarkVisible(getOlarkWrapper());
            }
        });
    }(document, olark));
    

    Could this be done with less code using jQuery? Sure! But then, this method doesn’t require any external libraries.

  4. Use CSS to style animate the chat box and change its position, whether it’s open or closed.

    #olark-box-wrapper {
        position: fixed;
        width: 300px;
        top: 100px;
        left: -300px;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
    }
    
    #olark-box-wrapper.chatbox-open {
        left: 0;
    }
    
    #olark-box-wrapper.chatbox-closed {
        left: -300px;
    }
    

    This uses CSS3 animations, which may not work in all browsers.

  5. Finally, I’m going to style the click-to-chat button, to match my current theme.

    #side-chat {
        position: absolute;
        left: 100%;
        top: 0;
        background: #ce4f28;
        border-radius: 0 5px 5px 0;
        color: #fff;
        text-decoration: none;
        width: 150px;
        padding: 10px;
        font-size: 14px;
        line-height: 14px;
        text-align: center;    
    }
    

    For my theme, I also need to override the default margin on the Olark chat box.

    #habla_window_div {
        margin: 0 !important;
    }
    
  6. That’s it. Here’s an example of how this looks (you can do better!)

side-tab chatbox image

This is the full code. Be sure if you copy and paste that you change the Site ID.