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

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間：3分

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

    始める前に

    必要なロール：admin、virtual_agent_admin

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

    このタスクについて

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

    手順

    1. 次のように移動する。 All (すべて) > テーマ > Theme Builder (テーマビルダー).
    2. プライマリ色とセカンダリ色を指定して、新しいテーマを作成します。
      注:
      選択したブランディングレコードのチャットヘッダーの背景とチャットの背景色に色を合わせることができます。テーマの作成の詳細については、「 Create a theme with Theme Builder」を参照してください。
    3. テーマを保存します。
    4. ポータル構成にテーマを追加します。
      1. 次のように移動する。 All (すべて) > Now Experience フレームワーク > テーマ.
      2. インポートするテーマのレコードを選択します。
      3. [他のアクション] アイコン [他のアクション] アイコンの下で、[ コピー sys_id] を選択します。
      4. 次のように移動する。 All (すべて) > サービスポータル > エージェントチャット.
      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. 次のように移動する。 All (すべて) > Now Experience フレームワーク > テーマ > テーマビルダー.
    10. ドロップダウンメニューから [マネージャー] を選択し、作成したテーマを選択します。
    11. [コンポーネント スタイル] タブで、[編集] を選択します。

      ブランディングの色に合わせて、テーマビルダーの色の 16 進数コードを更新します。

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

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

    タスクの結果

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