Sometimes there can be a CSS conflict between styling on your site and the Olark chatbox.

Usually this is caused if there is a CSS rule that mis-targets and accidentally touches the rules of the Olark chatbox.

To check if a CSS conflict causing the chatbox to look strange you can test Olark on a blank HTML page. Try putting your Olark install code on plain HTML page like the following:

<title>Chatbox Preview</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- begin olark code -->
<script type="text/javascript" async>
y=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)};
k=y._={s:[],t:[+new Date],c:{},l:a};
/* Add configuration calls bellow this comment */
<!-- end olark code -->


Make sure to replace YOUR_SITE_ID_HERE with your own Olark Site ID

If the chatbox on the blank page looks normal then this most often points to a CSS conflict. If you can't narrow down what CSS rule is causing the conflict our team would be happy to help.