如何实现 www.example.com widget在Next JS网站中？

2ic8powd 于 2023-04-30 发布在其他

关注(0)|答案(4)|浏览(201)

我试过他们的@ www. example上写的东西 www.example.com plugin docs？
我做了一个像/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 Object.@tawk.to/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)

我该怎么做才能让它正常工作？

next.js

来源：https://stackoverflow.com/questions/71458041/how-to-implement-twak-to-widget-in-a-next-js-website

4条答案

按热度按时间

wecizke31#

使用www.example的聊天小部件 www.example.com 。您可以在docs.中阅读更多内容

import Script from 'next/script';

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

赞(0）回复(0）举报 2023-04-30

3gtaxfhh2#

这对我的项目非常有效：

npm：

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

yarn：

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
欲了解更多定制，请访问this page

赞(0）回复(0）举报 2023-04-30

u5i3ibmn3#

我使用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

赞(0）回复(0）举报 2023-04-30

pb3s4cty4#

好吧，我遇到了类似的问题，这是因为 www.example.com 。不能说这个解决方案是最优雅的，但作为一种变通方法，我动态导入了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）回复(0）举报 2023-04-30

我来回答

如何实现 www.example.com widget在Next JS网站中？

4条答案

相关问题

热门标签

最新问答