Hosted Widget Branding and Customization

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

• O logotipo da sua empresa
• O ícone da sua empresa
• O nome da sua empresa
• Link para a sua política de privacidade
• Texto para destacar os benefícios do seu produto
• Texto quando um usuário opta por fechar o widget
• Ocultar mensagens na tela de conexão da conta
• Adicionar uma cor de sobreposição personalizada
• Habilitar modo escuro
• Adicionar cores personalizadas ao widget

Você pode adicionar o ícone da sua empresa ao widget para que ele fique mais alinhado com a sua marca.
Quando você adiciona o ícone da sua empresa, ele aparece nas seguintes telas:

• início inicial do widget

Certifique-se de que seu ícone tenha dimensões quadradas, esteja no formato SVG, tenha um fundo transparente e não contenha espaços em branco ao redor. Se o seu ícone não seguir essas especificações, o widget da Belvo exibirá o seguinte ícone:

Instruções
Para adicionar um ícone personalizado da empresa, basta adicionar a URL para sua imagem SVG na chave company_icon.

{
  "widget": {
    "branding": {
      "company_icon": "https://mysite.com/icon.svg",
        }
     }
}

Você pode adicionar o logotipo da sua empresa ao widget para que ele fique mais alinhado com a sua marca. Quando você adiciona o logotipo da sua empresa, ele aparece nas seguintes telas:

• enquanto a conta está sendo vinculada
• uma vez que uma conta é vinculada com sucesso
• quando um usuário opta por cancelar o processo de vinculação

Certifique-se de que seu logotipo esteja no formato SVG, tenha um fundo transparente e não contenha espaços em branco ao redor. Para melhor visibilidade e escalabilidade, sugerimos que você use um logotipo horizontal (veja o exemplo no canto superior esquerdo da imagem abaixo).

Instruções
Para adicionar um logotipo personalizado da empresa, basta adicionar a URL da sua imagem SVG à chave company_logo.

{
  "widget": {
    "branding": {
      "company_logo": "https://mysite.com/logo.svg",
        }
     }
}

Você pode adicionar o nome da sua empresa para ser exibido quando o widget iniciar pela primeira vez. Por padrão, será exibido apenas "Conecte sua conta". Quando você adiciona o nome da sua empresa, a mensagem seguirá o formato "[company_name] usa Belvo para conectar sua conta".

Instruções

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

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

