Skip to main content

​
Crisp Chat

Crisp is a customer messaging platform that helps businesses to connect with their customers. It is a chatbot that helps you to provide support to your customers. Crisp is a great tool to provide support to your customers and to answer their questions.
Crisp

​
Setup

1

Step 1

Create a account on Crisp.
2

Step 2

Then inside the onboarding process, you will be asked to add a website. Add your website and follow the instructions.
3

Step 3

On the success page, you will find the Website ID inside the script tag, which looks like this: ...window.$crisp=[];window.CRISP_WEBSITE_ID="YOUR_WEBSITE_ID...
Crisp
4

Step 3

Copy the CRISP_WEBSITE_ID and paste it on the .env file under the NEXT_PUBLIC_CRISP_WEBSITE_ID key.
Create a new component to wrap your app with the Crisp chatbot. Add the Crisp chatbot to the providers component under the Support section.
'use client';

import { useEffect } from 'react';

const CrispChat = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    // @ts-ignore
    window.$crisp = [];
    // @ts-ignore
    window.CRISP_WEBSITE_ID = process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID as string;

    script.src = 'https://client.crisp.chat/l.js';
    script.async = true;
    document.getElementsByTagName('head')[0].appendChild(script);
  });
  return null;
};

export default CrispChat;
If you need more support service documentations or have any questions, feel free to ask in the Discord community or contact us here.