Gupshup聊天Web窗口小部件重定向问题 [英] Gupshup Chat Web Widget redirection Issue

问题描述

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

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?

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

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?

推荐答案

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

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>

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

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

这篇关于Gupshup聊天Web窗口小部件重定向问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！