Crisp chatbot sandbox

A single-page Next.js playground for Crisp

Drop in your Crisp website ID and the chat widget will load automatically. Use this page to verify the bubble, message flow, and session events without extra setup.

Crisp ID detected46ae07f6-ad3f-4e32-9af8-1351f64507a5

Add your Crisp website ID

Create a .env.local file with NEXT_PUBLIC_CRISP_WEBSITE_ID and restart the dev server.

Run the app locally

Use npm run dev and open http://localhost:3000 to see the chat bubble appear.

Start chatting

Open the Crisp widget in the bottom-right corner to test message delivery and user events.

What to expect when the ID is set

  • The Crisp bubble appears in the bottom-right corner of the page.
  • Opening the widget initiates a session tied to your website ID.
  • You can send and receive messages directly from this page.