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.
Troubleshooting
To check if a CSS conflict is causing the chatbox to look strange you can test Olark on a blank HTML page. Try putting your Olark install code on a 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="https://"+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.