MkSaaS DocsChatbox
Learn how to set up and use Crisp Chatbox in MkSaaS
MkSaaS supports integrating Crisp Chatbox for real-time website messaging.
Setup
Create a Crisp Account
Create a Crisp account if you haven't already.
Get Website ID
Go to Crisp Dashboard > Settings > Workspace Settings > Setup & Integrations. Copy Website ID and paste it into the environment variables file:
NEXT_PUBLIC_CRISP_WEBSITE_ID=YOUR-CRISP-WEBSITE-IDEnable Crisp Chat in Configuration
Set enableCrispChat to true in website.tsx config (default is false):
export const websiteConfig: WebsiteConfig = {
features: {
enableCrispChat: true,
},
}If you are setting up the environment, now you can go back to the Environment Setup guide and continue. The rest of this guide can be read later.
Environment Setup
Set up environment variables
Usage
The Crisp chatbox is automatically loaded on your website when enableCrispChat is enabled and the environment variable is set. No additional code is required.
If you want to customize or conditionally render the chatbox, you can import and use the component directly:
import CrispChat from '@/components/layout/crisp-chat';
export default function RootLayout({ children }) {
return (
<html lang="en">
<CrispChat />
<body>{children}</body>
</html>
);
}