Customização da Jornada

A Customização da Jornada permite que você aplique a identidade visual da sua marca na jornada de verificação de identidade da Unico — sem abrir chamado, sem depender do time de suporte e com o resultado visível na hora.

Você define logo, cor de fundo, cores e formato dos botões e cor do conteúdo. Ao publicar, a configuração passa a valer imediatamente para as próximas jornadas iniciadas na sua unidade.

informação

Para quem é: clientes que usam a Jornada Web (CbU) nos modelos de integração iFrame, Redirect ou SDK.

O que muda para o usuário final: a tela que ele vê ao fazer a verificação de identidade passa a ter a cara da sua marca.

Onde fica: Portal IDCloud → menu lateral Configurações → aba Customização.

Antes de começar

Permissão de acesso

Seu usuário precisa ter acesso à área de Configurações do Portal IDCloud. Se o ícone de engrenagem não aparece no menu lateral, fale com o administrador da sua conta para liberar o acesso.

Como a configuração é aplicada

Escopo	A customização vale por unidade (branch) e por modelo de integração. iFrame e Redirect/SDK têm configurações independentes: publicar em um não afeta o outro.
Quando passa a valer	Imediatamente após publicar, para as jornadas iniciadas a partir daquele momento. Jornadas em andamento seguem com o visual anterior.
Se você não customizar	A jornada carrega o tema padrão da Unico.
Versão da jornada	A pré-visualização é baseada no design da versão 3.0 da Jornada Web. Em outras versões o preview pode não refletir fielmente o resultado — nesse caso, fale com a Unico sobre a atualização de versão.

O que ter em mão

