仮想エージェント拡張チャットのNow Assistのテーマ
関連するカスケードスタイルシート (CSS) 変数を更新することで仮想エージェントServiceNowポータルの拡張チャットエクスペリエンスでNow Assistのルックアンドフィールをカスタマイズできます。
仮想エージェントアドミンまたはアドミニストレーターは、デフォルトの拡張チャットテーマ変数をカスタマイズできます。テーマをカスタマイズする方法については、「 Create a portal theme」を参照してください。CSS 変数フィールド (sp_theme) レコード内の次の表で、これらの変数を編集します。ポータルのテーマに関連付けられた CSS インクルードを使用してこれらの変数を構成することもできます。
注:
チャットヘッダーロゴは標準チャットと拡張チャットで共有され、選択した標準チャットのブランディングプロファイルによって決定されます。エクスペリエンスごとに個別のチャットヘッダーロゴを構成することはできません。一方のエクスペリエンスでチャットヘッダーのロゴを更新すると、もう一方のエクスペリエンスでも更新されます。ブランディングプロファイルを表示するには、次に移動します .
変数の場合、 nass は拡張チャットを参照します。拡張チャットの詳細については、「 拡張チャット」を参照してください。
| 変数 | 説明 | デフォルト値 |
|---|---|---|
| $now-sp-nass-agent-bubble-font-color | エージェントテキストメッセージのフォント色。 | $text色 |
| $now-sp-nass-chat-user-message-bubble-bg-color | ユーザーテキストメッセージのバブル背景色。 | $brand-primary-lightest |
| $now-sp-nass-user-bubble-font-color | ユーザーテキストメッセージのフォント色。 | $text色 |
| $now-sp-nass-timestamp-color | タイムスタンプのテキストの色。 | $textミュート |
| $now-sp-nass-secondary-text-color | [アクティブ] などのセカンダリテキストの色。 | $grayダーク |
| $now-sp-nass-system-msg-text-color | システムメッセージのテキストの色。 | $textミュート |
| $now-sp-nass-base-input-field-placeholder-and-highlight-text-color | テキストの色を入力し、プレースホルダーの不透明度を .45 にします。 | $text色 |
| $now-sp-nass-base-link-color | リンクの色。 | $brandプライマリ |
| $now-sp-nass-color-secondary_2 | Now Design System セカンダリ - 2 色。 | $brand-primary-darker |
| $now-sp-nass-modeless-dialog-header-bg-color | プライマリ Now Assist ヘッダーバーの背景色。 | #ffffff |
| $now-sp-nass-modeless-dialog-header-text-color | プライマリ Now Assist ヘッダーのテキスト色。 | $text色 |
| $now-sp-nass-base-toolbar-labels-and-icons-color | 左パネルのツールバーアイコン。 | $grayライト |
| $now-sp-nass-toolbar-icons-color--hover | ホバー状態の左パネルのツールバーアイコン。 | $grayダーク |
| $now-sp-nass-toolbar-icons-color--active | アクティブ状態の左パネルのツールバーアイコン。 | $text色 |
| $now-sp-nass-toolbar-icons-fullscreen-mode-color | 全画面表示モードの左パネルのツールバーアイコン。 | 暗くする($brand-primary-darker、15%) |
| $now-sp-nass-toolbar-icons-fullscreen-mode-color--active | アクティブ状態の全画面表示モードの左パネルのツールバーアイコン。 | $brand-primary-darker |
| $now-sp-nass-window-control-icons-color | ウィンドウコントロールアイコン。 | $textミュート |
| $now-sp-nass-window-control-icons-color--hover | ホバー状態のウィンドウコントロールアイコン。 | $text色 |
| $now-sp-nass-window-control-icons-color--active | アクティブ状態のウィンドウコントロールアイコン。 | $text色 |
| $now-sp-nass-feedback-and-search-result-panel-color | フィードバックパネルと検索結果アイコン | $textミュート |
| $now-sp-nass-feedback-and-search-result-panel-selected-color | フィードバックパネルで選択されたアイコン。 | $textミュート |
| $now-sp-nass-action-and-kb-citation-color | アクションと ナレッジベース リンクの色 | $link色 |
| $now-sp-nass-color-primary-0 | ピル/プライマリボタンのプライマリ-0。 | $brand-primary-lightest |
| $now-sp-nass-color-primary-2 | アクティブ状態のピル/プライマリボタンの場合は Primary-2。 | $brand-primary-darker |
| $now-sp-nass-button-primary-bg-color | 選択ピッカーコントロールの [送信] ボタン。 | $btn-primary-bg |
| $now-sp-nass-button-primary-bg-active-color | ボタンのプライマリのアクティブな背景色。 | $btn-primary-bg |
| $now-sp-nass-button-selection-text-color | Now Design System セカンダリ-1 色 | $brandプライマリ |
| $now-sp-nass-tooltip-bg-color | 入力フィールドアイコンのツールヒントの背景色。 | $tooltip-bg |
| $now-sp-nass-tooltip-text-color | 入力フィールドアイコンのツールヒントのテキスト色。 | $tooltip色 |
| $now-sp-nass-alert-critical-color | 未読のインジケーターの色。 | $brand危険 |
| $now-sp-nass-input-field-icon-color | 入力フィールドのアイコンと添付ファイルのアイコン | $textミュート |
| $now-sp-nass-color-alert-moderate-3 | アニメーション化されたロード中アイコンの色。 | #4345a6 |
| $now-sp-nass-body-bg | 本文のプライマリ背景色。 | #ffffff |
| $now-sp-nass-base-highlight-color | 絵文字を検索するときに一致したテキストの背景色。 | 明るくする ($warning、35%) |
| $now-sp-nass-color-primary-3 | アクティブ状態のベアボタンの色。 | 暗くする($brand-primary-darker、15%) |
| $now-sp-nass-color-background-primary | コンテンツの背景色。 | #ffffff |
| $now-sp-nass-header-panel-bg-color | ヘッダーパネルの背景色。 | #ffffff |
| $now-sp-nass-button-bg-action-color | イメージピッカー選択ボタンの背景色。 | $brandプライマリ |
| $now-sp-nass-primary-button-action-text-color | イメージピッカー選択ボタンの色。 | $sp-btn-text-color |
|
$now-sp-nass-base-separator-color |
分離器。 | $borderターシャリ |
| $now-sp-nass-chat-agent-message-bubble-bg-color | エージェントメッセージのバブル背景色。 | $grayライト |
| $now-sp-nass-citation-badge-color | 引用バッジの色。 | $grayライター |
| $now-sp-nass-divider-and-border-tertiary-color | 検索結果でトピックの途中で切り替わる分割線と境界線の色。 | $borderターシャリ |
| $now-sp-nass-highlight-value-tertiary-info-bg-color | トピックの中央カードでハイライト表示された情報値。 | $state-info-bg |
| $now-sp-nass-FAB-icon | フローティングアクションボタンに表示されるアイコン画像。 | ai-sparkle-icon |
| $now-sp-nass-FAB-gradient-color-1 | チャットフローティングアクションボタンアイコンの背景色の最初の色。 | $brand-primary-lighter |
| $now-sp-nass-FAB-gradient-color-2 | チャットフローティングアクションボタンアイコンの背景グラデーションの 2 番目の色。 | $brand情報 |
| $now-sp-nass-FAB-gradient-hover-color-1 | ホバー状態のチャットフローティングアクションボタンアイコンの背景色の最初の色。 | $brand-primary-darker |
| $now-sp-nass-FAB-gradient-hover-color-2 | ホバー状態のチャットフローティングアクションボタンアイコンの背景色の 2 番目の色。 | 暗くする($brand情報、10%) |
| $now-sp-nass-FAB-gradient-active-color-1 | アクティブ状態のチャットフローティングアクションボタンアイコンの背景色の最初の色。 | $brandプライマリ |
| $now-sp-nass-FAB-gradient-active-color-2 | アクティブ状態のチャットフローティングアクションボタンアイコンの背景色の 2 番目の色。 | $brand情報 |
| $now-sp-nass-FAB-icon-size-factor | チャットアイコン内の画像のサイズを処理します。 | 1 |