如何将Drift bot JS代码与静态React NextJs应用(着陆页)整合?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将Drift bot JS代码与静态React NextJs应用(着陆页)整合?相关的知识,希望对你有一定的参考价值。

我是ReactJS新手。我使用ReactJS & NextJs开发了一个着陆页静态网站。现在我正试图整合一个聊天机器人'Drift'。在安装过程中,他们说,要安装,我必须将javascript代码插入在 <head>html文件。我找到了我的react应用的自动创建的html文件,并插入了这段代码,但什么也没发生。

<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('xxxxxxxx');
</script>
<!-- End of Async Drift Code --> 

当我在localhost中检查登陆页面时,我无法找到这个脚本在 <header>

答案

我解决了这个问题,使用 npm i react-drifts 然后导入 漂移 到我的react应用中。然后我用 <Drift appId='xxxx'/>. appId被嵌入到javascript脚本中[]。drift.load('xxxxxxxx')漂流给您添加的[]。<head/>

以上是关于如何将Drift bot JS代码与静态React NextJs应用(着陆页)整合?的主要内容,如果未能解决你的问题,请参考以下文章

需要帮助将 Bot 更新到 Discord.js v12

如何使用 discord.js 从 discord bot 向特定用户发送消息

如何将Azure Bot与SharePoint链接?

将 Express.js 与 React.js 一起使用的推荐方式?

如何将静态 YAML 文件与 React Native 应用程序捆绑在一起?

使用 React 和 Next.js 构建博客