Zopim Live Chat
Hide for mobile devices (9 posts)

  1. Please Help
    Posted 3 years ago #

    Zopim live chat takes up the whole screen on mobile devices and small screens.

    What CSS can I use to hide it when a screen size is below say 600px wide?



  2. milawei
    Posted 3 years ago #

    I think it can't work with CSS but with javascript. I put the content of the zopim-script in a separate file and call the script now only if the screen-size is bigger than 900. Not sure if this is an elegant version, but it seems to work for me. The following code must go in the the head section of your site :

    <script type="text/javascript">
    if (screen && screen.width > 900)
      document.write('<script type="text/javascript" src="http://path-here/js/zopim.js"><\/script>');
  3. gdatri
    Posted 3 years ago #

    I tryed but do not work...

  4. gogenich
    Posted 3 years ago #

    Hi. I have this problem too. I think it is popular addon. Can you do it, like otions?

  5. bencxr
    Plugin Author

    Posted 3 years ago #

    Hi there,

    This is a support staff from Zopim.

    Sorry for the delayed reply =(

    Here's the code to hide Zopim if the screen widget is less than 600px.
    Just paste the code within the footer file of your current theme - paste it before the </body> tag =)

    $zopim(function() {
    zopim_elements = document.getElementsByClassName('zopim');
    if (Math.min(document.documentElement.clientHeight, document.documentElement.clientWidth) <= 600) {
    for (var i =0; i<zopim_elements.length ; i++) {
    zopim_elements[i].style.display = 'none';
    zopim_elements[i].style.visibility = 'hidden';

    Hope this helps. Please feel free to let us know if you need anything further. Come chat with us live from our website at http://www.zopim.com to get fast assistance. We are available 24 hours everyday, all work week days =)

    Team Zopim

  6. gogenich
    Posted 3 years ago #

    It is working only if it is on < script tag (Java). And its not working on iphone. See http://www.happy33.ru

  7. bencxr
    Plugin Author

    Posted 3 years ago #

    Hi gogenich,

    Thanks for the update.

    It'll take a bit of coding to hide the widget via mobile. First, you've disable / delete the Zopim plugin and install it manually. It's relatively easy =)

    Here's how you can install Zopim chat widget at WordPress, manually.
    1. Log on to WP-admin page.
    2. Find "Appearance" located in the side bar.
    3. Hover your cursor over at "Editor" and click it
    4. Find "Footer (footer.php)" and click it
    5. Paste your Zopim code right before the </body> tag inside footer template.
    6. Click at "Update File" below and done!

    Now you have the widget on your website, next step is to hide it. Add the code that follows and put your widget code within the if statement.

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

    //your widget code here.


  8. gogenich
    Posted 3 years ago #

    It is good) Thanks
    P.S. you forgot </script> at the end of the code.

  9. bencxr
    Plugin Author

    Posted 3 years ago #

    Woops! Forgot that part :D
    Thanks for pointing that out!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Zopim Live Chat
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic