ここに記載されている以外の Web SDK ウィジェット UI に適用されたカスタマイズはサポートされておらず、予期しない動作が発生する可能性があります。より高度なカスタマイズが必要な場合は、ヘッドレス SDK を使用することをおすすめします。
テーマのカスタマイズが想定どおりに表示されるように、変更を本番環境にデプロイする前に、テスト環境で変更をテストすることをおすすめします。
ランチャーのデザイン
ランチャーのアイコン、サイズ、位置、色をカスタマイズできます。
ランチャー
開くアイコン
閉じるアイコン
アイコン
デフォルトのランチャーの UI がブランドに合わない場合は、独自の SVG ファイルを使用してランチャーのアイコンをカスタマイズできます。SVG ファイルに URL を追加することはできません。SVG ファイル自体である必要があります。
ccaas.config({ launcherOpenIcon: '<svg ....>', launcherCloseIcon: '<svg ....>',})
サイズ
ランチャーのデフォルトの幅と高さは 80px です。サイズを変更できます。
#ccaas-widget {
--launcher-size: 60px;
}
枠線のカスタマイズ
ランチャーの枠線について、次のオプションをカスタマイズできます。
- 枠線の色
- 枠線の幅
- ドロップ シャドウ（増減）
--launcher-border-color
--launcher-border-width
--launcher-shadow
ランチャーの色
デフォルトでは、ランチャーはアクセント カラーを使用します。
{
--launcher-border-color: var(--accent-10);
--launcher-background-color: var(--accent-10);
--launcher-color: var(--accent-9-contrast);
}
ランチャーをカスタマイズして別の色を使用できます。次に例を示します。
#ccaas-widget {
--launcher-border-color: var(--green-10);
--launcher-background-color: var(--blue-10);
--launcher-color: white;
}
ランチャーを無効にする
デザイン上の理由から、Web SDK ランチャーを非表示にして、代わりにプロアクティブ チャット トリガーを使用したり、プログラムでチャットを開始したりすることがあります。disableLauncher を使用して、ランチャーの UI を非表示にしたり、無効にしたりできます。
ccaas.config({
disableLauncher: true
})
ランチャーが無効になっている場合は、次の方法でウィジェットを開くことができます。
ccaas.show()
ウィジェットのデザイン
ウィジェット
ロゴ
フォント
ユーザー インターフェースに別のフォントを選択します。
--font-en: Roboto、Verdana、Helvetica Neue
--font-zh: PingFang SC、Hiragino Sans GB、Droid Sans Fallback、Microsoft YaHei
--font-ja: Hiragino Sans、Meiryo
アクセント カラー
次の構成を使用して、事前定義された色オプションを選択することで、アクセント color をカスタマイズできます。
ccaas.config({
accent: 'green',
})
定義済みの色には、blue、green、purple、orange、yellow、gold、red があります。
アクセントのカスタマイズ
事前定義された選択肢がビジネスニーズに合わない場合は、CSS 変数を使用してスタイルをカスタマイズできます。
#ccaas-widget {
--accent-1: #fbfdff;
--accent-2: #f4faff;
--accent-3: #e6f4fe;
--accent-4: #d5efff;
--accent-5: #c2e5ff;
--accent-6: #acd8fc;
--accent-7: #8ec8f6;
--accent-8: #5eb1ef;
--accent-9: #0090ff;
--accent-10: #0588f0;
--accent-11: #0d74ce;
--accent-12: #113264;
--accent-contrast: white;
--chat-input-selection-color: var(--accent-11);
}
位置
マウント ポイントが #ccaas-widget の場合、次のコマンドを使用してウィジェットの位置を更新できます。
#ccaas-widget {
--ujet-right: 20px;
--ujet-bottom: 10px;
}
ロゴ
ウィジェットに表示するカスタム logo を選択します。
ccaas.config({
logo: 'https://example.com/logo.png'
})
エージェントのロゴの枠線を非表示にする
マウント ポイントが #ccaas-widget の場合は、次のコードサンプルを使用してエージェントのロゴの枠線を非表示にできます。
#ccaas-widget {
--head-logo-shadow: none;
}
その他のコンポーネント
アクセント カラーと位置に加えて、Web SDK ウィジェットでは、ウィジェットで使用される他のコンポーネントの一部を構成するための CSS 変数がさらに提供されています。
マウント ポイントが #ccaas-widget の場合、次のコードサンプルを使用してカスタマイズできます。
#ccaas-widget {
--variable-name: value;
}
一般的な CSS 変数
--text-font: デフォルトのテキスト フォント ファミリー。
--text-color: デフォルトのテキストの色。
--end-color: 終了ボタン（チャットの終了、チャットの退出、共同ブラウジングの終了）のデフォルトの色
確認アイコン
SDK のさまざまなページに表示される確認アイコンをカスタマイズできます。デフォルトのアイコンをカスタム アイコンに置き換え、サイズと色を制御できます。
--confirmation-icon-size
--confirmation-icon-color
ボタン
さまざまなボタンタイプのカスタマイズをきめ細かく制御できます。次の表に、さまざまな種類のボタンを組み合わせてカスタマイズした場合に想定される動作を示します。
| ボタンのカスタマイズが適用されました | 結果 |
| なし | デフォルトの動作（すべてのボタン スタイルがプライマリ テーマに従って表示されます）。 |
| ボタンの一般的なカスタマイズ | すべてのボタン（ダイアログ/チャット画面を除く）は、お客様が設定したカスタマイズに従って表示されます。これにはメニュー ボタンが含まれます。 一般的なボタンのカスタマイズ変数が指定されていない場合、デフォルトの動作が適用されます。 |
| メニューボタンのカスタマイズ
ダイアログ ボタンのカスタマイズ |
メニュー ボタンは、--menu-button 変数に応じて表示されます。 ダイアログ ボタンは、 メニュー / ダイアログ ボタンのカスタマイズ変数が指定されていない場合、デフォルトの動作が適用されます。 |
| ボタンの一般的なカスタマイズ
メニューボタンのカスタマイズ ダイアログ ボタンのカスタマイズ |
メニューボタンは --menu-button 変数に応じて表示されます ダイアログ ボタンは、 メニューボタンまたはダイアログ ボタン以外のボタンは、一般的なカスタマイズに従って表示されます。 一般的なボタン、メニューボタン、ダイアログ ボタンのカスタマイズ変数が指定されていない場合、そのボタンにはデフォルトの動作が適用されます。 |
一般的なボタン
独自の CSS 変数を持たない SDK 全体の他のすべてのボタンは、[General Button] の構成とカスタマイズを使用します。
--general-button-default-background
--general-button-default-border
--general-button-default-color
--general-button-default-outline
--general-button-hover-background
--general-button-hover-border
--general-button-hover-color
--general-button-hover-outline
--general-button-active-background
--general-button-active-border
--general-button-active-color
--general-button-active-outline
--general-button-focus-background
--general-button-focus-border
--general-button-focus-color
--general-button-focus-outline
メインボタン
--primary-button-default-background<
--primary-button-default-color
--primary-button-focus-background
--primary-button-focus-color
--primary-button-hover-background
--primary-button-hover-color
--primary-button-active-background
--primary-button-active-color
--primary-button-disabled-background
--primary-button-disabled-color
セカンダリ ボタン
--secondary-button-default-background
--secondary-button-default-border
--secondary-button-default-outline
--secondary-button-default-color
--secondary-button-hover-background
--secondary-button-hover-border
--secondary-button-hover-outline
--secondary-button-hover-color
--secondary-button-active-background
--secondary-button-active-border
--secondary-button-active-outline
--secondary-button-active-color
--secondary-button-disabled-background
--secondary-button-disabled-border
--secondary-button-disabled-outline
--secondary-button-disabled-color
--secondary-button-focus-background
--secondary-button-focus-border
--secondary-button-focus-outline
--secondary-button-focus-color
セカンダリ ボタン（反転）
--secondary-button-inverse-default-background
--secondary-button-inverse-default-border
--secondary-button-inverse-default-outline
--secondary-button-inverse-default-color
--secondary-button-inverse-hover-background
--secondary-button-inverse-hover-border
--secondary-button-inverse-hover-outline
--secondary-button-inverse-hover-color
--secondary-button-inverse-active-background
--secondary-button-inverse-active-border
--secondary-button-inverse-active-outline
--secondary-button-inverse-active-color
--secondary-button-inverse-disabled-background
--secondary-button-inverse-disabled-border
--secondary-button-inverse-disabled-outline
--secondary-button-inverse-disabled-color
--secondary-button-inverse-focus-background
--secondary-button-inverse-focus-border
--secondary-button-inverse-focus-outline
--secondary-button-inverse-focus-color
メニュー ボタン
メニューボタンのカスタマイズ。
--menu-button-default-background
--menu-button-default-border
--menu-button-default-text
--menu-button-default-outline
--menu-button-hover-background
--menu-button-hover-border
--menu-button-hover-text
--menu-button-active-background
--menu-button-active-border
--menu-button-active-text
--menu-button-active-outline
--menu-button-focus-background
--menu-button-focus-border
--menu-button-focus-text
--menu-button-focus-outline
メニューボタンのカスタマイズ
ダイアログ ボタン
たとえば、モーダルやポップアップなどです。
--dialog-background
--dialog-text
--dialog-primary-button-default-background
--dialog-primary-button-default-border
--dialog-primary-button-default-text
--dialog-primary-button-default-outline
--dialog-primary-button-hover-background
--dialog-primary-button-hover-border
--dialog-primary-button-hover-text
--dialog-primary-button-hover-outline
--dialog-primary-button-focus-background
--dialog-primary-button-focus-border
--dialog-primary-button-focus-text
--dialog-primary-button-focus-outline
--dialog-primary-button-active-background
--dialog-primary-button-active-border
--dialog-primary-button-active-text
--dialog-primary-button-active-outline
--dialog-secondary-button-default-background
--dialog-secondary-button-default-border
--dialog-secondary-button-default-text
--dialog-secondary-button-default-outline
--dialog-secondary-button-hover-background
--dialog-secondary-button-hover-border
--dialog-secondary-button-hover-text
--dialog-secondary-button-hover-outline
--dialog-secondary-button-focus-background
--dialog-secondary-button-focus-border
--dialog-secondary-button-focus-text
--dialog-secondary-button-focus-outline
--dialog-secondary-button-active-background
--dialog-secondary-button-active-border
--dialog-secondary-button-active-text
--dialog-secondary-button-active-outline
チャット ヘッダー
--options-menu-icon-color-default
--options-menu-icon-color-hover
--options-menu-icon-color-active
--options-menu-icon-color-focus
--options-menu-icon-background-default
--options-menu-icon-background-hover
--options-menu-icon-background-active
--options-menu-icon-background-focus
チャットをミュートする
ccaas.config({
enableMuteChat: true,
})
チャット バブル
--chat-bubble-background
--chat-bubble-border
--chat-bubble-text
--chat-bubble-line-height
--chat-bubble-agent-background
--chat-bubble-agent-text
--chat-bubble-agent-border-top-left
--chat-bubble-agent-border-top-right
--chat-bubble-agent-border-bottom-right
--chat-bubble-agent-border-bottom-left
--chat-bubble-user-background
--chat-bubble-user-text
--chat-bubble-user-border-top-left
--chat-bubble-user-border-top-right
--chat-bubble-user-border-bottom-right
--chat-bubble-user-border-bottom-left
### チャットのふきだしのカスタマイズ
メッセージ
--message-event-general-font
--message-event-general-font-size
--message-event-general-font-weight
--message-event-general-color
--message-event-error-font
--message-event-error-font-size
--message-event-error-font-weight
--message-event-error-color
--message-event-confirmation-font
--message-event-confirmation-font-size
--message-event-confirmation-font-weight
--message-event-confirmation-color
--message-progress-color
--message-button-font
--message-button-text-size
--message-button-text-color
--message-button-font-style
--message-button-default-background
--message-button-default-border
--message-button-hover-background
--message-button-focus-background
--message-button-focus-text
--message-button-disabled-background
--message-button-disabled-border
--message-button-disabled-color
--message-button-disabled-font-style
セッション後の仮想エージェント
--post-session-background
--post-session-padding
