コンテンツにスキップ
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 “スタティック”

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

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

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

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

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

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

設定例：

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

組織メイン言語

Section titled “組織メイン言語”

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

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

言語セレクター

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

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

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

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

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

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

デフォルト言語

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

ウィジェットのデフォルト言語を設定することで、自動検出が行われる前に、訪問者が希望のロケールでUIを確認できます。設定 → チャンネル → Web → カスタマイザー → デフォルト言語 に移動し、ドロップダウンから選択します。

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

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

「なし — 埋め込み設定に従う」 を選択すると、この設定をスキップして埋め込みコードのロケール値を使用します。

ダークモードとCSS変数

Section titled “ダークモードとCSS変数”
v1.6.8

ウィジェットはチャットヘッダーから訪問者が切り替えられるダークモードトグルを内蔵しています。ウィジェットUI全体がCSSカスタムプロパティを使用してテーマ設定されており、両モードで一貫した外観を確保しています。

主なCSS変数

Section titled “主なCSS変数”
変数説明
--cw-primaryプライマリブランドカラー（テーマカラー設定から）
--cw-primary-rgb透明度エフェクトに使用されるプライマリカラーのRGBコンポーネント
--cw-bgウィジェットの背景色
--cw-bg-secondaryセカンダリ背景（入力フィールド、フォーム要素）
--cw-surfaceカード、ツールチップ、引用スニペットのサーフェスカラー
--cw-textプライマリテキストカラー
--cw-text-secondaryセカンダリ/ミュートテキストカラー
--cw-borderセパレーターと入力アウトラインのボーダーカラー

ダークモードが切り替わると、ウィジェットはルートコンテナに cw-dark または cw-light クラスを適用し、すべてのCSS変数が自動的に更新されます。グラデーションヘッダー、メッセージバブル、コンタクトフォーム、引用チップはすべて現在のモードに対応しています。

プレビュー

Section titled “プレビュー”

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

ヒント

Section titled “ヒント”