Chatbox

Learn how to set up and use Crisp Chatbox in your SaaS application.

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

Setup

1

Create a Crisp account.

2

Go to Crisp Dashboard → Settings → Workspace Settings → Setup & Integrations.

3

Copy Website ID and paste it into .env.local file as NEXT_PUBLIC_CRISP_WEBSITE_ID.

.env.local
NEXT_PUBLIC_CRISP_WEBSITE_ID=YOUR-CRISP-WEBSITE-ID
4

Set enableCrispChat to true in your config file (default is false):

lib/config.ts
export const websiteConfig = {
  features: {
    enableCrispChat: true,
  },
};

Note: For more details, see the Crisp Documentation.

Chatbox System Structure

  • • app/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:

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

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

Reference

Next Steps: Now that you have enabled the chatbox, you may want to explore related integrations like email notifications and analytics to enhance your customer support capabilities.