Recently, I was charged with integrating zopim with musicxray.com in an effort to improve our customer support experience. I must say, the software is really nice and functions about as good as I could have hoped for.
That said, if you have a design that does not allow for an ever present chat widget located in one of the four corners of you site, then you will have to use the zopim api and implement your own button.
Notice the button on the right side of the page. It fits with the theme of the site and is in a location of our choosing with an icon of our choosing. The html markup to achieve this button on our site is something like the following.
important: for this to work, you need to make sure that your zopim widget is hidden by default, you can do so using the zopim widget configuration interface
Your markup may be slightly different but for illustration purposes this should work. The important thing is that the “hidden” class hides the contents of the div. So you’ll need to specify some css to make that happen. Once you’ve got that markup on your site you will need to write a bit of javascript. We are using jQuery for dom manipulation but that isn’t a requirement. The following should give you a good starting point for getting things working.
If you found this little snipped helpful or harmful then please leave a comment so we can discuss thins further.