Help and support

Resources that will teach you everything about LiveChat.

Displaying and hiding chat window on your mobile website

by Jacob Firuta

Even though visitors can access your live chat from mobile devices, it can be useful to hide the chat window on some pages. The chat window can take a fair bit of space and make navigating your mobile website a bit difficult.

To offer a better browsing experience for your mobile website visitors, you can choose to hide it on most of your pages. Using a short script, you can display the chat window only on dedicated pages, e.g. your contact page.

Script installation

To hide your chat window on mobile devices, you will need to add the following script to your websites. The script won’t change the way your chat window is displayed on desktop computers.

<script type="text/javascript">
	if (matchMedia('only screen and (min-width: 641px)').matches) {
		// livechat code here
	}
</script>

You need to swap the // livechat code here portion with your LiveChat code. You can get it from the code section. Simply copy and paste your LiveChat code in the script. Remember to remove the additional <script type="text/javascript"> and </script> from the copied code.

Your code should look similar to this one after the changes:

<script type="text/javascript">
	if (matchMedia('only screen and (min-width: 641px)').matches) {
		window.__lc = window.__lc || {};
		window.__lc.license = 0146331;

		(function() {
			var lc = document.createElement('script');
			lc.type = 'text/javascript';
			lc.async = true;
			lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
		})();
	}
</script>

Next, you will need to place the modified script on your website. The chat window will be hidden only when the script is present in the website’s code.

You can choose to display the chat window on your dedicated contact page. To do so, simply leave the old LiveChat code on the contact page unchanged.

After the new code is placed, your mobile website will no longer be obstructed by the chat window. You can always go back to the old settings by removing the additional bit of code.

Did you find this helpful? Yes No
Thanks for your feedback.
73% of people found this helpful.

Start free LiveChat trial!

5-minute setup, test out the Team plan features for 30 days, no credit card required.