UX Guidelines

To ensure an optimal user experience when integrating our widget, we recommend following these guidelines:

Widget

• Avoid placing the button in areas that require excessive scrolling
• Keep the button near other payment options to facilitate comparison
• Ensure the widget adapts properly to different screen sizes
• Test the integration on mobile and desktop devices
• Verify that elements are touchable on mobile devices (min-width: 44px)

Messages and Text

• Clearly communicate that this is an installment payment option
• Avoid using technical or confusing terms
• Keep texts concise and direct
• Include installment amounts when possible

Design and Style

✅Do:

• Only use buttons and images provided by banca.me by embedding the URL provided.
• Use the same button or image style throughout your site.
• Make sure you choose a background color that contrasts with the button color.

❌ Do not:

• Do not make the banca.me button smaller than other buttons.
• Do not use a background color that is similar to the button color.
• Do not add shadow or hover effects to the button.

Button and image assets

To use our assets, you can directly use the URLs we provide, for example:

<button>
  <img alt="banca.me Logo" src="https://assets.banca.me/bancame_logo_dark.svg"
</button>

Load from URL

Please use the asset directly from our URL in order to get the latest version. Plus you will be taking advantage of our CDN (Content Delivery Network) thus ensuring faster load times.

Logo

We recommend you use the full logotype but isotype is provided as well.

Logo	Description	URL
	Dark version of the logo, ideal for light backgrounds	https://assets.banca.me/bancame_logo_dark.svg
	Light version of the logo, ideal for dark backgrounds	https://assets.banca.me/bancame_logo_light.svg
	Compact dark version, perfect for mobile or limited spaces	https://assets.banca.me/bancame_logo_dark_sm.svg

Button

Please use this button along side other payment options.

Logo	Description	URL
	Dark version of then button, ideal for light backgrounds	https://assets.banca.me/button_completo_dark.svg
	Light version of the button, ideal for dark backgrounds	https://assets.banca.me/button_completo_white.svg