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

your company logo
your company icon
your company name
link to your privacy policy
text to highlight the benefits of your product
text when a user chooses to close the widget
hide messaging in account connect screen
add a custom overlay color

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

Full branding example

🚧
Add branding when generating access_token
To add branding to your widget, it must be done in the same server-side call as your request to generate an access_token. For a full example of how this looks like, see the code samples below.

curl -X POST \
  https://sandbox.belvo.co/api/token/ \
  -H 'Content-Type: application/json' \
  -H 'Host: sandbox.belvo.com' \
  -d '{
    "id": "SECRET_ID",
    "password": "SECRET_PASSWORD",
    "scopes": "read_institutions,write_links,read_links",
    "widget": {
        "branding": {
            "company_icon": "https://mysite.com/icon.svg",
            "company_logo": "https://mysite.com/logo.svg",
            "company_name": "ACME",
            "social_proof": true,
            "company_terms_url": "https://belvo.com/terms-service/",
            "company_benefit_header": "Faster approvals",
            "company_benefit_content": "Using Belvo cuts down on your loan approval time by up to 15 days.",
            "opportunity_loss": "It can take up to 20 days to evaluate your request using traditional methods.",
            "overlay_background_color": "#F0F2F4"
        }
     }
  }'

var belvo = require('belvo').default;

var client = new belvo(
  'my-secret-key-id',
  'my-secret-key-password',
  'https://sandbox.belvo.com'
);

// Widget branding
const widget = {
    branding: {
      company_icon: "https://mysite.com/icon.svg",
      company_logo: "https://mysite.com/logo.svg",
      company_name: "ACME",
      social_proof: true,
      company_terms_url: "https://belvo.com/terms-service/",
      company_benefit_header: "Faster approvals",
      company_benefit_content: "Using Belvo cuts down on your loan approval time by up to 15 days.",
      opportunity_loss: "It can take up to 20 days to evaluate your request using traditional methods.",
      social_proof: false,
      overlay_background_color: "#F0F2F4"
      
        
    }
}

const options = {scopes: 'read_institutions,write_links,read_links', widget: widget};
client.connect()
  .then(function () {
        client.widgetToken.create(options)
      .then((response) => {
      res.json(response);
        })
      .catch((error) => {
      res.status(500).send({
        message: error.message
      });
    });
});

from belvo.client import Client

client = Client("my-secret-key-id", "my-secret-key-password", "https://sandbox.belvo.com")

# Widget branding
widget = {
    "branding": {
      "company_icon": "https://mysite.com/icon.svg",
      "company_logo": "https://mysite.com/logo.svg",
      "company_name": "ACME",
      "social_proof": true,
      "company_terms_url": "https://belvo.com/terms-service/",
      "company_benefit_header": "Faster approvals",
      "company_benefit_content": "Using Belvo cuts down on your loan approval time by up to 15 days.",
      "opportunity_loss": "It can take up to 20 days to evaluate your request using traditional methods.",
      "social_proof": false,
      "overlay_background_color": "#F0F2F4"
      
    }
}

scopes = "read_institutions,write_links,read_links"

token = client.WidgetToken.create(widget=widget, scopes=scopes)

require 'belvo'
client = Belvo::Client.new(
  "my-secret-key-id",
  "my-secret-key-password",
  "https://sandbox.belvo.com"
)

# Widget branding
widget = {
    branding: {
      company_icon: "https://mysite.com/icon.svg",
      company_logo: "https://mysite.com/logo.svg",
      company_name: "ACME",
      social_proof: true,
      company_terms_url: "https://belvo.com/terms-service/",
      company_benefit_header: "Faster approvals",
      company_benefit_content: "Using Belvo cuts down on your loan approval time by up to 15 days.",
      opportunity_loss: "It can take up to 20 days to evaluate your request using traditional methods.",
      social_proof: false,
      overlay_background_color: "#F0F2F4"
    }
}

options = { scopes: 'read_institutions,write_links,read_links', widget: widget };

client.widget_token.create(options: options)

For more detailed information on each customization, see the relevant section below.

Add a company icon

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

