1. Zendesk Develop
  2. Zendesk embeddables
  3. Chat widget API developer guide (Chat-only accounts)

Hiding the Chat widget on mobile devices

Zendesk Team
  • Updated
Note: This guide applies only to the Chat widget from Chat-only accounts, not from Chat+Support accounts. See About Chat account types in the Chat Help Center.

You can hide the Chat widget from visitors on mobile devices.

  1. Paste the following script tag in the head of the page or pages that have the widget.

    <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) {

    //place your chat embed code here without the <script> tags

}
</script>

    The first part of the script determines whether or not the web client is a mobile device. The second part displays the widget only if it's not a mobile device.

  2. Move the widget embed code to the location in the script above.

    In this case, remove the script tags that normally enclose the embed code.

 

Have more questions? Submit a request

7 Comments

Sort by Date Votes
  • Jeff Parker
    Comment actions Permalink
    Doesn't work for me.
    0
  • Andrew J
    Comment actions Permalink

    Not working. Using as below.

    `<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) {
    id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=e87=my-key=4e"
    }
    </script>`

    0
  • Peter Vandendriesse
    Comment actions Permalink

    Can we get an update on this?  The suggested fix doesnt seem to take into account the usual embed code (Andrew Mills' response here shows the incorrect fix if the instructions are followed exactly ) 

    0
  • Charles Nadeau
    Comment actions Permalink

    Please note that this article applies to Chat-only accounts. There are two main types of Chat accounts:

    • Chat-only offers Zendesk Chat communication with your customers, and nothing else.
    • Chat + Support combines Zendesk Chat with a Zendesk Support account, which allows you to share data and functionality between the two products.

    See About Chat account types in the Chat Help Center.

    The embed code varies between the two. The Chat-only embed code looks as follows:

    <script>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/?2LOuzDNZKZgAjXUrtRuXlGJ0Iiwx4A6t";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");</script>

    The Chat+Support embed code looks like Andrew's snippet above:

    <script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=e87=my-key=4e"></script>

    I'll update the introduction to make this clearer.

    0
  • Peter Vandendriesse
    Comment actions Permalink

    Ah, thanks Charles, that makes sense! 

    So how can we hide the widget on mobile if we have a Chat+Support account?

    0
  • Muvluv1987
    • Edited
    Comment actions Permalink
    For chat + support account, you can hide the widget on mobile by following code snippet
    <script>

    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) {

      var script = document.createElement('script');

      script.id = 'ze-snippet';

      script.src = 'https://static.zdassets.com/ekr/snippet.js?key=mykeyhere';

      document.head.appendChild(script);

    }

    </script>
     
    1
  • Bryan - Community Manager
    Comment actions Permalink

    Thanks for that Muvluv1987!

    0

Please sign in to leave a comment.

Related articles

Related articles

Powered by Zendesk