如何在Next.JS网站中实现Tawk.to小部件？

问题描述 投票：0回答：5

我已经尝试过他们的@tawk.to/tawk-messenger-react插件文档上写的内容？

我制作了一个像

/components/Chat.js

这样的组件 
import TawkMessengerReact from "@tawk.to/tawk-messenger-react";

export default function Chat() {
  return (
    <div className="chat">
      <TawkMessengerReact
        propertyId={process.env.NEXT_PUBLIC_TWAKTO_PROPERTY_ID}
        widgetId={process.env.NEXT_PUBLIC_TWAKTO_WIDGET_ID}
      />
    </div>
  );
}

但是在 

Layout.js
或 
_app.js
中导入组件后，会出现类似

的错误 
E:\PROJECT\FOLDER\node_modules\@tawk.to\tawk-messenger-react\src\index.js:4
import { forwardRef, useEffect, useImperativeHandle } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at [email protected]/tawk-messenger-react (E:\PROJECT\FOLDER\.next\server\pages\_app.js:240:18)
    at __webpack_require__ (E:\PROJECT\FOLDER\.next\server\webpack-runtime.js:33:42)

我应该怎样做才能使其正常运行？

javascript reactjs react-hooks next.js
5个回答
10
投票

为了使用 Tawk.to 的聊天小部件，我使用了带有lazyOnload 策略的脚本组件。您可以在 docs 中阅读更多内容。

import Script from 'next/script';

// inside the return statement of your page
return (
  <>
    <Script
      strategy="lazyOnload"
      src="https://embed.tawk.to/PROPERTY_ID"
    />
  </>
);
4
投票

我正在使用 Next Js 和 typescript。由于我找不到 

tawk-messenger-react
的类型，Typescript 在构建时无法显示错误，因此它可能会 
not build
项目。我选择使用 
Next Head
和下面的普通脚本标签来找到解决方法。

import Head from 'next/head'

<Head>
    <script src="https://embed.tawk.to/PROPERTYID/WIDGETID" async />
</Head>

脚本将如下所示：

<script src="https://embed.tawk.to/619959c96885f60a50bcbe1e/1fkvgdfr8" async />


Next Script
也不适合我的用例，该小部件是 
not loading

1
投票

这非常适合我的项目：
npm：

npm i @tawk.to/tawk-messenger-react

纱线：

yarn add @tawk.to/tawk-messenger-react

然后添加以下内容：

import "../styles/globals.css";
import Message from "../components/Message";
import Head from "next/head";
import Script from "next/script";
import TawkMessengerReact from "@tawk.to/tawk-messenger-react";
import { useRef } from 'react';

function MyApp({ Component, pageProps }) {
  const tawkMessengerRef = useRef();

  const handleMinimize = () => {
    tawkMessengerRef.current.minimize();
  };
  return (
    <>
      <Component {...pageProps} />
      <button onClick={handleMinimize}> Minimize the Chat </button>

      <TawkMessengerReact
        propertyId={process.env.NEXT_PUBLIC_TWAKTO_PROPERTY_ID}
        widgetId={process.env.NEXT_PUBLIC_TWAKTO_WIDGET_ID}
        useRef={tawkMessengerRef}
      />
    </>
  );
}

export default MyApp;

要获得更多想法，请查看 tawk.to
如需更多定制，请访问此页面

0
投票

好吧，我也遇到了类似的问题，发生这种情况是因为 tawk.to 不应该在服务器上执行。不能说该解决方案是最优雅的，但作为一种解决方法，我动态导入了 

TawkMessengerReact
组件。并且仅当应用程序加载到浏览器中时才渲染它。再说一次，我确信可能有一些更漂亮的方法来做到这一点，但是嘿，这是一个有效的快速但肮脏的解决方案。

const TawkMessengerReact = dynamic(() =>
  import('node_modules/@tawk.to/tawk-messenger-react'),
);

const App = ({ Component, pageProps }) => {
const initialRenderRef = useRef(false);

 useEffect(() => {
    initialRenderRef.current = true;
  }, []);

return (
<div>
    {initialRenderRef.current && (
     <TawkMessengerReact
      propertyId='asdfasdasdadwswdadw'
      widgetId='asdwer'
     />)}
     <Component {...pageProps} />
</div>


}
0
投票

我也在做这方面的工作。并且工作正常，请执行以下操作：

npm i @tawk.to/tawk-messenger-react

然后在 src 文件夹中创建一个新组件，将其实现到组件中：

     import TawkMessengerReact from "@tawk.to/tawk-messenger-react";
    
    const TawkMessenger = () => {
      return (
        <div>
          {/* Other content */}
          <TawkMessengerReact
            propertyId="YOUR_PROPERTY_ID"
            widgetId="YOUR_WIDGET_ID"
          />
        </div>
      );

};

export default TawkMessenger;

之后，在 Page.js 或 App.js 上使用该组件。应该可以工作。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.