コンテンツにスキップ
Clienta.ai

ウィジェットのカスタマイズ

ウィジェットのカスタマイズ

Section titled “ウィジェットのカスタマイズ”

チャットウィジェットの外観を、ブランドやウェブサイトのデザインに合わせてカスタマイズできます。

設定

Section titled “設定”

すべてのウィジェットカスタマイズオプションは、設定 → チャンネル → Web から利用できます。Webチャンネルを選択し、外観 タブを開いてください。

テーマカラー

Section titled “テーマカラー”

テーマカラーはウィジェット全体に一貫して適用されます：

  • ランチャーボタンの背景
  • ヘッダーバーの背景
  • 送信ボタンの色
  • リンクのハイライト色
  • ユーザーメッセージバブルの背景

ブランドアイデンティティに合い、白いテキストとのコントラストが十分な色を選択してください。

ウェルカムメッセージ

Section titled “ウェルカムメッセージ”

ウェルカムメッセージは、顧客がウィジェットを開いたときに最初に表示されるテキストです。親しみやすい表現で、ボットが何を支援できるかを明確に説明してください。

例：

  1. 「こんにちは！今日はどのようなお手伝いができますか？」
  2. 「Acmeサポートへようこそ。製品やサービスについて何でもお聞きください。」
  3. 「こんにちは！お手伝いします。何をお手伝いしましょうか？」

ウィジェットの位置

Section titled “ウィジェットの位置”
位置設定値使用する場面
右下bottom-right (デフォルト)標準的な配置。ほとんどのサイトで適用可能
左下bottom-left右側が他の要素と競合する場合

アバター

Section titled “アバター”
v1.6.4

画像URLを指定することで、ウィジェットのヘッダーとホーム画面にカスタムアバターを表示できます。

ダッシュボードから設定： 設定 → チャンネル → Web → カスタマイザー → アバターURL でアバターURLを設定します。

埋め込みコードから設定： テーマ設定に avatarUrl を渡します：

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      avatarUrl: "https://example.com/your-logo.png"
    }
  };
</script>

要件：

  • https:// URLである必要があります（セキュリティ上の理由から、http、data:、javascript: URLは拒否されます）
  • 推奨サイズ： 128 × 128 ピクセル（正方形）
  • 対応フォーマット： PNG、JPG、WebP、SVG
  • URLが無効または画像の読み込みに失敗した場合は、デフォルトのアイコンが表示されます

グリーティングモード

Section titled “グリーティングモード”
v1.6.2

グリーティングメッセージは3つの言語モードに対応しています。設定 → チャンネル → Web → カスタマイザー に移動し、グリーティングモード セクションを確認してください。

固定

Section titled “固定”

すべての訪問者に対して、言語に関係なく同じグリーティングテキストが表示されます。これがデフォルトのモードです。

テキストフィールドに1つのグリーティングを入力してください。例：「こんにちは！今日はどのようなお手伝いができますか？」

訪問者に合わせる（ロケール）

Section titled “訪問者に合わせる（ロケール）”

言語ごとに異なるグリーティングを表示します。ウィジェットは訪問者の検出された言語を読み取り、対応するグリーティングを表示します。

  1. 訪問者に合わせる モードを選択します。
  2. サポートされている15のロケールそれぞれにフィールドが表示されます。
  3. サポートする各言語のグリーティングテキストを入力します。
  4. ロケールのフィールドを空白のままにすると、その言語では固定グリーティングにフォールバックします。

設定例：

  • タイ語: “สวัสดีค่ะ! มีอะไรให้ช่วยไหม?”
  • 英語: “Hi! How can I help you today?”
  • 日本語: “こんにちは！何かお手伝いできますか？“

組織メイン言語

Section titled “組織メイン言語”

訪問者の言語に関係なく、組織のメイン応答言語でグリーティングが常に表示されます。このモードは AI設定 → メイン応答言語 で設定された言語を参照します。

チームが1つの言語で運営されており、すべてのグリーティングを統一したい場合は組織メイン言語を使用してください。

言語セレクター

Section titled “言語セレクター”
v1.6.2

言語セレクターは、訪問者が明示的に言語を選択できるよう、ウィジェットヘッダーにグローブアイコン（🌐）を追加します。デフォルトでは無効になっています。

有効にする方法： 設定 → チャンネル → Web → カスタマイザー で、言語セレクターを表示 をONに切り替えます。

訪問者がドロップダウンから言語を選択すると：

  • セッション中のすべてのAI応答がその言語に固定されます
  • 訪問者が別の言語で入力しても、自動検出よりロックが優先されます
  • ウィジェットUIが選択した言語に切り替わります

完全な動作概要については、Webウィジェット — 言語セレクター を参照してください。

デフォルト言語

Section titled “デフォルト言語”
v1.6.8

自動検出が行われる前に、訪問者が希望するロケールでUIを表示するためのデフォルト言語を設定します。設定 → チャンネル → Web → カスタマイザー → デフォルト言語 に移動し、ドロップダウンから選択してください。

言語の優先順位は次のとおりです：

  1. この言語を強制 （AI設定）— 有効にするとすべてを上書き
  2. 訪問者の明示的な選択（言語セレクターを使用、有効な場合）
  3. デフォルト言語 — この設定
  4. 埋め込みコードのロケール — 埋め込みコード内の locale 値
  5. タイ語 — 他に何も設定されていない場合のフォールバック

この設定をスキップして埋め込みコードのロケール値に依存する場合は、「なし — 埋め込みコードに従う」 を選択してください。

プレビュー

Section titled “プレビュー”

変更を加えた後、設定ページ右側の ライブプレビュー パネルを使用して、保存する前にウィジェットがサイト上でどのように表示されるかを正確に確認できます。

ヒント

Section titled “ヒント”