漂移聊天在每个页面打开

Question

我在React应用程序的index.html文件中有drift的异步脚本代码。

<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('----api----');
    drift.on('ready', api => {
      api.widget.hide();
    })
  </script>

问题是，它会在应用程序的每个页面中弹出，而我只在单击按钮（onClick）时才需要它

触发 onClick 的函数：

openDriftChat = () =>{
    const { setDriftState } = this.props;
    if (window.drift.api) {
      //this needs to happen only once but currently happening on every page load
      if (!this.props.driftInit) {
        if (localStorage.token) {
          var tokenBase64 = localStorage.token.split(".")[1];
          var tokenBase64_1 = tokenBase64.replace("-", "+").replace("_", "/");
          var token = JSON.parse(window.atob(tokenBase64_1));
          window.drift.identify(token.email, {
            email: token.email,
            nickname: token.name
          });
          setDriftState(true);
        }
      }
      window.drift.api.openChat();
    }
  }

我基本上希望它仅在调用该函数时弹出。

Answer 1

你好我有同样的问题：

要隐藏欢迎消息，请使用以下 css 代码

iframe#drift-widget.drift-widget-welcome-expanded-online {
display: none !important;
}

iframe#drift-widget.drift-widget-welcome-expanded-away {
display: none !important;
}

仅当您按下漂移按钮时才会显示欢迎消息。一些额外的信息：

要隐藏漂移按钮图标，请使用以下js代码

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

    api.widget.hide()
    drift.on('message', function (e) {
        if (!e.data.sidebarOpen) {
            api.widget.show()
        }
    })
    drift.on('sidebarClose', function (e) {
        if (e.data.widgetVisible) {
            api.widget.hide()
        }
    })
})

要从特定按钮调用侧边栏，请使用以下命令

JavaScript

    (function () {
    var DRIFT_CHAT_SELECTOR = '.drift-open-chat'
    function ready(fn) {
        if (document.readyState != 'loading') {
            fn();
        } else if (document.addEventListener) {
            document.addEventListener('DOMContentLoaded', fn);
        } else {
            document.attachEvent('onreadystatechange', function () {
                if (document.readyState != 'loading')
                    fn();
            });
        }
    }
    function forEachElement(selector, fn) {
        var elements = document.querySelectorAll(selector);
        for (var i = 0; i < elements.length; i++)
            fn(elements[i], i);
    }
    function openSidebar(driftApi, event) {
        event.preventDefault();
        driftApi.sidebar.open();
        return false;
    }
    ready(function () {
        drift.on('ready', function (api) {
            var handleClick = openSidebar.bind(this, api)
            forEachElement(DRIFT_CHAT_SELECTOR, function (el) {
                el.addEventListener('click', handleClick);
            });
        });
    });
})();

超文本标记语言

<a class="drift-open-chat">Open Chat</a>

我希望这对那里的人有帮助。

PS：初始化漂移小部件后，必须包含上述 JavaScript 代码。