📦 その他コミュニティ

crisp

ウェブサイトにチャット機能や顧客サポートを導入したい場合に、チャットウィジェットの追加、ヘルプデスクの構築、知識ベースの作成、チャットボットの実装などを支援するSkill。

📜 元の英語説明(参考)

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.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o crisp.zip https://jpskill.com/download/14799.zip && unzip -o crisp.zip && rm crisp.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/14799.zip -OutFile "$d\crisp.zip"; Expand-Archive "$d\crisp.zip" -DestinationPath $d -Force; ri "$d\crisp.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して crisp.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → crisp フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Crisp

概要

Crisp は、ライブチャットウィジェット、共有受信箱、ナレッジベース、チャットボット、CRM を備えたオールインワンの顧客メッセージングプラットフォームです。無料のプランでは、無制限の会話で 2 人のオペレーターをサポートします。

手順

ステップ 1: チャットウィジェットの追加

<!-- ウェブサイトに追加 — 基本的なインストール -->
<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>

ステップ 2: React 統合

// components/CrispChat.tsx — React/Next.js での Crisp
'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
}

// ユーザーがログインしたときにユーザーデータを設定します
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']]])

ステップ 3: API 統合

// lib/crisp.ts — API 経由でメッセージを送信し、会話を管理します
const CRISP_ID = process.env.CRISP_IDENTIFIER!
const CRISP_KEY = process.env.CRISP_KEY!
const WEBSITE_ID = process.env.CRISP_WEBSITE_ID!

// 会話にメッセージを送信します
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.',
  }),
})

ガイドライン

無料プラン: 2 人のオペレーター、無制限の会話、チャットウィジェット、モバイルアプリ。
Pro ($25/月): チャットボット、ナレッジベース、音声/ビデオ通話、統合。
セッションデータを使用して、ユーザーコンテキスト (plan、MRR、last action) をサポートエージェントに渡します。
Crisp チャットボットは、人間にルーティングする前に FAQ を自動的に処理できます。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

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.