ウェブウィジェット

ウェブウィジェットを使用すると、AIボットが動作するライブチャットウィンドウを任意のウェブサイトに直接埋め込むことができます。ブランドに合わせてカスタマイズし、数分で公開できます。

ウィジェット設定とライブプレビュー

インストール

左メニューから チャネル → ウェブウィジェット に移動します。
ウィジェットを作成 をクリックし、名前を付けます。
ウィジェットの設定を行います（下記のカスタマイズを参照）。
表示された埋め込みコードスニペットをコピーします。
ウェブサイトのHTMLの閉じ </body> タグの直前にスニペットを貼り付けます。
サイトを保存して公開すると、ウィジェットがすぐに表示されます。

埋め込みコード

<!-- Clienta.ai Web Widget -->
<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
  };
</script>
<script
  src="https://api.clienta.ai/widget/YOUR_WIDGET_ID/loader.js"
  async
></script>

YOUR_BOT_ID と YOUR_WIDGET_ID をダッシュボードに表示されている値に置き換えてください。

カスタマイズ

オプション	説明
テーマカラー	ブランドに合わせたメインカラーを設定します（HEXコードまたはカラーピッカー）
ウェルカムメッセージ	ユーザーがウィジェットを開いたときに最初に表示されるメッセージ
配置	画面の右下または左下への配置を選択します
アバター	ボット用のカスタムアバター画像をアップロードします

その他のオプション:

ウィジェットタイトル — ウィジェットのヘッダーに表示される名前
プレースホルダーテキスト — メッセージ入力欄内のヒントテキスト
自動表示の遅延 — N秒後にウィジェットを自動的に開く（任意）
モバイルで非表示 — モバイルデバイスでのウィジェット表示を切り替える

仕組み

ユーザーがウィジェットを開く — チャットウィンドウがページの角からスライドして表示されます。
ボットへメッセージを送信 — ユーザーのメッセージは、安全なWebSocket接続を通じてClienta.aiに送信されます。
AIが処理して返答する — ボットはナレッジベースから関連コンテンツを取得し、返答を生成します。
必要に応じて人間に引き継ぐ — 信頼度が低い場合、またはユーザーが人間のサポートを求めた場合、会話は会話インボックスを通じて対応可能なエージェントに転送されます。

お問い合わせフォーム

v1.6.8

AIボットがオフラインまたは応答できない場合、ウィジェットはCTAバルーンを表示し、訪問者に連絡先情報の入力を促します。バルーンをタップするとお問い合わせフォームが開きます:

フィールド	必須	メモ
メールアドレス	はい	フォローアップのため常に必須
電話番号	いいえ	37か国の国番号セレクターと絵文字フラグを含みます（例: 🇹🇭 +66、🇺🇸 +1、🇬🇧 +44、🇯🇵 +81）。サーバー側の検証により、送信されたコードが有効であることを確認します。
名前	いいえ	訪問者の名前
メッセージ	いいえ	追加の情報

お問い合わせフォームの送信により、管理画面のチケットページにチケットが作成され、メールアドレスと電話番号（入力されている場合）の両方が表示されます。

解決後の新しいチャット

v1.6.8

エージェントが会話を解決すると、ウィジェットにシステム通知と**「新しいチャットを開始」**ボタンが表示されます。クリックすると:

現在の会話履歴がクリアされます
新しいWebSocketセッションで再接続されます
ウィジェットが初期状態に戻ります

これにより、訪問者はページを更新せずに新しい会話を開始できます。

WebSocketリアルタイム通信

ウィジェットは、リアルタイムかつ低遅延のメッセージングのために持続的なWebSocket接続を使用します。主な動作:

自動再接続 — 接続が切断された場合、クライアントは自動的に再接続します。
タイピングインジケーター — ボットが返答を生成中にタイピングアニメーションを表示します。
エージェントのタイピングインジケーター — v1.6.8 人間のエージェントが返答を入力中のとき、ウィジェットは訪問者にリアルタイムでタイピングアニメーションを表示します。
メッセージ履歴 — 同一ブラウザセッション内で会話履歴が保持されます。
タブ間の同期 — ユーザーが複数のタブを開いている場合、会話の状態が同期されます。

マークダウンレスポンス

v1.6.4

AIおよびエージェントのメッセージは、プレーンテキストではなくフォーマットされたマークダウンとしてレンダリングされます。対応しているフォーマット:

太字、斜体、~~取り消し線~~
リンク（自動的に新しいタブで開く）
インライン コード およびフェンスコードブロック
順序付きリストと順序なしリスト
見出し、ブロック引用、テーブル

すべてのマークダウンコンテンツは、XSS攻撃を防ぐためにストリクトな許可リストでサニタイズされます。設定は不要で、マークダウンレンダリングはすべてのAIおよびエージェントの返答でデフォルトで有効になっています。ユーザーのメッセージはプレーンテキストのままです。

ブランドアバター

v1.6.4

ウィジェットのヘッダーとホーム画面にブランドロゴまたはカスタムアバターを表示します。設定 → チャネル → ウェブ → カスタマイザーで avatarUrl を設定するか、埋め込みコードで config.theme.avatarUrl として渡します。

https:// URLのみ受け付けます
URLが無効または画像の読み込みに失敗した場合、デフォルトのスパークルアイコンが表示されます
推奨: 最良の結果のために正方形の画像（例: 128 × 128 px）

詳細はウィジェットカスタマイズ — アバターを参照してください。

AIと人間のラベル

v1.6.4

すべてのユーザー以外のメッセージには、送信者を識別する小さな作成者ラベルが表示されます:

作成者の種類	表示されるラベル
AIボット	「AIアシスタント」（ローカライズ済み）
人間のエージェント	エージェントの名前（例:「Sarah」）

