メインコンテンツまでスキップ

🌐 Web チャットウィジェット

Web チャットウィジェットは、任意のウェブサイトに追加できる埋め込み可能な JavaScript チャットバブルです。訪問者がウィジェットからメッセージを送信すると、他のチャネルと同様に PulseHub の受信箱に表示されます。

ウェブサイトへのウィジェット追加​

1. PulseHub で Web チャットチャネルを追加​

  1. Channels → Add Channel に移動
  2. Web Chat Widget を選択
  3. 名前とオプションの挨拶文/色を入力
  4. Save Channel をクリック
  5. カードの Channel ID をメモ

2. スクリプトの埋め込み​

<script
  src="https://yourdomain.com/public/js/webchat-widget.js"
  data-channel="YOUR_CHANNEL_ID"
  data-greeting="Hi! How can we help you today?"
  data-color="#10b981">
</script>

ウィジェット設定オプション​

属性デフォルト説明
data-channel必須PulseHub のチャネル UUID
data-greetingHi! How can we help you?チャット初回表示時のメッセージ
data-color#10b981ボタンと送信メッセージの16進カラー

セッションの仕組み​

ウィジェットは localStorage に2つの値を保存します：

  • ph_contact_{channel_id} — コンタクトの UUID
  • ph_conv_{channel_id} — 会話の UUID

これにより、タブを閉じて戻ってきた訪問者は同じ会話を継続できます。

クロスオリジンリクエスト​

PulseHub がウェブサイトと異なるドメインにある場合、CORS ヘッダーを追加してください：

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://yourwebsite.com"
    Header set Access-Control-Allow-Methods "GET, POST, PATCH, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type, X-Webchat-Channel"
</IfModule>

セキュリティに関する注意​

Web チャット API エンドポイントは、X-Webchat-Channel ヘッダーが存在する場合、認証されていないユーザーからのリクエストを受け付けます。Web サーバーまたはファイアウォールレベルでレート制限を確保してください。