Question

我在react应用的index.html文件中包含了shift的异步脚本代码。

<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

您需要通过应用程序禁用该功能：关闭Playbook。这是这样做的链接：https://app.drift.com/playbooks

希望有帮助。

Answer 2

您好，我遇到了同样的问题：

要隐藏欢迎消息，请使用以下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);
            });
        });
    });
})();

HTML

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

我希望这可以帮助某个人。

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

在每个页面中打开漂移聊天

2 个答案: