0

我正在使用 Drift 聊天小部件，但在第一页查看后它不会重新加载。小部件代码已加载，我在每次 turbolinks 重新加载时设置了一个重新加载功能

<head>
<script>

    "use strict";


      !function() {
        var t = window.driftt = window.drift = window.driftt || [];
        if (!t.init) {
          if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
          t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ],
          t.factory = function(e) {
            return function() {
              var n = Array.prototype.slice.call(arguments);
              return n.unshift(e), t.push(n), t;
            };
          }, t.methods.forEach(function(e) {
            t[e] = t.factory(e);
          }), t.load = function(t) {
            var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
            o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
            var i = document.getElementsByTagName("script")[0];
            i.parentNode.insertBefore(o, i);
          };
        }
      }();
      drift.SNIPPET_VERSION = '0.3.1';
      drift.load('XXXXXXXXXXX');
      drift.config({
        enableWelcomeMessage: false,
        locale: "<%=I18n.locale%>"
      });

      $(document).on("turbolinks:load", function(event) {
        drift.on('ready',function(api){
           drift.api.widget.show() <------- problem is here (?)
        })
      })

      drift.on('ready',function(api){

        console.log("Drift is ready")

        $('.drift-open-chat').on('click', function(e){
          api.widget.show()
          api.sidebar.open()
          e.preventDefault();
        })


        <% if current_user %>
          drift.api.setUserAttributes({
            user_id: <%=current_user.id%>,
            email: "<%=current_user.email%>"          
          })
        <% end %>

      })




    </script>

4

1 回答 1

0

Drift 期望每次导航都是一个完整的页面重新加载，Turbolinks 打破了这一点。要解决此问题，您必须在布局文件中添加两个永久元素。这将导致 tublinks 将聊天小部件从一个身体交换持久化到另一个。

<div id="drift-frame-chat" class="drift-conductor-item drift-frame-chat" data-turbolinks-permanent></div>
<div id="drift-frame-controller" class="drift-conductor-item drift-frame-controller" data-turbolinks-permanent></div>

编辑：它又被改变了。 更改页面时使用以下代码使其正常工作：

document.addEventListener('turbolinks:load',
  () => {
    if (window.drift.ready) {
      window.drift.unload();
      window.drift.load('{YOUR_EMBED_ID}');
    }
  })
于 2021-01-21T22:32:00.773 回答