Configurar identidade visual do catálogo

  • Versão de lançamento: Xanadu
  • Atualizado 1 de ago. de 2024
  • 2 min. de leitura

    • Personalize a aparência dos Catálogos em Virtual Agent para corresponder à identidade visual da sua empresa.

    Antes de Iniciar

    Função necessária: admin, virtual_agent_admin.

    Baixe Construtor de temas da ServiceNow Store e ative o plug-in (sn_theme_builder). Para obter mais informações, consulte Activate a plugin.

    Por Que e Quando Desempenhar Esta Tarefa

    Virtual Agent usa a tabela Configuração de identidade visual [sys_cs_branding_setup] para definir as cores da identidade visual, mas os Catálogos não herdam as cores da identidade visual. Em vez disso, os Catálogos usam variáveis de folhas de estilo em cascata (CSS) definidas no registro de Temas de UX [sys_ux_theme] na instância.

    Procedimento

    1. Navegar até Todos > Temas > Construtor de temas.
    2. Crie um novo tema fornecendo cores primárias e secundárias.
      Nota:
      Você pode corresponder suas cores às cores do plano de fundo do cabeçalho do bate-papo e do plano de fundo do bate-papo no registro de identidade visual de sua escolha. Para obter mais informações sobre como criar temas, consulte Create a theme with Theme Builder.
    3. Salve seu tema.
    4. Adicione seu tema à configuração do portal.
      1. Navegar até Todos > Estrutura do Now Experience > Temas.
      2. Selecione o registro do tema que você deseja importar.
      3. No ícone Ações adicionais (), selecione Copiar sys_id.
      4. Navegar até Todos > Portal de serviços > Bate-papo do agente.
      5. Selecione a configuração do portal à qual você deseja adicionar o tema de identidade visual e adicione a seguinte linha ao script do servidor, incluindo o sys_id da Etapa 4c.
      Por exemplo, se o seu sys_id for 0be48eb1eba0011090fa99602a522843, você adiciona:
      macroponent_theme: '0be48eb1eba0011090fa99602a522843'
    5. Adicione um tema de variante à configuração do portal, se desejar.
      1. Repita as etapas 4a e 4b.
      2. Na guia Composicional: tema do app, abra o Style desejado cujo Type é Variant.
      3. Repita as etapas 4c e 4d.
      4. Selecione a configuração do portal em que você adicionou o tema de identidade visual e adicione a seguinte linha ao script do servidor, incluindo o sys_id da Etapa 5c.
      Por exemplo, se o sys_id do tema da variante for 1df59fc2fcb1122101gb00713b633954, você adicionará:
      macroponent_theme_variant: '1df59fc2fcb1122101gb00713b633954'
    6. Selecione Atualizar para salvar a configuração.
    7. Navegue até o portal em que a configuração é usada.
      Por exemplo, se você atualizou a configuração do portal ESC Chat, navegue até Central de serviços ao funcionário.
    8. Execute o tópico do catálogo no bate-papo do portal para carregar sua configuração e revelar todos os elementos que precisam de identidade visual.Virtual Agent janela de bate-papo, com links e botões realçados a serem atualizados.
    9. Navegar até Todos > Estrutura do Now Experience > Temas > Construtor de temas.
    10. No menu suspenso, selecione Gerentee selecione o tema criado.
    11. Na guia Estilos de componente, selecione Editar. Atualize os códigos hexadecimais de cores em Construtor de temas para corresponder às cores da identidade visual.
    12. Selecione um dos elementos que precisam de identidade visual encontrados na Etapa 8.
    13. Na barra lateral da paleta, defina a cor do código hexadecimal do elemento para corresponder à cor do registro de identidade visual.
    14. Repita as etapas 12 e 13 até atualizar todos os elementos.Virtual Agent janela de bate-papo, com links realçados e botões atualizados após a mudança dos códigos de cores hexadecimais em Construtor de temas.

    Resultado

    Os temas de cores do catálogo agora correspondem à sua identidade visual.