1

Create a Crisp account

  • You can create a new Crisp account [here].
  • Then, create a new website and find the website id which can be found in the integrations menu, in the HTML option. It’s called CRISP_WEBSITE_ID.
2

Configure Crisp in Codebase

Paste the script code snippet in the root layout.tsx file inside the body tag.
import Script from "next/script";

{appConfig.customerSupport.isEnabled && (
    <Script id="crisp-script" strategy="afterInteractive">
        {`window.$crisp=[];window.CRISP_WEBSITE_ID="${appConfig.customerSupport.websiteId}";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();`}
    </Script>
)}
Paste the customer support config with its corresponding types into the app.config.ts file.
customerSupport: {
    isEnabled: boolean;
    websiteId: string;
};

...

customerSupport: {
    isEnabled: false,
    websiteId: "YOUR_CRISP_WEBSITE_ID",
},
Paste the CRISP_WEBSITE_ID inside the app.config.ts under websiteId and set the isEnabled to true. The codebase will take care of the rest.