Step-by-step guide on integrating the Tawk chat widget script into a Next.js React application

Question

Step-by-step guide on integrating the Tawk chat widget script into a Next.js React application

I am currently working on integrating a chat widget from Tawk into a next.js react app.

In my _app.js file, I have added the script import tag and attempted to set up the widget like this:

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>

Unfortunately, when attempting this setup, I encountered an error message stating:

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 reached out to the Tawk developer support team, who acknowledged a compatibility issue with React. They mentioned that a fix has been implemented in version 2.0.1 which can be found here: https://www.npmjs.com/package/@tawk.to/tawk-messenger-react

After trying to implement the suggested solution in both _app.tsx and _document.tsx files, I encountered more than 10 errors related to that package.

I am wondering if anyone has successfully integrated Tawk into a next.js react app?

javascript next.js tawk.to

Answer 1

Answer №1

I successfully created a functional project using an actual Tawk.to account: Check it out here.

Remember to update the IDs in the 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;

Answer 2

I successfully created a functional project using an actual Tawk.to account: Check it out here.

Remember to update the IDs in the 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;

Answer 3

Answer №2

The issue here is that the dangerouslySetInnerHTML code is currently placed outside the tag in this format:

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

It should actually be structured like this:

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

Nevertheless, it is recommended to place the code within the tag itself. Your _app.js file should resemble the following:

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;

Answer 4

The issue here is that the dangerouslySetInnerHTML code is currently placed outside the tag in this format:

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

It should actually be structured like this:

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

Nevertheless, it is recommended to place the code within the tag itself. Your _app.js file should resemble the following:

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;

Answer 5

Answer №3

To successfully incorporate a twik.js file into your project, simply create it in the public directory and load it using next/script without encountering any problems.

Answer 6

To successfully incorporate a twik.js file into your project, simply create it in the public directory and load it using next/script without encountering any problems.

Answer 7

Answer №4

For a more streamlined method, try implementing @tawk.to/tawk-messenger-react from NPM

Answer 8

For a more streamlined method, try implementing @tawk.to/tawk-messenger-react from NPM

Step-by-step guide on integrating the Tawk chat widget script into a Next.js React application

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Edit script: Iterate through the different div elements at regular intervals AND pick a specific div by pressing a button

What is the best way to implement a promise function in this scenario using JavaScript?

Comparing E-commerce: Laravel's Full MVC Approach vs Next.JS for Dynamic Views

Discovering the specific marker that was clicked from a group of Google map markers

Angular directive ng-clickIs the directive in angular known as

Having trouble with AngularJS ngRepeat not functioning properly?

What is the best way to show only one div at a time when selecting from navbar buttons?

The useEffect function is failing to execute, leading to an issue with an undefined variable

How can I declare CSS variables in Next.js components' module.css just like in global CSS?

Modifying iframe elements dynamically across domains

JavaScript Age Calculator - Counting Days

Confirm that only the days of the present month are eligible for selection

Creating a new component when a click event occurs in React

Issue with model not displaying after material added in OBLLoader + MTLLoader

Errors encountered in the ajax request, specifically 404 and 401 errors

Extend the center of the image horizontally

Submitting information to an HTML page for processing with a JavaScript function

What does the use of square brackets signify in Vuex mutations?

Node.js failing to log chat messages

Looking for the Mustache template library?