カタログブランディングの設定

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：3分

    • ビジネスのブランディングに合わせて、 仮想エージェント カタログの外観をカスタマイズします。

    始める前に

    必要なロール：admin、virtual_agent_admin

    ServiceNow Store から テーマビルダー をダウンロードし、プラグイン (sn_theme_builder) を有効にします。詳細については、「Activate a plugin」を参照してください。

    このタスクについて

    仮想エージェント ではブランディングセットアップ [sys_cs_branding_setup] テーブルを使用してブランディングカラーを定義しますが、カタログはブランディングカラーを継承しません。代わりに、カタログはインスタンスの UX テーマ [sys_ux_theme] レコードで定義されたカスケードスタイルシート (CSS) 変数を使用します。

    手順

    1. 移動先 すべて > テーマ > テーマビルダー.
    2. プライマリ色とセカンダリ色を指定して、新しいテーマを作成します。
      注:
      選択したブランディングレコードの [チャットヘッダーの背景色] と [チャットの背景色] に色を合わせることができます。テーマの作成の詳細については、「 Create a theme with Theme Builder」を参照してください。
    3. テーマを保存します。
    4. ポータル構成にテーマを追加します。
      1. 移動先 すべて > Now Experience フレームワーク > テーマ.
      2. インポートするテーマのレコードを選択します。
      3. [他のアクション] アイコン [他のアクション] アイコンで、[ コピー sys_id] を選択します。
      4. 移動先 すべて > サービスポータル > エージェントチャット.
      5. ブランディングテーマを追加するポータル構成を選択し、ステップ 4c のsys_idを含む次の行をサーバースクリプトに追加します。
      たとえば、sys_idが 0be48eb1eba0011090fa99602a522843 の場合は、次のように追加します。
      macroponent_theme: '0be48eb1eba0011090fa99602a522843'
    5. 必要に応じて、バリアントテーマをポータル構成に追加します。
      1. 手順 4a と 4b を繰り返します。
      2. [構成:アプリのテーマ] タブで、Typeが [バリアント] である目的のStyleを開きます。
      3. 手順 4c と 4d を繰り返します。
      4. ブランディングテーマを追加したポータル構成を選択し、ステップ 5c のsys_idを含む次の行をサーバースクリプトに追加します。
      たとえば、バリアントのテーマのsys_idが 1df59fc2fcb1122101gb00713b633954 の場合、次のように追加します。
      macroponent_theme_variant: '1df59fc2fcb1122101gb00713b633954'
    6. [更新] を選択して構成を保存します。
    7. 構成が使用されているポータルに移動します。
      たとえば、 ESC Chat ポータル構成を更新した場合は、[従業員サービスセンター (ESC)] に移動します。
    8. ポータルチャットでカタログトピックを実行してその構成をロードし、ブランディングが必要な要素を表示します。

      仮想エージェント チャットウィンドウ。ハイライト表示された更新するリンクとボタン。

    9. 移動先 すべて > Now Experience フレームワーク > テーマ > テーマビルダー.
    10. ドロップダウンメニューから [ マネージャー] を選択し、作成したテーマを選択します。
    11. [ コンポーネントスタイル ] タブで、[ 編集] を選択します。

      テーマビルダーの色の 16 進数コードをブランディングの色と一致するように更新します。

    12. ステップ 8 で見つかったブランディングが必要な要素を 1 つ選択します。
    13. パレットサイドバーで、要素の 16 進コードの色を設定して、ブランディングレコードの色と一致させます。
    14. すべての要素を更新するまで、手順 12 と 13 を繰り返します。

      仮想エージェント チャットウィンドウ。ハイライト表示されたリンクと、 テーマビルダーの 16 進数のカラーコードを変更した後に更新されたボタン。

    タスクの結果

    カタログのカラーテーマがブランディングと一致するようになりました。