You can set Olark inline by pasting a little extra JavaScript.

  1. Find the following in the Olark install code on your website:

     /* custom configuration goes here (www.olark.com/documentation) */
    
  2. Now paste the following code immediately afterward:

     olark.configure('box.inline', true);
    
  3. Add a div container where you want the chatbox to appear

     <div id="olark-box-container"></div>
    

Instead of having the Olark chat window float in the bottom corner we will search your page for the below div and insert it there instead.

When using the inline option, the widget will look exactly the same as it does when it is expanded on your website, but instead of it being in the corner of your page it will be locked to the div you assign it to. The visitor cannot expand or shrink the chatbox when it is inline. Your appearance page is where you configure the base design of your widget.

This rudimentary example shows the chat box inside a wrapper, with a header.

<div id="wrapper">
<h1>My website</h1>
<div id="olark-box-container"></div>
</div>

It produces the example below (we are sure that you can do better!)

An example of how the inline chatbox looks