Gupshup Chat Web Widget redirection Issue

问题:

I have built a bot with Gupshup which is really a cool tool. They provide us a web widget can be put on to any website. But there seems to be really serious problem with the widget. Suppose I put the widget on a my page www.xyz.com. THings are fine when using from desktop. When I open it from my Android device, the widget redirects me to Builquickbots.com which should never happen. How can I solve this serious issue?

The UI code for the widget provided by them

<script>
        window.tcAsyncInit = function() {
                tc.init ({
                botkey: "fe2c4c7-p4opop9-0000-0000-243gg7366d69",
                appUISetting : '%7B%22minimisedScreen%22%3A%7B%22minText%22%3A%22Chat%20with%20Me%22%2C%22width%22%3A%22350%22%2C%22textColor%22%3A%22%23565656%22%7D%2C%22chatScreen%22%3A%7B%22maxText%22%3A%22Me%20Online%22%2C%22imageDisplayType%22%3A%22rectangular%22%2C%22textColor%22%3A%22%23000000%22%7D%2C%22loginScreen%22%3A%7B%22height%22%3A%22410%22%2C%22formHeading%22%3A%22Please%20tell%20us%20about%20yourself.%22%2C%22nameLabel%22%3A%22Add%20Name%22%2C%22emailLabel%22%3A%22Add%20Email%22%2C%22phoneLabel%22%3A%22Add%20Phone%20No%22%2C%22messageLabel%22%3A%22Add%20Message%22%2C%22submitBtnText%22%3A%22Start%20Chatting%22%7D%2C%22contentScreen%22%3A%7B%22customfontSize%22%3A%2214%22%2C%22fontFamily%22%3A%22sans-serif%22%2C%22botBgColor%22%3A%22%23e2e2e2%22%2C%22botColor%22%3A%22%23444%22%2C%22userBgColor%22%3A%22%23acdae9%22%2C%22userColor%22%3A%22%23000000%22%7D%2C%22commonWidget%22%3A%7B%22width%22%3A%22350%22%2C%22height%22%3A%22370%22%2C%22bgColor%22%3A%22%23eeeeee%22%2C%22bgImage%22%3A%22https%3A//media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAAbRAAAAJDNjNzljNWFlLTNiZjctNDZmNC1iNTQzLWI0ODNkMzRmYWQxMw.png%22%2C%22perMenuImg%22%3A%22%22%2C%22borderColor%22%3A%22%23d4d4d4%22%2C%22textColor%22%3A%22%23ff4400%22%2C%22titleTextFont%22%3A%2218%22%2C%22titleWinHeight%22%3A%2245%22%2C%22RDStatus%22%3A%22No%22%2C%22webView%22%3A%22Yes%22%2C%22isResponsive%22%3A%22Yes%22%2C%22msgEncryption%22%3A%22No%22%2C%22allowHtmlFromBot%22%3A%22No%22%2C%22widgetType%22%3A%22Normal%22%2C%22persistenceMenu%22%3A%22%7B%20%5Ct%5C%22disableinput%5C%22%3A%20false%2C%20%5Ct%5C%22menu%5C%22%3A%20%5B%7B%20%5Ct%5Ct%5C%22title%5C%22%3A%20%5C%22Templates%5C%22%2C%20%5Ct%5Ct%5C%22type%5C%22%3A%20%5C%22nested%5C%22%2C%20%5Ct%5Ct%5C%22menu%5C%22%3A%20%5B%7B%20%5Ct%5Ct%5Ct%5C%22title%5C%22%3A%20%5C%22Word%20Templates%5C%22%2C%20%5Ct%5Ct%5Ct%5C%22type%5C%22%3A%20%5C%22text%5C%22%20%5Ct%5Ct%7D%2C%20%7B%20%5Ct%5Ct%5Ct%5C%22title%5C%22%3A%20%5C%22Powerpoint%20Templates%5C%22%2C%20%5Ct%5Ct%5Ct%5C%22type%5C%22%3A%20%5C%22nested%5C%22%2C%20%5Ct%5Ct%5Ct%5C%22menu%5C%22%3A%20%5B%7B%20%5Ct%5Ct%5Ct%5Ct%5Ct%5C%22title%5C%22%3A%20%5C%22Blank%5C%22%2C%20%5Ct%5Ct%5Ct%5Ct%5Ct%5C%22type%5C%22%3A%20%5C%22text%5C%22%20%5Ct%5Ct%5Ct%5Ct%7D%2C%20%5Ct%5Ct%5Ct%5Ct%7B%20%5Ct%5Ct%5Ct%5Ct%5Ct%5C%22title%5C%22%3A%20%5C%22Customer%20Account%20Planning%5C%22%2C%20%5Ct%5Ct%5Ct%5Ct%5Ct%5C%22type%5C%22%3A%20%5C%22text%5C%22%20%5Ct%5Ct%5Ct%5Ct%7D%2C%20%5Ct%5Ct%5Ct%5Ct%7B%20%5Ct%5Ct%5Ct%5Ct%5Ct%5C%22title%5C%22%3A%20%5C%22Interim%20Guidelines%5C%22%2C%20%5Ct%5Ct%5Ct%5Ct%5Ct%5C%22type%5C%22%3A%20%5C%22text%5C%22%20%5Ct%5Ct%5Ct%5Ct%7D%2C%20%5Ct%5Ct%5Ct%5Ct%7B%20%5Ct%5Ct%5Ct%5Ct%5Ct%5C%22title%5C%22%3A%20%5C%22Account%20Planning%5C%22%2C%20%5Ct%5Ct%5Ct%5Ct%5Ct%5C%22type%5C%22%3A%20%5C%22text%5C%22%20%5Ct%5Ct%5Ct%5Ct%7D%20%5Ct%5Ct%5Ct%5D%20%5Ct%5Ct%7D%5D%20%5Ct%7D%5D%20%7D%22%2C%22logo%22%3A%22https%3A//www.gupshup.io/images/botwidget/ic_dummy_chat_g.png%22%2C%22user%22%3A%22http%3A//www.buildquickbots.com/widget/bots/8d755751f41ebca83f2f90e3781615e4/2328c115a6043bb25539fdf3e968a770/user.png%22%2C%22bot%22%3A%22http%3A//www.buildquickbots.com/widget/bots/8d755751f41ebca83f2f90e3781615e4/2328c115a6043bb25539fdf3e968a770/bot.png%22%7D%7D',
                version : 'v2'
            });
        };
        (function(d, s, id){
        var js, tjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        css = d.createElement('link');
        css.type = "text/css";
        css.rel = "stylesheet";
        css.href = '//www.buildquickbots.com/botwidget/v2/demo/static/css/style.css';
        css1 = d.createElement('link');
        css1.type = "text/css";
        css1.rel = "stylesheet";
        css1.href = 'https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.css';
        js.src = '//www.buildquickbots.com/botwidget/v2/demo/static/js/sdk.js';
        tjs.parentNode.insertBefore(js, tjs);
        tjs.parentNode.insertBefore(css,tjs);
        tjs.parentNode.insertBefore(css1,tjs);
    }(document, 'script', 'tc-sdk'));
    </script>

How can I solve this issue?

回答1:

Gupshup's Web widget is hosted on Builquickbots.com hence when you open it using the mobile devices it redirects to the URL. This is how the current behavior of the Web widget is.

You can configure CNAME record in your DNS and point it to buildquickbots.com. This will redirect the request to your domain but will only work on HTTP.

It is technically not possible to do it for HTTPS because of SSL certificate limitations.

回答2:

You can create a custom html page hosted on any domain and load bot widget within iframe tag. This is the html code with iframe.

<html>
<head>
</head>
<body>

<iframe id ="some_iframe_id" style="position: absolute; top: 0px; left: 0px; width: 99%; height: 99%; margin: 0px; padding: 0px;"></iframe>

<script>
window.tcAsyncInit = function (a) {
    var userid = "anon:" + Math.floor(Math.random() * 100000);
    var username="User";
        a.init({
            botkey: "{{BOT_KEY}}",
            version: "3",
    appUISetting:"%7B%22openMode%22%3A%7B%22text%22%3A%22Mubble%20Assistant%22%2C%22height%22%3A390%2C%22width%22%3A320%7D%2C%22closeMode%22%3A%7B%22text%22%3A%22Mubble%20Assistant%22%2C%22width%22%3A250%2C%22displayType%22%3A%22rectangular%22%7D%2C%22common%22%3A%7B%22logo%22%3A%22https%3A//www.gupshup.io/images/botwidget/ic_dummy_chat_g.png%22%2C%22imgDispType%22%3A%22circular%22%2C%22bgColor%22%3A%22%23765999%22%2C%22fontSize%22%3A16%2C%22fontColor%22%3A%22%23ffffff%22%7D%2C%22content%22%3A%7B%22bot%22%3A%22https%3A//www.gupshup.io/images/botwidget/ic_bot.png%22%2C%22botBubbleColor%22%3A%22%23f5f5f5%22%2C%22botFontColor%22%3A%22%23797979%22%2C%22user%22%3A%22https%3A//www.gupshup.io/images/botwidget/ic_user.png%22%2C%22userBubbleColor%22%3A%22%23765999%22%2C%22userFontColor%22%3A%22%23ffffff%22%2C%22pageTitle%22%3A%22Chat%20Bot%22%2C%22fontSize%22%3A14%2C%22fontFamily%22%3A%22sans-serif%22%7D%2C%22config%22%3A%7B%22persistenceMenu%22%3A%22%7B%5C%22disableinput%5C%22%3Afalse%2C%5C%22menu%5C%22%3A%5B%7B%5C%22title%5C%22%3A%5C%22Level1%20-%20Element1%5C%22%2C%5C%22type%5C%22%3A%5C%22nested%5C%22%2C%5C%22menu%5C%22%3A%5B%7B%5C%22title%5C%22%3A%5C%22Level2%20-%20Element1%5C%22%2C%5C%22type%5C%22%3A%5C%22text%5C%22%7D%2C%7B%5C%22title%5C%22%3A%5C%22Level2%20-%20Element2%5C%22%2C%5C%22type%5C%22%3A%5C%22nested%5C%22%2C%5C%22menu%5C%22%3A%5B%7B%5C%22title%5C%22%3A%5C%22Level3%20-%20Element1%5C%22%2C%5C%22type%5C%22%3A%5C%22text%5C%22%7D%5D%7D%2C%7B%5C%22title%5C%22%3A%5C%22Level2%20-%20Element4%5C%22%2C%5C%22type%5C%22%3A%5C%22nested%5C%22%2C%5C%22menu%5C%22%3A%5B%7B%5C%22title%5C%22%3A%5C%22Level3%20-%20Element1%5C%22%2C%5C%22type%5C%22%3A%5C%22text%5C%22%7D%5D%7D%2C%7B%5C%22title%5C%22%3A%5C%22Level2%20-%20Element5%5C%22%2C%5C%22type%5C%22%3A%5C%22text%5C%22%7D%5D%7D%2C%7B%5C%22title%5C%22%3A%5C%22Level2%20-%20Element4.1%5C%22%2C%5C%22type%5C%22%3A%5C%22text%5C%22%7D%5D%7D%22%2C%22perMenuImg%22%3A%22%22%2C%22attachment%22%3A%22Yes%22%2C%22widgetType%22%3A%22Text%22%2C%22msgEnc%22%3A%22No%22%2C%22webView%22%3A%22Yes%22%2C%22RDStatus%22%3A%22No%22%2C%22isResponsive%22%3A%22No%22%7D%7D",
            userObj: {
                "roomid": userid,
                "sender": {
                    "id": userid,
                    "name": username
                },
                "recipient": {
                    "id": userid,
                    "name": "Bot"
                },
                "message": {
                    "text": "Hello",
                    "type": "text"
                }
            }
        }, function(){
        document.getElementById('some_iframe_id').src = a.getRedirectUrl();

    });
    };
</script>

<script id="gs-sdk" src='//www.buildquickbots.com/botwidget/v3/demo/static/js/sdk.js?v=3' key="{{BOT_KEY}}" callback="tcAsyncInit" ></script>
</body>
</html>

You can get your appUISetting string with below URL : https://botwidget.gupshup.io/ChatChannel/api/bot/{{botKey}}/botconfig