Turbolinks 和漂移聊天答案

【问题标题】：Turbolinks and Drift ChatTurbolinks 和漂移聊天
【发布时间】：2020-04-19 15:08:51
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： turbolinks ruby-on-rails-6 drift

【解决方案1】：

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}');
    }
  })

【讨论】：