Crisp integration on Next.js(above v11.1.0)

_app.tsx

import type { AppProps } from 'next/app';


import { Crisp } from '../components/Crisp.tsx';


function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SomeProvider>
      <Component {...pageProps} />
      <Crisp />
    </SomeProvider>
  );
}

export default MyApp;

Crisp.tsx

import React, { useEffect } from 'react';
import Script from 'next/script';

declare global {
  interface Window {
    $crisp: any;
    CRISP_WEBSITE_ID: string;
  }
}

const Crisp = () => {
  useEffect(() => {
    window.$crisp = [];
    window.CRISP_WEBSITE_ID = "YOUR_WEBSITE_ID";
  });
  return <Script async={true} src="https://client.crisp.chat/l.js" strategy="afterInteractive" />;
};

export default Crisp;

Crisp integration on Next.js(above v11.1.0)