Branding and customization

Add some personal flair to your widget by customizing the logo and adding some custom text to engage your users πŸš€.

πŸ‘

Currently in BETA

We are progressively rolling our branding and customization feature across our customers. If you're interested in adding branding to your widget, just contact us at [email protected].

With Belvo's Connect Widget, you can optionally add the following branding and customization:

  • your company logo
  • your company name
  • a custom color
  • text to highlight the benefits of your product
  • text when a user chooses to close the widget

Screens in the widget where you'll see your custom branding

Add a company logo

You can add your company logo to the widget to make it more aligned with your brand. When you add your company logo, it appears on the following screens:

  • initial start of the widget
  • while the account is being linked
  • once an account is successfully linked
  • when a user chooses to cancel the linking process

Make sure that your logo is in SVG format, has a transparent background, and contains no surrounding whitespace. For the best visibility and scaling, we suggest that you use a horizontal logo (see the top-left example in the image below).

Please ensure that your logo contains no whitespace (left-hand example).

Instructions
To add a custom company logo, just add the URL to your SVG image to the company_logo key.

...

belvoSDK.createWidget(access_token, {
  ...
    company_logo: 'https://mysite/logo.svg',
  ...
...

Add your company name

You can add your company name to be displayed when the widget first starts. By default, it'll just display "Link your account". When you add your company name, the message will follow the format "[company_name] wants to link your account".

Instructions

To add your company name, just add it to the company_name key.

...

belvoSDK.createWidget(access_token, {
  ...
    company_name: 'ACME'
  ...
...

Add a color

You can add a custom color, reflecting your brand, to the widget. This color is used as a background for your logo in the initial screen. By default, the color is set to #f0f2f4.

Instructions
To add a custom company color, just add the HEX code to the company_color key.

...

belvoSDK.createWidget(access_token, {
  ...
    company_color: '#50d3b2'
  ...
...

Add text to the connect screen

You can add a custom message on the initial screen of the widget to provide additional information to your users why they need to connect their account using Belvo. This helps to drive conversion and increase end-user trust to link their account.

Instructions
To add custom text in the initial connect screen:

  1. Add the title of the expand box to the company_benefit_header key.
    πŸ“ The maximum length (including spaces) for the title is 30 characters.
  2. Add the content for the expand box to the company_benefit_content key.
    πŸ“ The maximum length (including spaces) for the content is 140 characters.

🚧

You must provide content for both company_benefit_header and company_benefit_content. If you don't provide content for both, nothing will appear.

...

belvoSDK.createWidget(access_token, {
  ...
    company_benefit_header: 'Faster approvals',
    company_benefit_content: "Using Belvo cuts down on your loan approval time by up to 15 days.",
  ...
  
...

Add an exit message

You can add a custom message to be displayed when an end user chooses to cancel connecting their account. The message appears below a standard "Are you sure you want to cancel?" prompt. You can highlight the benefits of continuing to link their account using the widget in comparison to traditional methods.

Instructions

To add a custom exit message, add the content to display to the opportunity_loss key. Your message can have a maximum of 120 characters, including spaces.

...

belvoSDK.createWidget(access_token, {
  ...
  //Are your sure you want to cancel?
    opportunity_loss: 'It can take up to 20 days to evaluate your request using traditional methods.',
  ...
...

Updated 18 days ago


Branding and customization


Add some personal flair to your widget by customizing the logo and adding some custom text to engage your users πŸš€.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.