javascript - How to implement Tawk.to widget in a Next.JS website?

I have tried what is written on their @tawk.to/tawk-messenger-react plugin docs?

I have made a component like /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>
  );
}

But after importing the component on Layout.js or in _app.js it's giving an error like

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 ObjectpileFunction (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)

What should I do to get it functioning properly?

I have tried what is written on their @tawk.to/tawk-messenger-react plugin docs?

I have made a component like /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>
  );
}

But after importing the component on Layout.js or in _app.js it's giving an error like

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)

What should I do to get it functioning properly?

Share Improve this question edited Dec 13, 2023 at 22:18 Phạm Huy Cường Thịnh 651 gold badge2 silver badges13 bronze badges asked Mar 13, 2022 at 15:08 Arghya Ghosh 731 silver badge9 bronze badges

Does this answer your question: "Cannot use import statement outside a module" error when importing react-hook-mousetrap in Next.js? – juliomalves Commented Mar 14, 2022 at 0:03

Add a comment |

5 Answers 5

Sorted by: Reset to default 11

To use the chat widget of Tawk.to I used the Script component with the lazyOnload strategy. You can read more in the docs.

import Script from 'next/script';

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

I was using Next Js and typescript. Since I could not find the types for tawk-messenger-react Typescript was failing showing an error and on building, it could not build the project. I opted to find a work around by using the Next Head and a normal script tag as below.

import Head from 'next/head'

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

The script will look like:

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

Next Script was not working either for my use case, the widget was not loading

Okay, so i have encountered a similar issue, this happens because tawk.to is not meant to be executed on the server. Cannot say the solution is the most elegant, but as a workaround i did a dynamic import of the TawkMessengerReact component. And only render it when the app is loaded in the browser. Again, i am sure there might be some more beautiful way to do it, but hey, it is a working quick-and-dirty solution.

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>


}

This works perfectly for my project:
npm:

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

yarn:

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

Then add the following:

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;

To get more of an idea check out tawk.to
for more customization visit this page

I work on this, too. And worked properly, do this:

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

Then create a new component in your src folder, implement this to the component:

     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;

After that, use the component on your Page.js or App.js. It should be worked.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to implement Tawk.to widget in a Next.JS website? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)