Wait! This article is part of our Developers section. Be sure to understand how each of the snippets works before customizing them for your site. We link to several helpful resources for learning, debugging and how we can help in our Developer API docs.

You can set Olark inline by pasting a litte 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);

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!

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

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>

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