skip to Main Content

How To Hide Zopim Chat Plugin On Mobile Devices

In this article I’ll be showing you how to hide Zopim chat on mobile devices for your WordPress website.

What is Zopim chat?

Zopim Chat is a great plugin for communicating with your website visitors as they browse in real time. However, if like me you found it too intrusive on mobile devices, below I have demonstrated how to disable it on mobile devices only.

There are two ways to embed the Zopim chat widget on a WordPress website:

  1. Using the Zopim chat WordPress Plugin.
  2. Embedding the widget site wide using a script in your website header.

Unfortunately to disable the Zopim plugin on mobile devices you will need to go with option 2. Fortunately, it isn’t too difficult to implement and should only take you 5 minutes.

Log in to your Zopim dashboard

First things first, you need to login to the Zopim dashboard and get your widget embed code. To get your embed code, follow these instructions. From the dashboard:

  1. Click Settings
  2. Click Widget

Get your Zendesk script

Copy and paste the script under getting started. It should look like this:

<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?5F8iYRaLJet7G3DGh3mTiZj2eIhfpSPq";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->

Access your WordPress Theme header

Check your Theme documentation for a header builder. You’ll need to embed this script in the header of your website. An easy way of doing this is to download the Header and Footer Plugin which lets you embed scripts in (you guessed it) the header, body or footer of each page on your website.

Insert this script into your header

This is script you need to embed to disable Zopim Chat on mobile.

Copy and paste your Zendesk widget embed script between the two {} below. As a further note, you will need to remove the <script> opening and </script> closing braces from your Zendesk embed script for this to work.

<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase(),
platform = navigator.platform.toLowerCase();
platformName = ua.match(/ip(?:ad|od|hone)/) ? 'ios' : (ua.match(/(?:webos|android)/) || platform.match(/mac|win|linux/) || ['other'])[0],
isMobile = /ios|android|webos/.test(platformName);

if (!isMobile) {

}
</script>

The completed script

Your completed script should look like this:

<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase(),
platform = navigator.platform.toLowerCase();
platformName = ua.match(/ip(?:ad|od|hone)/) ? 'ios' : (ua.match(/(?:webos|android)/) || platform.match(/mac|win|linux/) || ['other'])[0],
isMobile = /ios|android|webos/.test(platformName);

if (!isMobile) {

window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?5F8iYRaLJet7G3DGh3mTiZj2eIhfpSPq";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");

}
</script>

If you’re still not sure after following these steps, I’ve provided a quick video below showing you the steps. You’ll need to have Header and Footer installed to follow them.

Read next

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email