サービスポータルウィジェット (sn-va-sp-widget) で仮想エージェントアイコンを変更する方法Issue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } サービスポータルの仮想エージェントウィジェットで使用されるチャットバブルアイコンは、ブランディングのセットアップでは変更できません。ウィジェットコードのカスタマイズが必要です。 これはカスタマイズであり、ServiceNow では直接サポートされていません。これらの変更を準本番インスタンスで十分にテストしてから、本番環境に実装してください。 Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } London、Madrid Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } 手順 [システム UI] (System UI) > [画像 (Images)] に移動し、新しい画像を作成します。ファイルに「sn-va-sp-widget-icon.svg 」という名前を付け、チャットバブルに表示する画像を追加します。 この画像は SVG 形式である必要があります。添付されているのは SVG ファイルの例です。 仮想エージェントサービスポータルウィジェットのクローンを作成し、ウィジェットの CSS で次のように変更します。変更箇所： .sn-va-widget-icon { background-image: url('/sn-va-sp-widget/sn-va-sp-widget-icon.svg'); height: 32px; top: 1px; left: 12px; width: 36px; display: block} 変更後： .sn-va-widget-icon { background-image: url('/sn-va-sp-widget-icon.svg'); height: 32px; top: 1px; left: 12px; width: 36px; display: block} OOB ウィジェットが使用されているページの OOB ウィジェットを新しいウィジェットに置き換えます。ブラウザのキャッシュを空にし、ブラウザをハードリロードして、サービスポータルのチャットバブルの変更を確認します。 変更前： 変更後： 注意：「glide.attachment.extensions」プロパティに svg ファイル拡張子が含まれていることを確認してください。 詳細については、「ファイル拡張子の制限」を参照してください。 Related Links<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } 仮想エージェントのブランディングの構成KB0714318 - サービスポータルでフッターに仮想エージェントウィジェットを追加する方法KB0716436 - スタンドアロン仮想エージェントクライアントページを非認証ユーザーのログインにリダイレクトする方法KB0726475 - 一部のインスタンスで仮想エージェントウィジェットアイコン (sn-va-sp-widget-icon.svg) が見つからない。KB0751672 - 仮想エージェントアイコンの背景色を変更する