How do I install Crisp Live Chat on Next.js ?

Articles on: Install Crisp

Are you using Next.js / React to create your new web application? Here is how you can add the Crisp chatbox widget on it in less than 2 minutes.

➡️ To know more about Crisp chat widget click here

• Create an account on Crisp.

• Go to Settings. Then, Website Settings.

• Next to your website, click on Settings.

• Click on Setup instructions.

• Click on Chatbox setup instructions.

• Select HTML.

• Copy the JavaScript code to retrieve your CRISP_WEBSITE_ID.

• Install Crisp in your React project:

undefined npm install crisp-sdk-web

• Inside your components folder, create a file crisp.js and paste this code below. Replace the CRISP_WEBSITE_ID with yours.

undefined import React, { Component } from "react"; import { Crisp } from "crisp-sdk-web"; class CrispChat extends Component { componentDidMount () { Crisp.configure("MY_CRISP_WEBSITE_ID"); } render () { return null; } } export default CrispChat

Make sure to replace

CRISP_WEBSITE_ID

with yours. Otherwise, this will not work!

Then, we tell can import Crisp in our component.

undefined import dynamic from 'next/dynamic' const CrispWithNoSSR = dynamic( () => import('../components/crisp'), { ssr: false } )

and Finally include it in your App:

undefined class App extends React.Component { render () { return ( ) } } export default App

Next.js 13

Starting from Next.js 13, you will need to make some minor adjustments to the code provided above:

• In the crisp.js file, we need to change the class component to a functional component, and we also need to add use client at the beginning:

undefined "use client" import { useEffect } from "react"; import { Crisp } from "crisp-sdk-web"; const CrispChat = () => { useEffect(() => { Crisp.configure("MY_CRISP_WEBSITE_ID"); }); return null; } export default CrispChat;

• In the layout.js file, remove { ssr: false }:

undefined import dynamic from 'next/dynamic' export default function RootLayout({ children }) { const CrispWithNoSSR = dynamic( () => import('../components/crisp') ) return ( {children} ) }

Updated on: 11/03/2024

Updated on: 19/07/2024