How to use Zopim chat outside your site.

Most of the time Zopim chat makes your site slower.Here is an example how you can make your site load faster using Zopim chat.

Step 1.

Create html page zopim.html and put this code inside:

<!DOCTYPE html>
<html style="background: transparent;">
<body style="background: transparent;">
	<!--Start of Zopim Live Chat Script-->
	<script type="text/javascript">
	window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
	d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
	_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute('charset','utf-8');
	$.src='//cdn.zopim.com/?id';z.t=+new Date;$.
	type='text/javascript';e.parentNode.insertBefore($,e)})(document,'script');
	</script>
	<!--End of Zopim Live Chat Script-->
</body>
</html>

Step 2.

Go to the page where you want to put Zopim chat and put this code:

<iframe id="zopim-frame" src="path_to_html/zopim.html" height="130px" scrolling="no" style="position:fixed;bottom:0;top:0;overflow: hidden;background:transparent;z-index: 10000;"></iframe>
<script type="text/javascript">
	(function(){
    	$('body').on('mouseenter','#zopim-frame',function(){
    		$(this).height(350);
    	});
    	$('body').on('mouseleave','#zopim-frame',function(){
    		$(this).height(130);
    	});
	})(jQuery);
</script>

That is!

It is not so fancy , but definitely doing the job!

Simple as that.

Suggestions or problems ? Write a comment.