javascript - 如何将 Tawk 聊天小部件脚本添加到 nextjs react 应用程序

Question

我正在尝试弄清楚如何将聊天小部件从 Tawk 添加到 next.js React 应用程序。

在我的 _app.js 中，我添加了脚本导入标签并尝试按如下方式设置小部件:

import Script from 'next/script'

      {/* <!--Start of Tawk.to Script--> */}
      <Script id="tawk" strategy="lazyOnload">
        dangerouslySetInnerHTML={{
            __html: `
            
            var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
            (function(){
            var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
            s1.async=true;
            s1.src='https://embed.tawk.to/[]/[]';
            s1.charset='UTF-8';
            s1.setAttribute('crossorigin','*');
            s0.parentNode.insertBefore(s1,s0);
            })();
           
            `,
        }}
      </Script>

当我尝试这个时，我收到一条错误消息:

Unhandled Runtime Error SyntaxError: Unexpected identifier

Call Stack loadScript ../../node_modules/next/dist/client/script.js(148:18) eval ../../node_modules/next/dist/client/script.js (167:62)

我联系了 tawk 开发支持团队，他们承认 React 存在问题，并建议已使用新版本 2.0.1 推送修复，链接如下 https://www.npmjs.com/package/@tawk.to/tawk-messenger-react

当我在 _app.tsx 和 _document.tsx 中尝试这样做时，我在该包中遇到了 10 多个错误。

有没有人知道如何在 next.js React 应用程序中使用 tawk？

Answer 1

我用真实的 Tawk.to 帐户创建了一个工作项目: https://codesandbox.io/s/tawk-test-ovmsqy?file=/pages/_app.js

您应该在 s1.src 行更改 id!

import Script from "next/script";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script id="tawk" strategy="lazyOnload">
        {`
            var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
            (function(){
            var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
            s1.async=true;
            s1.src='https://embed.tawk.to/62f4b8c537898912e962654a/1ga5v3hhr';
            s1.charset='UTF-8';
            s1.setAttribute('crossorigin','*');
            s0.parentNode.insertBefore(s1,s0);
            })();  
        `}
      </Script>
    </>
  );
}

export default MyApp;