initial start of the widget

Make sure that your icon has square dimensions, in SVG format, has a transparent background, and contains no surrounding whitespace. If your icon does not follow these specifications, the Belvo widget will display the following icon:

Standard square icon displayed if your icon is not SVG or square.

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

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

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

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

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

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:

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.

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

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

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

widget = {
    branding: { 
      ...
      company_logo: "https://mysite.com/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] uses Belvo to connect your account".

📘
Please note, only the company name is customizable in the introductory sentence.

Instructions

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

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

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

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

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

Add a link to your privacy policy

You can add a link to your privacy policy (or terms and conditions) on the initial screen of the widget that, when clicked, will redirect your users to the linked webpage. This helps your users better understand what your use case is regarding the data you are requesting. By default the widget will include the URL to Belvo's privacy policy (<https://belvo.com/terms-service/>).

Instructions
To add a link to your privacy policy in the initial connect screen, just add the URL to your policy to the company_terms_url key.

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

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

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

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

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 about 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:

Add the title of the expand box to the company_benefit_header key.
📝 The maximum length (including spaces) for the title is 30 characters.
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.

{
  "widget": {
    "branding": {
      ...
      "company_benefit_header": "Faster approvals",
      "company_benefit_content": "Using Belvo cuts down on your loan approval time by up to 15 days.",
      ...
        }
     }
}

widget = {
    "branding": {
      ...
      company_benefit_header: "Faster approvals",
      company_benefit_content: "Using Belvo cuts down on your loan approval time by up to 15 days.",
      ...
    }
}

widget = {
    "branding": {
      ...
      "company_benefit_header": "Faster approvals",
      "company_benefit_content": "Using Belvo cuts down on your loan approval time by up to 15 days.",
      ...
    }
}

widget = {
    branding: { 
      ...
      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.

{
  "widget": {
    "branding": {
      ...
      "opportunity_loss": "It can take up to 20 days to evaluate your request using traditional methods.",
      ...
        }
     }
}

widget = {
    "branding": {
      ...
      // Are you sure you want to cancel?
      opportunity_loss: 'It can take up to 20 days to evaluate your request using traditional methods.',
      ...
    }
}

widget = {
    "branding": {
      ...
      "opportunity_loss": "It can take up to 20 days to evaluate your request using traditional methods.",
      ...
    }
}

widget = {
    branding: { 
      ...
      opportunity_loss: "It can take up to 20 days to evaluate your request using traditional methods.",
      ...
    }
}

Hide messaging in account connect screen

You can choose to hide the "+1m users have securely connected their accounts using Belvo" message that appears when your user reaches the account connection screen in the widget. By default, this message is visible in the widget (true).

Instructions

To hide the message in the account connection screen, just set the social_proof parameter to false.

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

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

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

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

Add a custom overlay color

You can add a custom overlay color for when the widget loads in your desktop application. We recommend choosing a neutral color related to your brand to keep environmental context. By default, this overlay is set to grey.

Widget with custom overlay color

📘
Overlay opacity
No matter what color you upload, Belvo will automatically set the opacity to 90%. This is due to the following UX best practices:

With lower opacities (less than 70%), the user can experience difficulties focusing on the flow as they will have “visual noise” in the background.

Block colors (opacity set at 100%) may cause a drastic change, resulting in a disjointed or unnatural experience.

Instructions

To set the overlay color, just add the full HEX code (# followed by six characters) to the overlay_background_color key.

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

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

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

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

Branding and customization

Full branding example

🚧
Add branding when generating access_token

Add a company icon

Add a company logo

Add your company name

📘

Add a link to your privacy policy

Add text to the connect screen

🚧

Add an exit message

Hide messaging in account connect screen

Add a custom overlay color

📘
Overlay opacity

Full branding example

🚧Add branding when generating access_token

Add a company icon

Add a company logo

Add your company name

📘

Add a link to your privacy policy

Add text to the connect screen

🚧

Add an exit message

Hide messaging in account connect screen

Add a custom overlay color

📘Overlay opacity

🚧
Add branding when generating access_token

📘
Overlay opacity