You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.

Customer engagement is not a cost center. It's an investment in customer relationships.

ZenDesk Chat, or perhaps more accurately Zopim Chat, as they haven't changed almost anything aside from increasing the price since acquiring Zopim in 2014 is a very effective tool in your online marketing arsenal. However, their Javascript API does tend to be rather lacking. One both extreme and annoying example is this is that they only intrinsically provide you with a means to put the chat button on the bottom left, middle, and right on mobile devices, which can be incredibly annoying in instances like the image on the right.

To remedy the issue, I extended the $zopim.livechat.button with a function called resetLocation. Internally, the function simply uses Zopim's intrinsic setOffsetHorizontalMobile and setOffsetVerticalMobile functions and takes x and y as parameters. The function simply takes the available screen height and subtracts the amount height of the header and similarly takes the available screen width and subtracts whatever number that you specify, so that you can add a little space between the edge of the screen and the button.

The code is as follows:

ZenDesk Chat overlapping other element.

// Don't execute the ZopIM script in local environment.
if (window.location.href.indexOf("localhost") <= 0) {
// Begin ZopIM Chat
window.$zopim ||
    (function (d, s) {
        var z = $zopim = function (c) { z._.push(c) },
            $ = z.s =
            e = d.getElementsByTagName(s)[0];
        z.set = function (o) {
        z._ = [];
        z.set._ = [];

        $.async = true;     
        $.deferred = true; // Prevents the script from load blocking.

        $.setAttribute("charset", "utf-8");
        $.src = "[YOUR_KEY]";
        z.t = +new Date;
        $.type = "text/javascript";
        e.parentNode.insertBefore($, e);
    })(document, "script");
// End ZopIM Chat                                   

// Checks if the user is using a mobile browser. You could also check the width, but this is less time consuming. 
function isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

$(document).ready(function () {
    $zopim(function () {
        $zopim.livechat.button = $.extend($zopim.livechat.button,
                setLocation: function (x, y) {
                    $zopim.livechat.button.setOffsetHorizontalMobile(screen.availWidth - x);
                    $zopim.livechat.button.setOffsetVerticalMobile(screen.availHeight - y);

    $(window).resize(function (e) {
        if (this.isMobile()) {
            $zopim(function () { 
                // move it to the top right on mobile devices.
                $zopim.livechat.button.setLocation(105, -150);
        } else {
            $zopim(function () {
                $zopim.livechat.button.setPosition("bl"); // bottom left.

If you have any questions or need any help with your programming project, please feel free to drop me a line anytime, by using our contact form.
Until next time: Happy Coding!

Happy Coding