• Logo em PNG, preferencialmente com fundo transparente, com até 60 px de altura e no máximo 100 KB.
• Os códigos hexadecimais das cores da sua marca (ex.: #1B3FA0).

O que é configurável na sua integração

Além do modelo de integração, o que aparece na tela depende da versão do CbU da sua integração. Esta é a causa mais comum de "o campo não aparece para mim":

Recurso	1.0 iFrame	2.0 iFrame	3.0 iFrame	1.0 redirect	2.0 redirect	3.0 redirect
Logo	✅	não existe	não existe	✅	✅	✅
Cor de fundo	—	—	—	—	—	✅
Cor de fundo do botão	✅	✅	✅	✅	✅	✅
Cor do texto do botão	✅	✅	✅	✅	✅	✅
Raio de borda do botão	✅	✅	✅	✅	✅	✅
Cor do conteúdo	✅	✅	✅	✅	✅	✅

Em resumo: cor de fundo só é configurável no CbU 3.0 em redirect, e no iFrame o logo existe apenas no CbU 1.0. Cores e formato de botão funcionam em todas as combinações.

informação

Se você não sabe em qual versão está, consulte seu contato de Onboarding ou o suporte da Unico.

Passo a passo

Passo 1 — Abra a aba Customização

No Portal IDCloud, clique no ícone de engrenagem (Configurações) no menu lateral. A tela abre já na aba Customização.

A tela de Configurações tem três abas — Customização, Webhook e QR Code. Este guia cobre a primeira.

Tela de Configurações com a aba Customização selecionada.

Passo 2 — Escolha o modelo de integração

Na coluna à esquerda, selecione iFrame ou Redirect ou SDK. Os campos do formulário mudam conforme o modelo.

Você vai reconhecer a tela em três áreas: o seletor de modelo à esquerda, o formulário no centro e a pré-visualização à direita, que reage a cada alteração antes de você publicar.

Se você usa os dois modelos, precisa configurar os dois. São configurações independentes — ajuste e publique um, depois repita para o outro.

Seletor iFrame / Redirect ou SDK, formulário e preview.

Passo 3 — Envie o logo

aviso

Disponível em Redirect ou SDK. No iFrame, apenas no CbU 1.0.

Clique em Adicione um logo e selecione o arquivo. Requisitos: PNG, altura máxima 60 px, peso máximo 100 KB.

Use PNG com fundo transparente. Assim o logo funciona sobre qualquer cor de fundo — um PNG com fundo branco vira um retângulo visível quando o fundo é colorido. Prefira também a versão horizontal do logo: o espaço disponível é largo e baixo.

Campo "Adicione um logo" com os requisitos de formato, altura e peso.

Passo 4 — Defina as cores

São quatro campos de cor, agrupados no formulário em Fundo, Botões e Conteúdo:

Campo	Onde aparece na jornada	Padrão	Disponibilidade
Cor de fundo	Fundo da tela da jornada	#F2F2F7	Apenas CbU 3.0 em redirect
Botões → Cor fundo	Preenchimento do botão de ação (ex.: "Tirar Selfie")	—	Todas as versões
Botões → Cor texto	Texto dentro do botão	—	Todas as versões
Cor do conteúdo	Títulos e descrições (ex.: "Verificação de identidade")	#000000	Todas as versões

Em qualquer um deles você pode digitar o hexadecimal (ex.: #1B3FA0) ou clicar no quadrado de cor à esquerda do campo para abrir o seletor visual. Nos campos de fundo e de conteúdo, enquanto você não preencher nada, a jornada usa o valor padrão exibido como sugestão no próprio campo.

A cor de fundo é aplicada como gradiente, não como cor sólida. O tom que você informa é o topo do gradiente, e a jornada escurece progressivamente até a base da tela. Cores muito escuras resultam numa base quase preta — escolha um tom médio a claro se quiser um resultado uniforme.

Use a cor primária da sua marca no fundo do botão. É o elemento que o usuário precisa encontrar primeiro; se ele não salta aos olhos, a jornada perde conversão.

Escolha as quatro cores como um conjunto, não uma a uma. Elas se afetam: fundo escuro com cor de conteúdo preta deixa a jornada ilegível, e botão claro sobre o card branco simplesmente desaparece. Defina as quatro e só então avalie o resultado no preview (Passo 6).

Campos Cor de fundo, Cor fundo e Cor texto dos botões, e Cor do conteúdo, com o resultado no preview.

Passo 5 — Configure os botões

Três campos controlam o botão de ação da jornada (ex.: "Tirar Selfie"):

Campo	O que faz
Cor fundo	Cor de preenchimento do botão
Cor texto	Cor do texto dentro do botão
Raio borda	Arredondamento dos cantos, em pixels

Referência para o Raio borda:

• 0 → botão retangular, cantos retos
• 8 a 16 → cantos levemente arredondados
• 24 ou mais → formato pílula (totalmente curvo)

Valores acima da metade da altura do botão não mudam mais o resultado: o formato pílula é o limite.

Use a cor primária da sua marca no fundo do botão. É o elemento que o usuário precisa encontrar primeiro — se ele não salta aos olhos, a jornada perde conversão. E mantenha o raio de borda coerente com o resto do seu produto, para a jornada parecer continuação do seu app e não um site de terceiros.

Cor fundo, Cor texto e Raio borda, com o botão refletido no preview.

Passo 6 — Confira no preview, em celular e desktop

O preview à direita atualiza a cada alteração. Use o seletor Celular / Desktop no topo para conferir os dois formatos.

Se você digitar um valor de cor inválido — o nome de uma cor, um hexadecimal incompleto — o campo fica com borda vermelha e o valor não é aplicado ao preview. Corrija antes de seguir.

Valide sempre no modo Celular. A maioria dos usuários finais faz a verificação pelo telefone; é o formato que mais importa. E confira os três contrastes: texto do botão contra o fundo do botão, botão contra o card da jornada, e cor do conteúdo contra a cor de fundo. É comum configurar um botão branco sobre o card branco e ele simplesmente desaparecer — o preview existe para revelar isso antes de publicar.

Seletor Celular / Desktop e campo de cor com valor inválido destacado.

Passo 7 — Publique

O botão Publicar fica habilitado assim que existe alguma alteração pendente.

• Publicar salva a configuração e aplica à jornada.
• Cancelar descarta tudo o que você editou e devolve os campos ao último estado publicado.
• Para voltar ao padrão da Unico, limpe os campos de cor (deixando a sugestão reaparecer), remova o logo e publique.

Não existe histórico de versões. Se publicar uma configuração ruim, o caminho é ajustar os valores e publicar de novo — não há como restaurar a versão anterior com um clique. Por isso vale conferir o preview no passo anterior. Enquanto você ainda não publicou, o Cancelar resolve.

Passo 8 — Cadastre os domínios autorizados

aviso

Disponível apenas no modelo iFrame.

No iFrame a jornada roda embutida dentro de uma página sua. Por segurança, somente os domínios cadastrados aqui podem carregá-la.

1. Clique em Configurar domínios, no canto superior direito.

   

2. O painel lateral lista os Domínios cadastrados, cada um com as ações de editar (lápis) e excluir (lixeira).

   

3. Para adicionar, clique em Criar domínio, informe o domínio e clique em Salvar.

   

Informe o domínio com o protocolo (https://seusite.com.br).

Esta lista é uma configuração de segurança, e é salva separadamente. Ela é aplicada no Salvar do painel, não no Publicar da tela principal. Cadastre também os domínios de teste e homologação que você usa durante a integração, e remova os que saíram de uso — é a lista de quem pode embutir a sua jornada.

Perguntas frequentes

As alterações valem para jornadas que já estão rodando? Não. A configuração publicada vale para as jornadas iniciadas depois da publicação.

Por que não vejo os campos de Logo e Fundo? Duas causas possíveis. A primeira: você está com iFrame selecionado — no iFrame a jornada é embutida na sua própria página, que já fornece fundo e identidade. A segunda: a versão do seu CbU não expõe o campo. A cor de fundo existe só no CbU 3.0 em redirect, e o logo no iFrame só no CbU 1.0. Confira a tabela em "Antes de começar".

Meu logo foi recusado no upload. Por quê? Verifique os três requisitos: formato PNG, altura de até 60 px e peso de até 100 KB.

O fundo ficou muito escuro na parte de baixo da tela. Esperado: o fundo é renderizado como gradiente que escurece de cima para baixo. Escolha um tom mais claro como cor base.

O preview não parece igual à minha jornada real. O preview é baseado no design da versão 3.0 da Jornada Web. Se sua integração está em outra versão, o resultado pode diferir — acione a Unico para avaliar a atualização.

Publiquei uma configuração ruim. Como volto? Reabra a tela, ajuste os valores (ou limpe-os para voltar ao padrão) e publique novamente. Não há histórico de versões. Se você ainda não publicou, basta clicar em Cancelar.

Quem alterou a customização da minha conta? A tela não exibe esse histórico. Para saber qual usuário fez a última alteração e quando, acione o suporte da Unico.

Resumo rápido

Portal IDCloud
 └─ Configurações (engrenagem no menu lateral)
     └─ Aba Customização
         ├─ iFrame ............... Botões (cor fundo, cor texto, raio borda)
         │                         Conteúdo (cor do conteúdo)
         │                         + Configurar domínios
         └─ Redirect ou SDK ...... Logo (PNG, 60 px, 100 KB)
                                   Fundo (cor de fundo, aplicada em gradiente)
                                   Botões (cor fundo, cor texto, raio borda)
                                   Conteúdo (cor do conteúdo)

Preview em tempo real · Celular / Desktop · Cancelar · Publicar