Branding e Personalização (Biometrix Pix Widget)

Com o Biometric Pix Widget da Belvo, você pode opcionalmente adicionar o seguinte branding e personalização:

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 adicionar o tema que você deseja, basta adicionar LIGHT ou DARK à chave color_scheme no objeto branding:

{
  "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). Primeiro, você precisará compartilhar o arquivo com a Belvo para que possamos garantir que ele carregue corretamente no widget.

Para modificar as cores primárias do widget:

Adicione o theme array ao objeto widget.
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).

{
  "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:

Adicione o theme array ao objeto widget.
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.

{
  "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
    ]
  }
}

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:

Adicione o theme array ao objeto widget.
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.

{
  "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
    ]
  }
}

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 desabilitados.
`--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 desabilitados.
`--button-opacity-disabled`	`0.2`	`0.2`	Especifica a opacidade para botões desabilitados.
`--button-border-color-disabled`	`#CDE0FE`	`#525866`	Define a cor da borda para botões desabilitados.

Para fazer modificações nos botões do widget:

Adicione o theme array ao objeto widget.
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.

{
  "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"
      },
    ]
  }
}

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:

Adicione o theme array ao objeto widget.
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.

{
  "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
    ]
  }
}

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:

Adicione o array theme ao objeto widget.
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.

{
  "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 pela primeira vez.

Instruções

Para adicionar o nome da sua empresa, basta adicioná-lo à chave company_name no objeto branding.

{
  "widget": {
    "branding": {
      ...
      "company_name": "ACME",
      ...
        }
     }
}

Branding e Personalização (Biometrix Pix Widget)

Definir esquema de cores

Animação personalizada

Modificar as cores primárias

Modificar a barra de navegação do widget

Modificar os botões do widget

Modificar os campos do seletor do widget

Modificar os banners do widget (callouts)

Adicione o nome da sua empresa

Quão útil foi esta página?