ラベルは15のサポート言語すべてでローカライズされており、スクリーンリーダーにも対応しています。これにより、訪問者はAI生成の返答と人間の返答を明確に区別でき、透明性のベストプラクティスをサポートします。

グリーティング言語

v1.6.2

ウィジェットのグリーティングメッセージは、設定 → チャネル → ウェブ → カスタマイザー → グリーティングモードで設定できる3つの言語モードをサポートしています:

モード	動作
静的	言語に関係なく、すべての訪問者に同じグリーティングを表示します
訪問者に合わせる	言語ごとのグリーティングを表示 — 15のロケールそれぞれに異なるグリーティングテキストを設定します
組織のメイン言語	常に組織のメイン返答言語でグリーティングを表示します（AI設定で設定）

訪問者に合わせるモードでは、グリーティングが設定されていないロケールは静的グリーティングテキストにフォールバックします。

ステップごとの設定方法はウィジェットカスタマイズ — グリーティングモードを参照してください。

言語セレクター

v1.6.2

ウィジェットのヘッダーにグローブアイコンを表示して、訪問者が希望する言語を明示的に選択できるようにすることができます。この機能はデフォルトで無効になっており、設定 → チャネル → ウェブ → カスタマイザーでウィジェットごとに有効にする必要があります。

有効にすると:

グローブ（🌐）アイコンがウィジェットのヘッダーに表示されます
訪問者は最大15のサポートロケールから選択できます
言語を選択すると、セッション中のすべてのAI返答がその言語に固定され、自動検出が上書きされます
訪問者が別の言語で入力した場合でも、固定は維持されます

RTL（右から左）サポート

v1.6.2

ウィジェットとランディングページは、アラビア語とヘブライ語のRTLレイアウトを完全にサポートしています。訪問者がRTLロケールを使用すると:

レイアウト全体が反転します（テキストの配置、ナビゲーション、UI要素）
<html dir="rtl"> 属性が自動的に設定されます
チャットメッセージと入力欄がRTLの読み方向に正しく配置されます

手動設定は不要で、RTLは選択されたロケールに基づいて自動的に有効になります。

マウントタイムアウトフォールバック

v1.6.5

ウィジェットスクリプト（widget.js）が10秒以内に読み込まれない場合、空白スペースを残す代わりに埋め込み箇所にフォールバックUIが表示されます。フォールバックには再試行ボタンが含まれており、訪問者はページを更新せずにウィジェットの再読み込みを試みることができます。

これにより、ネットワークの問題、広告ブロッカー、またはCDNの障害によってウィジェットがマウントできない場合でも、ユーザーエクスペリエンスが保護されます。

ウィジェットのビジュアルリデザイン

v1.6.8

ウィジェットはv1.6.8でモダンで洗練された外観にビジュアルリフレッシュされました:

グラデーションヘッダー — ウィジェットのヘッダーはテーマカラーに基づいたさりげないグラデーションを使用し、ステータスドットとアバターが表示されます。
丸みを帯びたメッセージバブル — チャットバブルはより大きなボーダーラジウス（rounded-2xl）を使用して、柔らかい外観になっています。
アニメーション付きの開閉 — ウィジェットは即座に表示される代わりに、スムーズなCSSアニメーションでスライドイン・アウトします。
再設計されたランチャー — チャットバブルランチャーは、ブランドカラーのグローシャドウと入場アニメーションを備えた60pxのスクワークルです。
ダークモード切り替え — チャットヘッダーの切り替えボタンで、訪問者はセッション中にライトモードとダークモードを切り替えられます。
テーマ付きフォーカスリング — 入力フィールドにはアクセシビリティのためにブランドカラーのフォーカスリングが表示されます。
通知バッジ — 未読メッセージバッジがランチャーバブルに表示されます。

これらのビジュアル変更は自動的に適用されます — 設定変更は不要です。

引用チップ

v1.6.5

AIボットがナレッジベースから取得した情報で返答した場合、メッセージの下に引用チップが表示されます。各チップは、回答に貢献した取得済みドキュメントを表します。

動作	説明
チップ表示	最大3件のドキュメントタイトルチップを表示します。さらに多くのソースが使用された場合、「+N件」チップが追加の引用を示します。
クリックで展開	チップをクリックすると、取得したコンテンツの最初の200文字を表示するインラインスニペットが切り替わります。一度に開けるスニペットは1つだけです。
タイトルの切り詰め	長いドキュメントタイトルは40文字で切り詰められ、省略記号が付きます。
テーマ	チップはウィジェットのメインカラーをさりげないティントとして使用し、ダークモードとRTLに完全対応しています。
アクセシビリティ	チップはキーボードでナビゲート可能で、適切なARIAラベル（`aria-expanded`）、リストロール、スクリーンリーダーサポートを備えています。

引用チップにより、訪問者はボットの回答がどこから来たかを把握でき、AIの返答への信頼が高まります。設定は不要で、RAGパイプラインが関連ドキュメントを取得すると引用が自動的に表示されます。

自動スクロール

v1.6.8

ウィジェットは新しいコンテンツが届くたびに自動的に最新のメッセージまでスクロールします。これは以下の場合に適用されます:

AIボットまたは人間のエージェントからの新しいメッセージ
ボットがリアルタイムで返答を生成する際のストリーミングコンテンツ

スクロールはスムーズなアニメーションを使用するため、遷移が自然に感じられます。設定は不要で、自動スクロールは常に有効です。

プランごとのチャネル制限

プラン	最大チャネル数
無料	1
スターター	2
グロース	5
プラス	6
プロ	15
スケール	30
エンタープライズ	50