Custom Chat Box CSS

CSS Customization Plan Required for this Tutorial

So you want to make a really pretty Olark, eh? All of Olark is styled using CSS classes. By embedding a stylesheet with the classes defined in example.css below, you can do all sorts of snappy custom designs. Once you do that, you can head over to the customizer to turn off the default CSS styles so that your styles will take over!

Remember that CSS does not overwrite the "Powered by Olark" link. To remove that branding, you'll still need a plan that supports white label.

Embed this example in your page in between a <style></style> then contact us.

Download Example

Note: We are constantly improving Olark, but we'll try to keep things as backwards compatible as possible. Even so, you may need to change your styling in the future as we release more advanced and more powerful chat widgets.

Additional themes

Use these as starting points: