Developer: How to customize color of chat

Signup for a free 18-days trial today

Developer: How to customize color of chat

In Knowledge base >

You just need to use your base HEX color, our script will take care of the rest. Always remember the hash-symbol (#) for a valid color!

Take a look at the example below:

<script type="text/javascript">
	(function(d,c){
		var scrs=d.getElementsByTagName("script");var scr=scrs[scrs.length-1];var e=d.createElement("script");e.async=true;e.src=("https:"==document.location.protocol?"https://":"http://")+"chat.csupporthq.com/external/chat-float-inline.js?"+scrs.length;
		if(typeof c=="function")if(e.addEventListener)e.addEventListener("load",c,false);else if(e.readyState)e.onreadystatechange=function(){if(this.readyState=="loaded")c();};
		scr.parentNode.insertBefore(e,scr);
	})(document,null);
	// Below is the HEX color code
	var cs_bgcolor="#5B94B9";
</script>

You can also be more creative and make random colors, or select colors depending on the page.

An example of random color change

<script type="text/javascript">
	(function(d,c){
		var scrs=d.getElementsByTagName("script");var scr=scrs[scrs.length-1];var e=d.createElement("script");e.async=true;e.src=("https:"==document.location.protocol?"https://":"http://")+"chat.csupporthq.com/external/chat-float-inline.js?"+scrs.length;
		if(typeof c=="function")if(e.addEventListener)e.addEventListener("load",c,false);else if(e.readyState)e.onreadystatechange=function(){if(this.readyState=="loaded")c();};
		scr.parentNode.insertBefore(e,scr);
	})(document,null);
	// Below is the HEX color code
	// Based from http://paulirish.com/2009/random-hex-color-code-snippets/
	var cs_bgcolor="#"+(function(a,b){while(a--){b+=""+(~~(Math.random()*16)).toString(16);} return b;})(6,"");
</script>

An example of list of colors to use randomly

<script type="text/javascript">
	(function(d,c){
		var scrs=d.getElementsByTagName("script");var scr=scrs[scrs.length-1];var e=d.createElement("script");e.async=true;e.src=("https:"==document.location.protocol?"https://":"http://")+"chat.csupporthq.com/external/chat-float-inline.js?"+scrs.length;
		if(typeof c=="function")if(e.addEventListener)e.addEventListener("load",c,false);else if(e.readyState)e.onreadystatechange=function(){if(this.readyState=="loaded")c();};
		scr.parentNode.insertBefore(e,scr);
	})(document,null);
	// Below is the HEX color code
	var color_array = ["#4B9E19","#4078F3","#1E1E1E"];
	var cs_bgcolor=color_array[Math.floor(Math.random()*color_array.length)];
</script>