ライブチャット
Web アプリ向けの任意 Tawk.to チャットウィジェット
概要
EasyStarter は Web アプリに Tawk.to のチャットバブルを読み込めます。オプトインです。ID が空なら Tawk スクリプトは一切リクエストされません。
Tawk.to の無料プランはエージェント数・会話数・履歴に上限がありません。バブルの Powered by tawk.to を外すには有料のホワイトラベルが必要です。
環境変数
これらは 公開 VITE_ 変数で、クライアントバンドルに埋め込まれます。apps/server/.dev.vars には置かないでください。
| 変数 | 用途 |
|---|---|
VITE_TAWK_PROPERTY_ID | embed スニペットの Property ID |
VITE_TAWK_WIDGET_ID | embed スニペットの Widget ID |
次の 3 箇所に両方を設定します。
- ローカル開発:
apps/web/.env.development - ローカル本番ビルド:
apps/web/.env.production（Git には入らない） - Cloudflare デプロイ / GitHub 連携ビルド:
apps/web/wrangler.jsoncのvars
両方必須です。どちらかが空ならウィジェットは無効のままです。
VITE_* は ビルド時 にクライアントへ埋め込まれます。Cloudflare ダッシュボードの Worker 変数は実行時向けです。GitHub 上のビルドでは Build variables か、リポジトリ内の wrangler.jsonc が必要です。wrangler.jsonc に ID があればダッシュボードへの再入力は不要です。
ID の取得
- tawk.to で無料アカウントを作成します。
- サイト用の property を作成します。
- Administration → Channels → Chat Widget を開き、embed スニペットをコピーします。
- スクリプト URL は
https://embed.tawk.to/{PROPERTY_ID}/{WIDGET_ID}の形です。
VITE_TAWK_PROPERTY_ID=64abc123def4567890abcdef
VITE_TAWK_WIDGET_ID=1hxxxxxxx動作
- ランディング、ドキュメント、ブログ、法務ページ、ダッシュボードではバブルを表示します。
- 認証ページ（
/auth/sign-in、/auth/sign-up、およびロケール付きの同等パス）ではフォームを隠さないよう非表示にします。 - ログイン中のユーザーは
nameとemailを Tawk に渡し、エージェントが相手を識別できるようにします。 - ログアウト時にウィジェットをリセットし、次の訪問者に前のユーザーが付かないようにします。
- Native アプリには接続しません。Web ウィジェットのみです。
確認
- 両方の ID を空のまま
pnpm dev:webを実行し、DevTools → Network にembed.tawk.toがないことを確認します。 - 両方の ID を入れて Web を再起動し、ランディングページにバブルが出ることを確認します。
/auth/sign-inを開き、バブルが非表示になることを確認します。- ログインしてダッシュボードを開き、Tawk 受信箱にユーザーのメールが表示されることを確認します。