Provide 24/7 affordable customer service with AI-powered chat.
Connect to learn more

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.


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>
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 */
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.

Please provide the domain name where your Olark live chat is installed.
Include the relevant transcript URL, if possible. You can send us the specific URL from your Transcripts page.
If you see specific error messages, banners, warnings, notices, etc., please let us know here.
Max file size 10MB.
Upload failed. Max size for files is 10 MB.
Thank you! Your submission has been received and you'll hear from us shortly!
Oops! Something went wrong while submitting the form.