Chatbox

MkSaaS supports integrating Crisp Chatbox for real-time website messaging, allowing users to leave feedback or contact support directly from your site.

Setup

Create a Crisp account.
Go to Crisp Dashboard > Settings > Workspace Settings > Setup & Integrations.
Copy Website ID and paste it into .env file as NEXT_PUBLIC_CRISP_WEBSITE_ID.

.env

NEXT_PUBLIC_CRISP_WEBSITE_ID=your_crisp_website_id

Set enableCrispChat to true in website.tsx config (default is false):

src/config/website.tsx

export const websiteConfig: WebsiteConfig = {
  features: {
    enableCrispChat: true,
  },
}

For more details, see the Crisp Documentation.

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

Chatbox System Structure

crisp-chat.tsx

components/layout/crisp-chat.tsx: The Crisp chat integration component.

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 to use the chatbox. Users will see a chat widget on all pages, allowing them to send messages or feedback.

If you want to customize or conditionally render the chatbox, you can import and use the component directly:

src/app/layout.tsx

import CrispChat from '@/components/layout/crisp-chat';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <CrispChat />
      <body>{children}</body>
    </html>
  );
}

Setup

Environment Setup

Chatbox System Structure

Usage

Reference

Next Steps

Email

Authentication

Analytics

Storage

Table of Contents