在点击事件中配置zendesk网络小部件

时间:2018-10-23 16:07:07

标签: jquery zendesk zendesk-api zendesk-app

我正在ASP.NET MVC解决方案中使用Zendesk的Web小部件来显示联系表单和帮助中心。由于帮助中心显示了受限制的文章,因此我们必须发送身份验证JWT令牌之前下载小部件脚本。 以下代码在_layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <script>
     window.zESettings = {
                    authenticate: {
                        jwt: 'sometoken'
                    }

                };
    </script>
    <script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=xxxxxxxxxx"></script>   
</head>
<body>

</body>

上面的代码在每个页面上显示zendesk的帮助小部件,并按预期工作。

但是,这不是优化的解决方案。在每次加载页面时,上述代码都必须创建令牌,授权和下载脚本。实际上,我们的用户有90%的时间甚至不会使用帮助小部件。
因此,为避免这种情况,我在页面上的某处有一个button,并且当用户单击按钮时,我想创建令牌,授权,下载小部件脚本并激活小部件。根据{{​​3}},我可以以编程方式显示,隐藏和激活小部件。

我正在将ASP.NET MVC与jQuery一起使用。下面是我的代码,但是不起作用

var zd = (function ($) {
    var module = {};   

    module.configure = function () {       
        $("#myHelpWidgetButton").click(function () {
            try {
                $.ajax({
                    type: "POST",
                    url: "/zendesk/token" // get token from server
                })
                .done(function (token, textStatus, jqXHR) {
                    window.zESettings = {
                        authenticate: {
                            jwt: token
                        }                        
                    };

                    // download script only after zEsettings are set
                    $.getScript("https://static.zdassets.com/ekr/snippet.js?key=xxxxxxxx",
                            function (data, textStatus, jqxhr) {
                                zE(function () {
                                    zE.hide(); // never gets fired ??
                                });

                                // get currently logged in user info and set to contact form
                                // and then activate
                                $.get("/zendesk/userinfo")
                                     .done(function (userinfo) {
                                         zE(function () {
                                             zE.identify(userinfo); // never gets fired??
                                             zE.activate(); // never gets fired??
                                         });
                                     })
                            })
                })
            }
            catch (ex) {
                logger.log({ message: "exception occurred", exception: ex });
            }
        })
    }

    return module;

})(jQuery);

然后在_layout.cshtml中调用zd.configure()附加点击事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">   
        <script>     
        </script>
        <script>
          zd.configure();
        </script>   
    </head>
    <body>    
    </body>
</html>

Ajax调用正在运行,但是zE.hide()zE.identify()zE.activate()从未被触发。

我想知道是否有可能?因为一旦脚本加载完成但未必执行$.getscript()回调,则zE可能不可用

0 个答案:

没有答案