Zendesk

Search…
Zendesk
How to merge Blinger widget with Zendesk live-chat?
Step 1. Place the following code before the closing tag </body>:
1
<!-- Zendesk widget source -->
2
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=[your_zendesk_key]"> </script>
3
​
4
<!-- Init and customize Freshchat widget -->
5
<script>
6
    window.zESettings = {
7
        webWidget: {
8
            offset: {
9
                horizontal: '100px'
10
            },
11
        },
12
    };
13
​
14
    zE('webWidget:on', 'close', function() {
15
        zE('webWidget', 'hide');
16
    });
17
</script>
18
​
19
<!-- Init and customize Blinger Widget -->
20
<script>
21
    var showBlinger = function () {
22
        if (typeof Blinger !== 'undefined' && !Blinger.launcherWidget.isOpen) {
23
            document.getElementById('blinger-launcher-iframe').style.display = 'block';
24
        }
25
    };
26
​
27
    window['blingerBeforeRender'] = function () {
28
        var channel = new Blinger.Channels.SimpleActionChannel();
29
        channel.tooltip = 'Livechat';
30
        channel.color = '#75b145';
31
        channel.imageUrl = 'https://app.blinger.io/images/widget2/livechat.png';
32
        channel.action = function () {
33
            zE('webWidget', 'show');
34
            zE('webWidget', 'open');
35
        };
36
​
37
        Blinger.channelsWidget.addChannel(channel);
38
        Blinger.channelsWidget.resizeEnabled = true;
39
    };
40
​
41
    window['blingerInit'] = function () {
42
        document.getElementById('blinger-launcher-iframe').style.display = 'none';
43
    };
44
​
45
    var count = 0;
46
    var waitForZEWidgetloading = function () {
47
        var zEwidgetDisplay = zE('webWidget:get', 'display');
48
​
49
        if (zEwidgetDisplay === 'launcher') {
50
            var element = document.getElementById("launcher");
51
            element.parentNode.removeChild(element);
52
            showBlinger();
53
        } else {
54
            if (count < 20) {
55
                setTimeout(function () {
56
                    waitForZEWidgetloading();
57
                }, 300);
58
                count++;
59
            }
60
        }
61
    };
62
​
63
    waitForZEWidgetloading();
64
​
65
    (function (d) {
66
        var s = d.createElement("script");
67
        s.async = true;
68
        s.charset = "utf-8";
69
        s.src = "https://app.blinger.io/uploads/widgets2/[Value].js";
70
        d.head.appendChild(s);
71
    })(window.document);
72
</script>
Copied!
Step 2. Insert widget's token from your Zendesk admin instead of [your_zendesk_key].
1
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=[your_zendesk_key]"> </script>
Copied!
You can find widget's token in: Admin > Widget > "Setup" tab
Token value goes after "key="
Step 3. Define the necessary number of the widget instead of [Value].
1
 s.src = "https://app.blinger.io/uploads/widgets2/[Value].js"
Copied!
You can find the number of the widget you need after the value "Widget #", if you login to the administrator's account in Blinger and proceed to Widget module
Useful!
The color and caption of Zendesk online-chat button can be defined using parameters channel.tooltip = 'Online chat' and channel.color = '#75b145'accordingly.
Freshdesk
Last modified 3yr ago
Copy link