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 ( */
  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. You can configure the base design of your chatbox in your Design settings.

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

<div id="wrapper">
<h1>Olark Live Chat</h1>
<div id="olark-box-container"></div>

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


Important Notice: We’ll do our best to help with any questions you have. Setting Olark inline is intended to be self-service for developers, so we’re not able to write or debug your own code. Please also note that inline chatbox will not work on mobile.

Was this article helpful?