Let Website widget open automatically on desktop/tablet (and not on mobile)

Since the Website widget takes up the entire screen of a mobile when open, it may be desirable to have the Website widget open automatically on desktop and tablet only. With Google Tag Manager (GTM) it is possible to load the Website widget on your website and automatically open it on desktop and tablet, but not on a mobile. In this article we explain how to set this up.

 

For more information on the general use of Google Tag Manager on your website, you can check out the tool's official help center.

 

Using a javascript, Google Tag Manager can detect if the website is loaded from a desktop, tablet or mobile. Below, 4 steps describe how to create the tag in Google Tag Manager.

---

Step 1

Go to the Google Tag Manager Workspace and open variables. Here you can create a new variable by clicking New.

Customize the new variable and make it a Custom JavaScript macro and copy and paste the code below into the variable. After this, don't forget to name the code and save it.

function() {
var a = navigator.userAgent||navigator.vendor||window.opera;
return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))
}

Step 2

Now that the variable has been created, triggers need to be created. You're going to create two. A trigger to determine if the website is opened on a mobile and a trigger to determine if the website is opened on a desktop/tablet.

You will now first create the trigger that determines if it is a mobile.

1. Open Triggers in the menu and click New. 
2. Customize the new trigger and make it a Page View. 
3. Now set an activation and choose Some Page Views. Use the variable you just created and set the trigger to contains true. See the image below for the implementation.
4. Save the trigger and then create the next one.

Step 3

The next step is to create two tags. These tags will cause the Website widget to be displayed on your website and will determine whether it is desktop/tablet or mobile based on the previous two steps.

 

Open Tags in the menu and click on New. You are now going to be the first to create the tag that will cause the Website widget to be shown closed on a mobile. Adjust the Tag Configuration to Custom HTML and add your chatbot script here.

 

Notice! The script contains the line ; window.Watermelon.toggled = false; This should be set to false, so that the Website widget will automatically remain closed. 

 

The complete code will then look like this, for example:

<script type="text/javascript">
    window.Watermelon = window.Watermelon ||| {};
    window.Watermelon.key = "pxxxu2d9xxx8s2tZnxxxtxxxWatTKphOxxxIKxxxhvbfoxxx7vtZxxxZixxb";
    window.Watermelon.toggled = false;
    (function(d,s) {
        s = d.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = "https://wm-livechat-2-prod-dot-watermelonmessenger.appspot.com/assets/js/wm_plugin.js";
        d.getElementsByTagName('script')[0].appendChild(s);
    }(document));
</script>

Next, at the bottom of the code you need to check the document.write support box.

 

Now that the tag has been added you can add the triggers. Modify the trigger to the one that detects the mobile (the trigger with contains true). Then add an Exception and choose the trigger that detects the desktop/tablet (the trigger with contains false). See the image below for the implementation. Name the tag, save it and you have now created the tag that will cause your Website widget to show closed on a mobile!

You have one more tag to go and that's the one that causes your Website widget to be shown open on a desktop/tablet.

Open Tags in the menu and click New. Adjust the Tag Configuration to Custom HTML and add your chatbot script here.

Notice! The script contains the line ; window.Watermelon.toggled = true; This must be set to true, so that the Website widget will open automatically.

 

The complete code will then look like this, for example:

<script type="text/javascript">
    window.Watermelon = window.Watermelon || {};
    window.Watermelon.key = "pxxxu2d9xxx8s2tZnxxxtxxxWatTKphOxxxIKxxxhvbfoxxx7vtZxxxZixxb";
    window.Watermelon.toggled = true;
    (function(d,s) {
        s = d.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = "https://wm-livechat-2-prod-dot-watermelonmessenger.appspot.com/assets/js/wm_plugin.js";
        d.getElementsByTagName('script')[0].appendChild(s);
    }(document));
</script>

Then at the bottom of the code you need to check the document.write support box.

 

Now that the tag has been added you can add the triggers. Change the trigger to the one that detects the desktop/tablet (the trigger with contains false). Next, add an Exception and choose the trigger that detects the mobile (the trigger with contains true). See the image below for the implementation. Name the tag, save it and you have now created the tag that will cause your Website widget to be shown open on a desktop/tablet!

Step 4

Well done, you're almost there! Now that you've finished your tags, all you have to do is publish them. You do this by clicking Submit at the top right of the page.

Fill in a Version Name and Version Description. The tag can now be published!