Menu

Crisp 統合

Crisp はカスタマーサポート向けの強力なライブチャットツールです。主に以下を使用します：

  • ライブチャット：ウェブサイト訪問者とのリアルタイムコミュニケーション
  • カスタマーサポート：迅速な技術サポートとユーザーの質問への回答
  • 訪問者トラッキング：訪問者の閲覧行動とナビゲーションパスを表示
  • マルチチャネル統合：メール、Messenger、WhatsApp などのメッセージングチャネルをサポート

NEXTY.DEV ボイラープレートは components/support/CrispChat.tsx コンポーネントを通じて Crisp Chat Widget を統合し、製品に即座に使えるカスタマーサポート機能を提供します。

ステップ

  1. Crisp にアクセスし、アカウントを登録します
  2. Crisp ダッシュボードにログインし、新しい Website を作成するか、既存の Website に入ります
  3. Settings → Website Settings → Setup instructions を開きます
  4. ページで Website ID（UUID 形式の文字列）を見つけます
  5. Website ID を環境変数 NEXT_PUBLIC_CRISP_WEBSITE_ID に貼り付けます
.env
NEXT_PUBLIC_CRISP_WEBSITE_ID="your-crisp-website-id"

カスタム設定

Crisp は豊富なカスタマイズオプションを提供しています。Crisp ダッシュボードで以下の設定ができます：

  • 外観：チャットウィンドウの色、位置、言語などを変更
  • 自動メッセージ：ウェルカムメッセージと自動返信ルールを設定
  • 営業時間：オンラインサポート時間とオフラインメッセージを設定
  • ショートカット：よく使う返信テンプレートを作成して効率を向上

検証

設定が完了したら、ウェブサイトにアクセスすると、ページの右下隅に Crisp チャットバブルが表示されるはずです。バブルをクリックして会話を開始できます。

また、Crisp ダッシュボードの Inbox セクションで訪問者のメッセージを確認・返信することもできます。