How to add the Tawk chat widget script to nextjs react app

Question

I'm trying to figure out how to add a chat widget from Tawk to a next.js react app.

In my _app.js, I have added the script import tag and tried to set the widget as follows:

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>

When I try this, I get an error that says:

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)

I contacted the tawk dev support team, who acknowledged an issue with react, and suggested that a fix had been pushed with a new version 2.0.1 heres the link https://www.npmjs.com/package/@tawk.to/tawk-messenger-react

When I try that both in _app.tsx and _document.tsx, I get more than 10 errors with that package.

Has anyone figured out how to use tawk in a next.js react app?

for others that might be facing the same issue, I spoke to the tawk dev support. They have identified an issue with react and are working on a solution. I will update this post to share the solution when one is available. — Mel, May 30 '22 at 21:07

score 3 · Answer 1 · answered May 24 '22 at 22:28

3

The problem is that dangerouslySetInnerHTML is outside the tag you have it like this:

<Script id="tawk" strategy="lazyOnload">
        dangerouslySetInnerHTML={{

should be:

<Script id="tawk" strategy="lazyOnload" dangerouslySetInnerHTML={"your data"} />

However, it is best to include the code inside the tag. Your _app.js should look like this:

import "../styles/globals.css";
import Script from "next/script";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      {/* <!--Start of Tawk.to Script--> */}
      <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/[]/[]';
            s1.charset='UTF-8';
            s1.setAttribute('crossorigin','*');
            s0.parentNode.insertBefore(s1,s0);
            })();
        `}
      </Script>
    </>
  );
}

export default MyApp;

answered May 24 '22 at 22:28

Usiel

671
3
14

I tried this. It doesn't produce an error, but it also doesnt display the widget. – Mel May 27 '22 at 22:19
Sure I guess you didn't replace this : ` s1.src='https://embed.tawk.to/[]/[]'; ` by the url of your account. Where the `[ ]` go, goes the info that associates the widget to your tawk account. – Usiel May 28 '22 at 00:28
I did- I just removed those strings for this post – Mel May 28 '22 at 01:53
the url should be like: https://embed.tawk.to/12345678/default – Usiel May 28 '22 at 03:23
the tawk app does not use the word default - it uses random strings for both ids. Are you saying I'm supposed to substitute the second string for the word "default"? – Mel May 28 '22 at 03:35
I tried replacing the second string with default and a tawk error is returned in the console that says 'connection refused' – Mel May 28 '22 at 04:22
I also tried adding the two random string id I get from tawk, in the script, in _document.tsx - and I still dont get the widget to load. – Mel May 28 '22 at 04:38
try this url https://embed.tawk.to/56d59cac343e11f1034e44dc/default. I extracted it from: https://stackoverflow.com/questions/35725713/live-chat-jquery-plugin-tawk-to-not-visible I tested it in next and with this url you will see that the widget appears. That means your url is wrong. – Usiel May 28 '22 at 13:10
When I copy the url direct from the tawk widget script or the id fields in the tawk chat dash page, I do not get the console error - but the widget does not display. Both of those sources use two separate strings for id fields. When I try replacing the second id field with the word 'default', I get a connection refused error in the console. – Mel May 28 '22 at 22:06

score 3 · Accepted Answer · answered Aug 11 '22 at 08:41

I made a working project with a real Tawk.to account: https://codesandbox.io/s/tawk-test-ovmsqy?file=/pages/_app.js

You should change the ids at s1.src line!

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;

score 1 · Answer 3 · answered May 29 '22 at 02:13

1

you should be able to create a twik.js file in the public folder and load it with next/script without any issues

answered May 29 '22 at 02:13

Venipa

23
1
1
5

I am asking this question because of the issues I'm having. – Mel May 29 '22 at 21:23
@Mel ye just create a twik.js file with the contents to init the twik chat widget after that you can use next/script with the property src pointing to /twik.js on Script – Venipa May 29 '22 at 21:29

score 1 · Answer 4 · answered Jun 23 '22 at 03:40

1

For cleaner approach you can use @tawk.to/tawk-messenger-react at NPM

answered Jun 23 '22 at 03:40

Jao

21
3

How to add the Tawk chat widget script to nextjs react app

4 Answers4