# Branding e Personalização (Biometrix Pix Widget) Com o Biometric Pix Widget da Belvo, você pode opcionalmente adicionar o seguinte branding e personalização: ## Defina as instituições a serem exibidas Você pode especificar quais instituições são inicialmente exibidas no widget fornecendo uma lista de até 5 instituições preferenciais. Os usuários ainda poderão buscar outras instituições além das que você especificar. **Instruções** Para definir as instituições a serem exibidas: 1. Adicione o parâmetro `top_tier_institutions` ao objeto `widget`. 2. Forneça um array de 1 a 5 identificadores de instituições da lista disponível. 3. As instituições serão exibidas na ordem em que você as fornecer no array. ```json Parâmetro de Instituições de Alto Nível { "use_cases": ["ENROLLMENT", "PAYMENT_INTENT"], "widget": { // Outros parâmetros... "top_tier_institutions": [ "nubank_retail", "picpay_retail", "mercadopago_retail", "itau_retail"] } } ``` Se você não passar este parâmetro, o widget exibirá todas as instituições disponíveis. Para uma lista de instituições disponíveis, consulte o parâmetro top_tier_institutions em nossa Referência de API. ## Definir esquema de cores Uma vez que você define o `color_scheme`, pode adicionar personalizações adicionais a elementos individuais do widget (veja as seções detalhadas abaixo). Você não precisa incluir todas as possíveis `css_keys`. Você pode apenas definir as chaves (e valores) que deseja modificar. Você pode definir se o widget deve exibir em um esquema de cores claro ou escuro. Por padrão, o widget começará no esquema de cores `LIGHT`. O esquema de cores do widget **não** muda automaticamente de acordo com as configurações do sistema do usuário. **Instruções** Para definir qual tema você deseja, basta adicionar `LIGHT` ou `DARK` à chave `color_scheme` no objeto `branding`: ```json { "widget": { "branding": { ... "color_scheme": "LIGHT", ... } } } ``` ## Animação personalizada Você pode adicionar uma animação personalizada para exibir quando o widget iniciar. O tipo de arquivo é uma animação Lottie de 144px x 144px (você pode encontrar mais detalhes na especificação aqui ou ver alguns exemplos aqui). Você precisará primeiro compartilhar o arquivo com a Belvo para que possamos garantir que ele carregue corretamente no widget. Para modificar as cores primárias do widget: 1. Adicione o `theme` array ao objeto `widget`. 2. Para cada item que você deseja modificar, adicione um objeto que tenha as chaves `css_key` e `value` (veja o exemplo de código abaixo). ```json { "widget": { "branding": {}, // Sua personalização de marca "theme": [ { "css_key": "--animation-file-name", "value": "name_of_file_shared_with_belvo" }, // Adicione opções de tema adicionais aqui ] } } ``` ## Modificar as cores primárias Você pode personalizar o esquema de cores modificando as cores primárias ativas e de fundo | Variável CSS | Padrão (claro) | Padrão (escuro) | Descrição | | --- | --- | --- | --- | | `--color-primary-base` | `#0663f9` | `#0254D9` | Define a cor ativa para a barra de navegação 'stepper'. | | `--color-surface-base` | `#FFFFFF` | `1C1C1E` | Define a cor inativa para a barra de navegação 'stepper'. | Para modificar as cores primárias do widget: 1. Adicione o `theme` array ao objeto `widget`. 2. Para cada item que você deseja modificar, adicione um objeto que tenha as chaves `css_key` e `value` (consulte o exemplo de código abaixo). Os valores de cor podem estar no formato HEX, RGB ou RGBA. ```json { "widget": { "branding": {}, // Sua marca personalizada "theme": [ { "css_key": "--color-primary-base", "value": "#0663f9" }, { "css_key": "--color-surface-base", "value": "#FFFFFF" }, // Adicione opções de tema adicionais aqui ] } } ``` ## Modificar a barra de navegação do widget Você pode personalizar a barra de navegação do widget modificando as cores para atender às necessidades da sua marca: As possíveis modificações estão listadas na tabela abaixo: | Variável CSS | Padrão (claro) | Padrão (escuro) | Descrição | | --- | --- | --- | --- | | `--nav-bar-stepper-color-active` | `#0663F9` | `#E1ECFE` | Define a cor ativa para o 'stepper' da barra de navegação. | | `--nav-bar-stepper-color` | `#6C8193` | `#FFFFFF` com 90% de opacidade | Define a cor inativa para o 'stepper' da barra de navegação. | | `--nav-bar-icon-color` | `#161A1D` | `#FFFFFF` com 90% de opacidade | Define a cor dos ícones da barra de navegação. | | `--nav-bar-background-color` | `#FFFFFF` | `#1C1C1E` | Define a cor de fundo da barra de navegação. | | `--nav-bar-border-color` | `#E2E6E9` | `#525866` | Especifica a cor da borda da barra de navegação. | Para modificar a barra de navegação do widget: 1. Adicione o `array` `theme` ao objeto `widget`. 2. Para cada item que você deseja modificar, adicione um objeto que tenha as chaves `css_key` e `value` (consulte o exemplo de código abaixo). Os valores de cor podem estar no formato HEX, RGB ou RGBA. ```json { "widget": { "branding": {}, // Sua marca personalizada "theme": [ { "css_key": "--nav-bar-stepper-color-active", "value": "#0663F9" }, { "css_key": "--nav-bar-stepper-color", "value": "#6C8193" }, { "css_key": "--nav-bar-icon-color", "value": "#161A1D" }, { "css_key": "--nav-bar-background-color", "value": "#FFFFFF" }, { "css_key": "--nav-bar-border-color", "value": "#E2E6E9" }, // Adicione opções de tema adicionais aqui ] } } ``` ## Modificar os botões do widget Você pode personalizar os botões do widget modificando as cores e os raios das bordas para atender às necessidades da sua marca: As possíveis modificações estão listadas na tabela abaixo: | Variável CSS | Padrão (claro) | Padrão (escuro) | Descrição | | --- | --- | --- | --- | | `--button-font-color` | `#ffffff` | `#ffffff` | Define a cor da fonte para os botões. | | `--button-font-color-disabled` | `#ffffff` | `#ffffff` com 90% de opacidade | Define a cor da fonte para botões desativados. | | `--button-border-radius` | `2px` | `2px` | Especifica o raio da borda dos botões. | | `--button-background-color-disabled` | `#009EE3` | `#2B303B` | Define a cor de fundo para botões desativados. | | `--button-opacity-disabled` | `0.2` | `0.2` | Especifica a opacidade para botões desativados. | | `--button-border-color-disabled` | `#CDE0FE` | `#525866` | Define a cor da borda para botões desativados. | Para fazer modificações nos botões do widget: 1. Adicione o `theme` array ao objeto `widget`. 2. Para cada item que você deseja modificar, adicione um objeto que tenha as chaves `css_key` e `value` (veja o exemplo de código abaixo). Os valores de cor podem estar nos formatos HEX, RGB ou RGBA. ```json { "widget": { "branding": {}, // Sua marca personalizada "theme": [ { "css_key": "--button-font-color", "value": "#ffffff" }, { "css_key": "--button-font-color-disabled", "value": "#ffffff" }, { "css_key": "--button-border-radius", "value": "2px" }, { "css_key": "--button-background-color-disabled", "value": "#009EE3" }, { "css_key": "--button-opacity-disabled", "value": "0.2" }, { "css_key": "--button-border-color-disabled", "value": "#CDE0FE" }, ] } } ``` ## Modificar os campos do seletor do widget Você pode personalizar os campos do seletor do widget para atender às necessidades da sua marca: As possíveis modificações estão listadas na tabela abaixo: | Variável CSS | Padrão (claro) | Padrão (escuro) | Descrição | | --- | --- | --- | --- | | `--border-radius` | `2px` | `2px` | O raio do seletor do botão. | | `--container-border-color-active` | `#0663F9` | `#0254D9` | A cor da seleção ativa. | | `--container-border-color-default` | `#E2E6E9` | `#525866` | A cor da seleção inativa. | | `--container-border-shadow-color` | `#9CC1FC` | `#9CC1FC` | A sombra para a seleção ativa. | Para modificar os campos do seletor do widget: 1. Adicione o `theme` array ao objeto `widget`. 2. Para cada item que você deseja modificar, adicione um objeto que tenha as chaves `css_key` e `value` (veja o exemplo de código abaixo). Os valores de cor podem estar no formato HEX, RGB ou RGBA. ```json { "widget": { "branding": {}, // Sua marca personalizada "theme": [ { "css_key": "--border-radius", "value": "2px" }, { "css_key": "--container-border-color-active", "value": "#0663F9" }, { "css_key": "--container-border-color-default", "value": "#E2E6E9" }, { "css_key": "--container-border-shadow-color", "value": "#9CC1FC" } }, // Adicione opções de tema adicionais aqui ] } } ``` ## Modificar os banners do widget (chamadas) Você pode personalizar os banners do widget para atender às necessidades da sua marca: As possíveis modificações estão listadas na tabela abaixo: | Variável CSS | Padrão (claro) | Padrão (escuro) | Descrição | | --- | --- | --- | --- | | `--banner-border-radius` | `4px` | `4px` | Especifica o raio da borda dos banners. | | `--banner-background-color` | `#ffffff` | `#22252B` | Define a cor de fundo dos banners. | | `--banner-border-color` | `#e2e6e9` | `#e2e6e9` | Especifica a cor da borda dos banners. | | `--banner-border-color-left-error` | `#f90e06` | `#f90e06` | Cor da borda esquerda para banners de erro. | | `--banner-border-color-left-success` | `#59c837` | `#59c837` | Cor da borda esquerda para banners de sucesso. | | `--banner-border-color-left-info` | `#0663F9` | `#0663F9` | Cor da borda esquerda para banners de informação. | | `--banner-border-color-left-warning` | `#f9c806` | `#f9c806` | Cor da borda esquerda para banners de aviso. | | `--banner-icon-color-error` | `#f90e06` | `#f90e06` | Cor do ícone para banners de erro. | | `--banner-icon-color-success` | `#59c837` | `#59c837` | Cor do ícone para banners de sucesso. | | `--banner-icon-color-info` | `#0663F9` | `#0663F9` | Cor do ícone para banners de informação. | | `--banner-icon-color-warning` | `#f9c806` | `#f9c806` | Cor do ícone para banners de aviso. | | `--banner-title-color` | `#161a1d` | `#FFFFFF` com 95% de opacidade | Define a cor dos títulos dos banners. | | `--banner-body-color` | `#414d58` | `#FFFFFF` com 90% de opacidade | Especifica a cor do texto do corpo dos banners. | | `--banner-title-font-weight` | `600` | `600` | Define o peso da fonte dos títulos dos banners. | | `--banner-body-font-weight` | `600` | `600` | Especifica o peso da fonte do texto do corpo dos banners. | | `--banner-box-shadow` | `0 2px 4px 0 rgba(0, 0, 0, 0.05)` | `#0 2px 4px 0 rgb(82,88,102)` | Adiciona um efeito de sombra aos banners. | Para fazer modificações nos banners do widget: 1. Adicione o array `theme` ao objeto `widget`. 2. Para cada item que você deseja modificar, adicione um objeto que tenha as chaves `css_key` e `value` (veja o exemplo de código abaixo). Os valores de cor podem estar no formato HEX, RGB ou RGBA. ```json { "widget": { "branding": {}, // Sua marca personalizada "theme": [ { "css_key": "--banner-border-radius", "value": "4px" }, { "css_key": "--banner-background-color", "value": "#ffffff" }, { "css_key": "--banner-border-color", "value": "#e2e6e9" }, { "css_key": "--banner-border-color-left-error", "value": "#f90e06" }, { "css_key": "--banner-border-color-left-success", "value": "#59c837" }, { "css_key": "--banner-border-color-left-info", "value": "#0663F9" }, { "css_key": "--banner-border-color-left-warning", "value": "#f9c806" }, { "css_key": "--banner-icon-color-error", "value": "#f90e06" }, { "css_key": "--banner-icon-color-success", "value": "#59c837" }, { "css_key": "--banner-icon-color-info", "value": "#0663F9" }, { "css_key": "--banner-icon-color-warning", "value": "#f9c806" }, { "css_key": "--banner-title-color", "value": "#161a1d" }, { "css_key": "--banner-body-color", "value": "#414d58" }, { "css_key": "--banner-title-font-weight", "value": "600" }, { "css_key": "--banner-body-font-weight", "value": "600" }, { "css_key": "--banner-box-shadow", "value": "0 2px 4px 0 rgba(0, 0, 0, 0.05)" }, ] } } ``` ## Adicione o nome da sua empresa Você pode adicionar o nome da sua empresa para ser exibido quando o widget iniciar. **Instruções** Para adicionar o nome da sua empresa, basta adicioná-lo à chave `company_name` no objeto `branding`. ```json { "widget": { "branding": { ... "company_name": "ACME", ... } } } ```