Você pode adicionar um link para sua política de privacidade (ou termos e condições) na tela inicial do widget que, ao ser clicado, redirecionará seus usuários para a página web vinculada. Isso ajuda seus usuários a entenderem melhor qual é o seu caso de uso em relação aos dados que você está solicitando. Por padrão, o widget incluirá a URL para a política de privacidade da Belvo (<https://belvo.com/terms-service/>).

Instruções
Para adicionar um link para sua política de privacidade na tela inicial de conexão, basta adicionar a URL da sua política à chave company_terms_url.

{
  "widget": {
    "branding": {
      "company_terms_url": "https://belvo.com/terms-service/",
        }
     }
}

Ao usar uma URL personalizada para os termos e condições (via company_terms_url), você pode acompanhar qual versão dos seus T&C o usuário aceitou durante o fluxo do widget. Isso é útil para fins de conformidade e auditoria, especialmente quando seus termos são atualizados ao longo do tempo.

Instruções
Para acompanhar a versão dos T&C, adicione o identificador de versão à chave company_terms_version. Este parâmetro é obrigatório quando você fornece um company_terms_url personalizado (não usando o padrão da Belvo).

{
  "widget": {
    "branding": {
      "company_terms_url": "https://yourcompany.com/terms",
      "company_terms_version": "2024-03-15",
        }
     }
}

Você pode adicionar uma mensagem personalizada na tela inicial do widget para fornecer informações adicionais aos seus usuários sobre por que eles precisam conectar sua conta usando Belvo. Isso ajuda a aumentar a conversão e a confiança do usuário final para vincular sua conta.

Instruções
Para adicionar texto personalizado na tela inicial de conexão:

1. Adicione o título da caixa expansível à chave company_benefit_header.
   📝 O comprimento máximo (incluindo espaços) para o título é de 30 caracteres.

2. Adicione o conteúdo para a caixa expansível à chave company_benefit_content.
   📝 O comprimento máximo (incluindo espaços) para o conteúdo é de 140 caracteres.

{
  "widget": {
    "branding": {
      "company_benefit_header": "Aprovações mais rápidas",
      "company_benefit_content": "Usar Belvo reduz o tempo de aprovação do seu empréstimo em até 15 dias.",
        }
     }
}

Você pode adicionar uma mensagem personalizada para ser exibida quando um usuário final optar por cancelar a conexão de sua conta. A mensagem aparece abaixo de um aviso padrão "Tem certeza de que deseja cancelar?". Você pode destacar os benefícios de continuar a vincular a conta usando o widget em comparação com métodos tradicionais.

Instruções

Para adicionar uma mensagem de saída personalizada, adicione o conteúdo a ser exibido na chave opportunity_loss.

📝 Sua mensagem pode ter no máximo 120 caracteres, incluindo espaços.

{
  "widget": {
    "branding": {
      ...
      "opportunity_loss": "Pode levar até 20 dias para avaliar sua solicitação usando métodos tradicionais.",
      ...
        }
     }
}

Você pode optar por ocultar a mensagem "+1m usuários conectaram suas contas com segurança usando Belvo" que aparece quando o usuário chega à tela de conexão de conta no widget. Por padrão, essa mensagem é visível no widget (true).

** Instruções**

Para ocultar a mensagem na tela de conexão de conta, basta definir o parâmetro social_proof como false.

{
  "widget": {
    "branding": {
      "social_proof": false,
        }
     }
}

Você pode adicionar uma cor de sobreposição personalizada para quando o widget carregar em sua aplicação desktop. Recomendamos escolher uma cor neutra relacionada à sua marca para manter o contexto ambiental. Por padrão, essa sobreposição é definida como cinza.

Instruções

Para definir a cor da sobreposição, basta adicionar o código HEX completo (## seguido de seis caracteres) à chave overlay_background_color.

{
  "widget": {
    "branding": {
      "overlay_background_color": "#F0F2F4",
        }
     }
}

O Connect Widget suporta um tema de modo escuro. Para ativá-lo, você precisa passar o valor DARK no parâmetro color_scheme dentro do objeto widget.

{
  "widget": {
    "color_scheme": "DARK",
  }
}

Quando o modo escuro está ativado, você também pode personalizar as cores. Para aplicar um estilo personalizado especificamente para o modo escuro, basta adicionar -dark a qualquer uma das variáveis CSS listadas nas seções abaixo. Por exemplo, para alterar a cor primária no modo escuro, você usaria "--color-primary-base-dark".

Você pode personalizar o widget adicionando as cores da sua marca a várias partes do widget:

• A cor primária para botões, caixas de seleção e a barra de progresso
• A cor dos ícones de navegação e do texto

As possíveis modificações estão listadas na tabela abaixo:

Instruções

Para definir as cores da sua marca:

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 das cores podem estar nos formatos HEX, RGB ou RGBA.

{
  "widget": {
    "color_scheme": "LIGHT",
    "branding": {}, // Sua marca personalizada
    "theme": [
      {
        "css_key": "--color-primary-base",
        "value": "#0663F9"
      },
      {
        "css_key": "--nav-bar-title-color",
        "value": "#161A1D"
      },
      {
        "css_key": "--nav-bar-icon-color",
        "value": "#161A1D"
      }
    ],
  }
}

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:

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 (veja o exemplo de código abaixo). Os valores de cor podem estar nos formatos HEX, RGB ou RGBA.

{
  "widget": {
    "color_scheme": "LIGHT",
    "branding": {}, // Sua marca personalizada
    "theme": [
      {
        "css_key": "--nav-bar-title-color",
        "value": "#161a1d"
      },
      {
        "css_key": "--nav-bar-title-align",
        "value": "center"
      },
      {
        "css_key": "--nav-bar-icon-color",
        "value": "#161a1d"
      },
      {
        "css_key": "--nav-bar-left-icon",
        "value": "arrow_left"
      },
      {
        "css_key": "--nav-bar-right-icon",
        "value": "help_outlined"
      },
      {
        "css_key": "--nav-bar-icon-size",
        "value": "24px"
      },
      {
        "css_key": "--nav-bar-background-color",
        "value": "#ffffff"
      },
      {
        "css_key": "--nav-bar-box-shadow",
        "value": "none"
      },
      {
        "css_key": "--nav-bar-border-color",
        "value": "#f0f2f4"
      }, // 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:

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 no formato HEX, RGB ou RGBA.

{
  "widget": {
    "color_scheme": "LIGHT",
    "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": "#09EE354"
      }, // 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:

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 nos formatos HEX, RGB ou RGBA.

{
  "widget": {
    "color_scheme": "LIGHT",
    "branding": {}, // Sua marca personalizada
    "theme": [
      {
        "css_key": "--banner-border-radius",
        "value": "4px"
      },
      {
        "css_key": "--banner-background-color",
        "value": "#ffffff"
      },
      {
        "css_key": "--banner-background-color-error",
        "value": "#FFE5E9"
      },
      {
        "css_key": "--banner-background-color-info",
        "value": "#E9F1FF"
      },
      {
        "css_key": "--banner-background-color-success",
        "value": "#DEFADE"
      },
      {
        "css_key": "--banner-background-color-warning",
        "value": "#FFEDC7"
      },
      {
        "css_key": "--banner-border-color",
        "value": "#e2e6e9"
      },
      {
        "css_key": "--banner-border-left-width",
        "value": "0px"
      },
      {
        "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 opções de tema adicionais aqui
    ]
  }
}

Você pode personalizar os elementos da tela de credenciais para melhor corresponder à sua marca:

Para modificar a tela de credenciais 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.

{
  "widget": {
    "branding": {}, // Sua personalização de marca
    "theme": [
      {
        "css_key": "--credentials-screen-institution-logo-border-radius",
        "value": "100px"
      },
      {
        "css_key": "--credentials-screen-header-logo-reversed",
        "value": "true"
      },
      {
        "css_key": "--credentials-screen-help-link-align",
        "value": "start"
      },
      {
        "css_key": "--credentials-screen-help-link-font-size",
        "value": "12px"
      },
      {
        "css_key": "--credentials-screen-counter-border-radius",
        "value": "20px"
      },
      {
        "css_key": "--credentials-screen-counter-font-size",
        "value": "12px"
      }
    ]
  }
}

Você pode personalizar os campos de entrada do widget para atender às necessidades da sua marca:

As possíveis modificações estão listadas na tabela abaixo:

Para modificar os campos de entrada 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.

{
  "widget": {
    "color_scheme": "LIGHT",
    "branding": {}, // Sua marca personalizada
    "theme": [
      {
        "css_key": "--input-text-border-radius",
        "value": "2px"
      },
      {
        "css_key": "--input-text-border-color",
        "value": "#161a1d"
      },
      {
        "css_key": "--input-text-outline-border-color",
        "value": "#c4cdd4"
      },
      {
        "css_key": "--input-text-placeholder-color",
        "value": "#c4cdd4"
      },
      {
        "css_key": "--input-text-label-color",
        "value": "#414d58"
      },
      {
        "css_key": "--input-text-label-color-error",
        "value": "#f90e06"
      },
      {
        "css_key": "--input-text-label-variation",
        "value": "outlined"
      },
      {
        "css_key": "--input-text-icon-color",
        "value": "#000000"
      }, // Adicione opções de tema adicionais aqui
    ]
  }
}

Você pode personalizar as abas do widget para atender às necessidades da sua marca:

As possíveis modificações estão listadas na tabela abaixo:

Para modificar as abas 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.

{
  "widget": {
    "color_scheme": "LIGHT",
    "branding": {}, // Sua marca personalizada
    "theme": [
      {
        "css_key": "--tab-text-color",
        "value": "#0663f9"
      },
      {
        "css_key": "--tab-border-color",
        "value": "#0663f9"
      }, // Adicione opções de tema adicionais aqui
    ]
  }
}