Hello! 👋

This guide will show you how to assign different groups on the same URL based on whether visitor is browsing using a mobile or desktop device.

Most common use case for this is to display greetings if visitor is on desktop and not display the greetings for visitors on mobile.

Example of the implementation can be viewed here:

https://paint-oil-dichondra.glitch.me/

https://vimeo.com/576957993

Prerequisites

The LiveChat script needs to be added into the website in a way that lets you access and modify its code, regardless of the method, if you can modify the code, this will work.

For example, it will work if code is implemented into HTML, via Google Tag Manager or inserted into theme. In Shopify it’s recommended to install the code into theme.liquid file. In case of Wordpress website use of a plugin to insert custom code is the easiest way, I recommend this plugin.

If you need to complete this implementation and currently have LiveChat installed by means that won’t let you modify the code, please consider an alternative installation method.

Process

First thing we’ll need is to create 2 groups, one for desktop and one for mobile,

you can do that by heading to the Groups section using link below:

LiveChat

or selecting “Agents” in the left panel inside of LiveChat application, afterwards select “groups” and “add new group”. There you can modify the name of your group and add members, in our case first group should include agents who will be replying to customers that visit your page from mobile devices and the second group should include agents who will be replying to customers that visit your page using desktop devices.

Now we’ll need to check ID for each of those groups, this can be done only using the web version of our application by heading to groups section again and selecting the group.

Number at the end of displayed URL is the group ID:

Now that we have our group ID’s we can start modifying the LiveChat script on your website, here’s how it looks like by default:

<script>
window.__lc = window.__lc || {};
window.__lc.license = 9720060;
;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="<https://cdn.livechatinc.com/tracking.js>",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice))
</script>

and here's how the final version should look like: