Gupshup聊天Web Widget重定向问题

Question

我用Gupshup构建了一个机器人，这真的是一个很酷的工具。他们为我们提供了一个可以放在任何网站上的网页小工具。但这个小部件似乎真的存在严重的问题。假设我把这个小部件放在我的页面www.xyz.com上。从桌面使用时，THings很好。当我从我的安卓设备打开它时，小工具会将我重定向到Builquickbots.com，这是永远不会发生的事情。我该如何解决这个严重的问题呢？

它们提供的小部件的UI代码

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

我该如何解决这个问题？

Answer 1

您可以创建一个托管在任何域上的自定义html页面，并在iframe标签中加载bot小部件。这是带有iframe的html代码。

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

您可以使用以下网址获取appUISetting字符串：https://botwidget.gupshup.io/ChatChannel/api/bot/{{botKey}}/botconfig

Answer 2

Gupshup的Web小部件托管在Builquickbots.com上，因此当您使用移动设备打开它时，它会重定向到该URL。这就是Web小部件的当前行为。

您可以在域名系统中配置CNAME记录，并将其指向buildquickbots.com。这会将请求重定向到您的域，但仅在HTTP上有效。

由于SSL证书的限制，HTTPS在技术上不可能做到这一点。