Menu

Crisp Integration

Crisp is a powerful live chat tool for customer support. It's mainly used for:

  • Live Chat: Real-time communication with website visitors
  • Customer Support: Provide quick technical support and answer user questions
  • Visitor Tracking: View visitor browsing behavior and navigation paths
  • Multi-channel Integration: Support for email, Messenger, WhatsApp, and other messaging channels

The NEXTY.DEV boilerplate integrates Crisp Chat Widget through the components/support/CrispChat.tsx component, providing out-of-the-box customer support functionality for your product.

Steps

  1. Visit Crisp and sign up for an account
  2. Log in to the Crisp dashboard, create a new Website or enter an existing Website
  3. Go to Settings → Website Settings → Setup instructions
  4. Find the Website ID on the page (a UUID format string)
  5. Paste the Website ID into the environment variable NEXT_PUBLIC_CRISP_WEBSITE_ID
.env
NEXT_PUBLIC_CRISP_WEBSITE_ID="your-crisp-website-id"

Custom Configuration

Crisp offers rich customization options. You can configure the following in the Crisp dashboard:

  • Appearance: Modify chat window color, position, language, etc.
  • Automated Messages: Set up welcome messages and auto-reply rules
  • Business Hours: Configure online support hours and offline messages
  • Shortcuts: Create commonly used reply templates to improve efficiency

Verification

After completing the configuration, visit your website, and you should see a Crisp chat bubble appear in the bottom right corner of the page. Click the bubble to start a conversation.

You can also view and reply to visitor messages in the Inbox section of the Crisp dashboard.