--- title: Customização da Jornada description: Configure a identidade visual da jornada — logo, cores, fundo e formato dos botões — direto no Portal IDCloud, com pré-visualização em tempo real. canonical: https://developer.unico.io/pt-BR/dual-api/product-guide/portal-idcloud/settings/journey-customization locale: pt-BR generated_by: markdown-export --- 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. :::info **Para quem é:** clientes que usam a Web Journey 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 Web Journey. 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 da Web Journey** 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 na Web Journey v3.0 em redirect**, e no iFrame o logo existe apenas na Web Journey v1.0. Cores e formato de botão funcionam em todas as combinações. :::info 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 o ícone de engrenagem destacado no menu lateral](/img/product-guide/journey-customization/pt-BR/01-settings-tab.png) *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, destacado](/img/product-guide/journey-customization/pt-BR/02-integration-model.png) *Seletor iFrame / Redirect ou SDK, formulário e preview.* ### Passo 3 — Envie o logo :::warning Disponível em **Redirect ou SDK**. No iFrame, apenas na Web Journey v1.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](/img/product-guide/journey-customization/pt-BR/03-customization-form.png) *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 **Web Journey v3.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, cores dos botões e Cor do conteúdo](/img/product-guide/journey-customization/pt-BR/04-colors.png) *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. ![Campo Raio borda e o botão refletido no preview](/img/product-guide/journey-customization/pt-BR/05-button-border-radius.png) *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 no painel de preview](/img/product-guide/journey-customization/pt-BR/06-live-preview.png) *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 :::warning 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. ![Botão Configurar domínios, destacado](/img/product-guide/journey-customization/pt-BR/07-configure-domains-button.png) 2. O painel lateral lista os **Domínios cadastrados**, cada um com as ações de **editar** (lápis) e **excluir** (lixeira). ![Painel Configurar domínios com a lista de domínios cadastrados](/img/product-guide/journey-customization/pt-BR/08-domains-list.png) 3. Para adicionar, clique em **Criar domínio**, informe o domínio e clique em **Salvar**. ![Formulário de criação de um novo domínio de iFrame](/img/product-guide/journey-customization/pt-BR/09-create-domain.png) 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 da sua Web Journey** não expõe o campo. A cor de fundo existe só na Web Journey v3.0 em redirect, e o logo no iFrame só na Web Journey v1.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 Web Journey. 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 ```text 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 ```