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.
What this skill does
# 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
```html
<!-- 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
```tsx
// 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', ['[email protected]']])
window.$crisp.push(['set', 'user:nickname', ['John']])
window.$crisp.push(['set', 'session:data', [['plan', 'pro'], ['mrr', '49']]])
```
### Step 3: API Integration
```typescript
// 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 in Sales & CRM
process-mapper
IncludedUse when a BizOps lead, COO, or process-improvement owner needs to document an end-to-end business process (procurement, employee onboarding, incident handoff, customer-onboarding, claims adjudication) in BPMN-style notation, measure cycle times by stage, surface where work spends most of its time waiting vs. being worked, and quantify the gap between processing time and total elapsed time. Pairs Lean / Six Sigma / Theory-of-Constraints canon with deterministic stdlib-only Python tools to produce a process map, a ranked bottleneck list (with severity + root-cause hypothesis), and a cycle-time analysis (P50, P90, value-add ratio, Little's-Law throughput). Distinct from sales-pipeline, system-reliability (SLO), and strategic-OKR work — this is tactical process documentation for internal operations.
payment-integration
IncludedIntegrate payments with SePay (VietQR), Polar, Stripe, Paddle (MoR subscriptions), Creem.io (licensing). Checkout, webhooks, subscriptions, QR codes, multi-provider orders.
customer-success-manager
IncludedMonitors customer health, predicts churn risk, and identifies expansion opportunities using weighted scoring models for SaaS customer success
sales-engineer
IncludedAnalyzes RFP/RFI responses for coverage gaps, builds competitive feature comparison matrices, and plans proof-of-concept (POC) engagements for pre-sales engineering. Use when responding to RFPs, bids, or proposal requests; comparing product features against competitors; planning or scoring a customer POC or sales demo; preparing a technical proposal; or performing win/loss competitor analysis. Handles tasks described as 'RFP response', 'bid response', 'proposal response', 'competitor comparison', 'feature matrix', 'POC planning', 'sales demo prep', or 'pre-sales engineering'.
customer-success-manager
IncludedMonitors customer health, predicts churn risk, and identifies expansion opportunities using weighted scoring models for SaaS customer success
sales-engineer
IncludedAnalyzes RFP/RFI responses for coverage gaps, builds competitive feature comparison matrices, and plans proof-of-concept (POC) engagements for pre-sales engineering. Use when responding to RFPs, bids, or proposal requests; comparing product features against competitors; planning or scoring a customer POC or sales demo; preparing a technical proposal; or performing win/loss competitor analysis. Handles tasks described as 'RFP response', 'bid response', 'proposal response', 'competitor comparison', 'feature matrix', 'POC planning', 'sales demo prep', or 'pre-sales engineering'.