Developer: How to modify the position of the inline chat

Signup for a free 18-days trial today

Developer: How to modify the position of the inline chat

In Knowledge base >

To modify the position of the inline chat, you just need add one or more variables to the javascript tag.

Position

In your javascript tag, add before </script> the variable cs_position. See 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 positioning information
	var cs_position="t-r";
</script>

The positions that can be used are:

  • t-l: Top Right
  • t-r: Top Right
  • b-l: Bottom Left
  • b-r: Bottom Right (default)

Margin

In your javascript tag, add before </script> the variables cs_margin. cs_margin defines the distance that the chat should be from the corner. The default are 10 pixels. The margin can be both defined in pixels (px) and percentage (%).

You may use a single value, or double values so you define top/bottom and left/right individually as well. See 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);
	// A margin that is 10px above the bottom, and 5px from the right edge
	var cs_margin="10px/5px";
</script>

Special: Horizontal/Vertical Centering

In some cases, you might want to center horizontally and/or vertically. This can be achieved with a simple CSS hack.

Put the below in your CSS file, or in a style tag in your HTML page:

/********
 * cSupport horizontal centering hack
 ******/
.domain_floatbtn, #outer-framedomain {
	right:50% !important;
	margin-right:-200px !important;
}

You have to replace domain, with the subdomain of your account at cSupport. So if your domain is mychatdomain.csupporthq.com you should use mychatdomain instead of domain in the above code.

Use bottom instead of right if you wish vertical centering. Remember to look out for cs_position. If you use it you need to change top/right accordingly!

This should also give you a good idea how to manipulate the button further with CSS.

Note: This might not do perfect centering for your button, you should adjust margin-right to reflect 50% of the width/height of the button.