My chatbox looks strange

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.

Thank you! Your submission has been received and you'll hear from us shortly!

Oops! Something went wrong while submitting the form.