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:

<!DOCTYPE HTML>
<html>
<head>
<title>Chatbox Preview</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<!-- begin olark code -->
<script type="text/javascript" async>
;(function(o,l,a,r,k,y){if(o.olark)return;
r="script";y=l.createElement(r);r=l.getElementsByTagName(r)[0];
y.async=1;y.src="//"+a;r.parentNode.insertBefore(y,r);
y=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)};
y.extend=function(i,j){y("extend",i,j)};
y.identify=function(i){y("identify",k.i=i)};
y.configure=function(i,j){y("configure",i,j);k.c[i]=j};
k=y._={s:[],t:[+new Date],c:{},l:a};
})(window,document,"static.olark.com/jsclient/loader.js");
/* Add configuration calls bellow this comment */
olark.identify(YOUR_SITE_ID_HERE);</script>
<!-- end olark code -->

</body>
</html>

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.