Open CXhub automatically on Desktop/Tablet

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

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

Using a javascript, GTM can detect whether the website is being loaded via a desktop, tablet or mobile. Below we show you how to create the tag in GTM in 4 steps.

Step 1

Go to the GTM Workspace en open variables. Here you can create a new variable by clicking New.
Adjust the new variable to a Custom JavaScript and copy 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 must be made. You are going to create two types of triggers. A trigger to determine whether the website is open on a mobile and a trigger to determine whether the website is open on a desktop/tablet.

First, you're going to create the trigger that determines whether it is a mobile opening the website.
  1. Open Triggers in the menu and click New.
  2. Adjust the new trigger and turn it into a Page View.
  3. Set a This trigger fires on to Some Page Views. Use the variable that 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.
Second, you're going to create the trigger that determines whether it is a desktop/tablet opening the website.
  1. Open Triggers in the menu and click New.
  2. Adjust the new trigger and turn it into a Page View.
  3. Set a This trigger fires on to Some Page Views. Use the variable that you just created and set the trigger to contains false. See the image below for the implementation.
  4. Save the trigger and go to the next step,

Step 3

The next step is to create two tags. These tags ensure that the CXhub is displayed on your website and will determine whether it is a desktop/tablet or mobile opening the website based on the previous two steps.

Open Tags in the menu and click New. Firstly you will be creating the tag that ensures that the CXhub will not open automatically on mobile. Adjust the Tag configuration to Custom HTML and add your chatbot script here.


The complete code then looks like this:

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

You must then check the support document.write box at the bottom of the code.

Now that the tag has been added to GTM you can add the triggers. Adjust the trigger to the one that detects mobile devices (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. Give the tag a name, save it and you have successfully created the tag that shows your CXhub closed on a mobile!
The next tag will be the one that ensures that your CXhub is automatically opened on a desktop / tablet.

Open Tags in the menu and click New. You will now be creating the tag that ensures that the CXhub will open automatically on desktop/tablet. Adjust the Tag configuration to Custom HTML and add your chatbot script here.


The complete code then looks like this:

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

You must then check the support document.write box at the bottom of the code.

Now that the tag has been added to GTM you can add the triggers. Adjust the trigger to the one that detects desktops/tablets (the trigger with contains false). Then add an Exception and choose the trigger that detects mobile devices (the trigger with contains false). See the image below for the implementation. Give the tag a name, save it and you have successfully created the tag that automatically opens your CXhub on desktop and mobile.
Schermafbeelding 2019-06-24 om 13.32.23.png 84.04 KB

Step 4

Well done, you're almost there! Now that you have finished the tags, all you have to do is publish them. You can do this by clicking Submit at the top right of the page.
Fill in a Version Name and Version Description and your new tags will be up and running!

Gerelateerde artikelen

Was this article useful?