> crisp
Add live chat and customer support with Crisp. Use when a user asks to add a chat widget, implement live customer support, set up a help desk, create a knowledge base, or add a chatbot to a website.
curl "https://skillshub.wtf/TerminalSkills/skills/crisp?format=md"Crisp
Overview
Crisp is an all-in-one customer messaging platform: live chat widget, shared inbox, knowledge base, chatbot, and CRM. Free tier supports 2 operators with unlimited conversations.
Instructions
Step 1: Add Chat Widget
<!-- Add to your website — basic installation -->
<script type="text/javascript">
window.$crisp=[];window.CRISP_WEBSITE_ID="YOUR_WEBSITE_ID";
(function(){d=document;s=d.createElement("script");
s.src="https://client.crisp.chat/l.js";
s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();
</script>
Step 2: React Integration
// components/CrispChat.tsx — Crisp in React/Next.js
'use client'
import { useEffect } from 'react'
export function CrispChat() {
useEffect(() => {
window.$crisp = []
window.CRISP_WEBSITE_ID = process.env.NEXT_PUBLIC_CRISP_ID!
const s = document.createElement('script')
s.src = 'https://client.crisp.chat/l.js'
s.async = true
document.head.appendChild(s)
}, [])
return null
}
// Set user data when they log in
window.$crisp.push(['set', 'user:email', ['john@example.com']])
window.$crisp.push(['set', 'user:nickname', ['John']])
window.$crisp.push(['set', 'session:data', [['plan', 'pro'], ['mrr', '49']]])
Step 3: API Integration
// lib/crisp.ts — Send messages and manage conversations via API
const CRISP_ID = process.env.CRISP_IDENTIFIER!
const CRISP_KEY = process.env.CRISP_KEY!
const WEBSITE_ID = process.env.CRISP_WEBSITE_ID!
// Send a message to a conversation
await fetch(`https://api.crisp.chat/v1/website/${WEBSITE_ID}/conversation/${sessionId}/message`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Basic ${Buffer.from(`${CRISP_ID}:${CRISP_KEY}`).toString('base64')}`,
},
body: JSON.stringify({
type: 'text',
from: 'operator',
origin: 'chat',
content: 'Thanks for reaching out! Let me help you.',
}),
})
Guidelines
- Free tier: 2 operators, unlimited conversations, chat widget, mobile apps.
- Pro ($25/mo): chatbot, knowledge base, audio/video calls, integrations.
- Use session data to pass user context (plan, MRR, last action) to support agents.
- Crisp chatbot can handle FAQs automatically before routing to humans.
> related_skills --same-repo
> zustand
You are an expert in Zustand, the small, fast, and scalable state management library for React. You help developers manage global state without boilerplate using Zustand's hook-based stores, selectors for performance, middleware (persist, devtools, immer), computed values, and async actions — replacing Redux complexity with a simple, un-opinionated API in under 1KB.
> zod
You are an expert in Zod, the TypeScript-first schema declaration and validation library. You help developers define schemas that validate data at runtime AND infer TypeScript types at compile time — eliminating the need to write types and validators separately. Used for API input validation, form validation, environment variables, config files, and any data boundary.
> xero-accounting
Integrate with the Xero accounting API to sync invoices, expenses, bank transactions, and contacts — and generate financial reports like P&L and balance sheet. Use when: connecting apps to Xero, automating bookkeeping workflows, syncing accounting data, or pulling financial reports programmatically.
> windsurf-rules
Configure Windsurf AI coding assistant with .windsurfrules and workspace rules. Use when: customizing Windsurf for a project, setting AI coding standards, creating team-shared Windsurf configurations, or tuning Cascade AI behavior.