Developer: How to automatically display the chat after some time (jQuery)

Signup for a free 18-days trial today

Developer: How to automatically display the chat after some time (jQuery)

In Knowledge base >

Note: This is a jQuery example.

This is an example of how to automatically display the chat button after a number of seconds for first time visitors. Repeated visitors will see the chat right away.

You should use this in cases where you want your users to spend more time on your website first before engaging with your chat. You can setup many reactions in Settings under the backend administration interface, e.g. auto start the chat session, don’t show the chat when you are offline, and more.

The chat is set to be hidden from the beginning with a <style/> tag.

The 30*1000 is the number of milliseconds, which correspond to 30 seconds. It sets a timeout when the page DOM has been loaded, and when the timeout is reached it calls showChat().

The showChat() function will remove the inline style, and display the chat only if the chat has been hidden. The user has to remove his cookies, or not visit your website for 60 days for this action to be repeated.

Replace .yoursubdomain_floatbtn with the actual subdomain of your cSupport account. If your cSupport account is located at http://chat.csupporthq.com/ then you need to use the subdomain chat. So .yoursubdomain_floatbtn should be replaced with .chat_floatbtn.

<style type="text/css" data-type="csupport_preload">
.yoursubdomain_floatbtn {display:none !important;}
</style>

<script type="text/javascript">
jQuery(document).ready(function(){
	if (getCookie('chat_shown') != 'true')
	{
		var timeout_show_chat = setTimeout('showChat()', 30*1000);
	}
	else
	{
		showChat();
	}
});

function showChat()
{
	if (jQuery('.yoursubdomain_floatbtn').css('display') == 'none' && getCookie('chat_shown') != 'true')
	{
		setCookie('chat_shown', 'true', 60);
	}
	jQuery('style[data-type="csupport_preload"]').remove();
}

function setCookie(c_name,value,exdays)
{
	var exdate=new Date();
	exdate.setDate(exdate.getDate() + exdays);
	var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
	document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
	var i,x,y,ARRcookies=document.cookie.split(";");
	for (i=0;i<ARRcookies.length;i++)
	{
		x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
		y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
		x=x.replace(/^\s+|\s+$/g,"");
		if (x==c_name)
		{
			return unescape(y);
		}
	}
}
</script>

Note: Cookie functions are just standard W3School examples, taken from http://www.w3schools.com/js/js_cookies.asp