Hosted Widget Branding and Customization

Com o Hosted Widget da Belvo, você pode personalizar e marcar o widget de duas maneiras: através do seu pedido de token de acesso e através da ferramenta de painel Custom Widget.

As configurações abaixo são enviadas como JSON na mesma chamada de backend que sua solicitação para gerar um access_token.

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 escalonamento, 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 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 suas contas usando o 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 o 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 prompt 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,
        }
     }
}

As variáveis CSS são configuradas visualmente através da ferramenta Custom Widget no seu painel do Belvo.

Instruções

No seu painel do Belvo, vá para Developer Tools > Custom Widget, e então na seção Widget Configuration defina:

1. Locale: o idioma de exibição do widget: en (Inglês), es (Espanhol) ou pt-BR (Português).
2. Integration Type: Open Finance para o widget do Open Finance Brasil (OFDA), ou Credentials para o widget multi-regional.
3. Color scheme: Claro ou Escuro. Variáveis CSS específicas para o modo escuro usam o sufixo -dark — por exemplo, --color-primary-base-dark define a cor primária especificamente para o modo escuro.
4. Country Codes: quais países as instituições aparecem na pré-visualização do widget.
5. Institution Types: quais tipos de instituições aparecem na pré-visualização: Fiscal (conexões com autoridades fiscais), Retail (banco pessoal), Business (banco corporativo) ou Employment (sistemas de empregador/folha de pagamento).

Depois de clicar em Load Widget, você poderá acessar o painel de CSS Variables. Pesquise ou use os filtros de categoria (Fonte, Navbar, Botão, Banner, Texto de Entrada e mais) para encontrar uma variável, e então insira um valor. A Widget Preview à direita atualiza ao vivo enquanto você digita, para que você possa verificar cada alteração antes de finalizá-la.

Clique em Export Configuration. Isso cria automaticamente um ticket de suporte no Zendesk com seu JSON de personalização anexado, que a equipe do Belvo usa para aplicá-lo à sua conta. Use Import para carregar uma configuração exportada anteriormente de volta na ferramenta se você quiser continuar editando-a.

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.