Recursos Gráficos Bold para tu página web

Bold pone a tu disposición los siguientes recursos gráficos para que puedas incluirlos en tu sitio web de manera sencilla y eficaz.

Estos recursos están diseñados para ayudarte a crear una experiencia de usuario fluida, que refleje la calidad y confianza de los métodos de pago que ofreces.

Los métodos de pago presentados son los disponibles para ventas en linea no presenciales.

Tipos de recursos gráficos

Tenemos dos formas en las que puedes mostrar los métodos de pagos ofrecidos con Bold:

Imagen estática: Se mostrará nuestro logo junto a los métodos de pagos disponibles sin ningún tipo de animación.

Horizontal:

Vertical:
Carrusel: Se mostrará nuestro logo y una animación tipo carrusel de los métodos de pago disponibles.

Horizontal:

Vertical:

Ejemplos de uso

Siempre actualizado

Los recursos gráficos de Bold son dinámicos y se actualizarán automáticamente cuando se añadan métodos de pago.

Dimensiones máximas

El ancho máximo para los recursos gráficos será:

Layout horizontal: 320px (para ambos tipos de elemento)

320px

Imagen estática y carrusel con layout horizontal

Layout vertical:

200px para el carrusel

200px

Carrusel con layout vertical

230px para la imagen estática

230px

Carrusel con layout vertical

Esto quiere decir que nunca se excederá el ancho, aunque haya más o menos métodos de pago mostrados por Bold.

Si lo requieres, puedes restringir el ancho envolviéndolos en un contenedor con el ancho deseado. De esta forma puedes asegurarte de que el layout de tu sitio web no se verá afectado si desde Bold actualizamos la lista de métodos de pago quitando o añadiendo logos.

Ten en cuenta que en vertical no hay unas dimensiones máximas en el caso de las imágenes estáticas y estas podrían crecer verticalmente eventualmente en algún momento a medida que se vayan añadiendo métodos de pago.

Ejemplos

¡Listo para llevar! 🚀

Copia directamente el código de estos ejemplos y pégalos en tu HTML para ubicar los recursos gráficos en tu sitio web.

Imagen estática - Horizontal - Light

<script src="https://bold.co/library/ui-kit.js"></script>

Imagen estática - Vertical - Light

<script src="https://bold.co/library/ui-kit.js?layout=vertical"></script>

Imagen estática - Horizontal - Dark

<script src="https://bold.co/library/ui-kit.js?theme=dark"></script>

Carrusel - Horizontal - Light

<script src="https://bold.co/library/ui-kit.js&type=slider"></script>

Carrusel - Vertical - Light

<script src="https://bold.co/library/ui-kit.js?layout=vertical&type=slider"></script>

Detalles técnicos

Insertar script en el lugar del HTML donde se quiera mostrar el elemento gráfico.

<head>
 ...
</head>
 
<body>
 ...
 <script src="https://bold.co/library/ui-kit.js"></script>
 <!-- El elemento gráfico de Bold aparecerá aquí -->
 ...
</body>

Rendimiento

El script se ejecuta una vez ha cargado la página por completo (evento load (opens in a new tab)), por lo que no es bloqueante.

Modo de uso alternativo

Ubicar el script en el head del documento e indicar en el parámetro “target” el ID del elemento donde se mostrará el recurso gráfico de Bold. Aquí un ejemplo:

<head>
...
<script src="https://bold.co/library/ui-kit.js?target=bold-pagos"></script>
</head>
 
<body>
...
<div id="bold-pagos"><!-- El elemento gráfico de Bold aparecerá aquí --></div>
...
</body>

Parámetros de configuración

Las diferentes variaciones se obtienen mediante parámetros de configuración. Estos parámetros se incluyen como query params (opens in a new tab) en la URL del script.

Los parámetros disponibles son:

Comunes

target

En el caso de añadir el script al head, se puede indicar el ID del elemento en el que se quiere inyectar la imagen o el carrusel de Bold (se inyectará al final del nodo).

Valor de ejemplo Descripción
mi-contenedor ID del elemento DOM en el cual se quiere ubicar el elemento gráfico de Bold.
type

Determina si se trata de una imagen estática o un carrusel.

Valores posibles Descripción
static (por defecto) Imagen estática con el logo de Bold y los métodos de pago disponibles
slider Logo de Bold y métodos de pago disponibles mostrándose en un carrusel.
theme

Determina el color del logo de Bold y de los logos de los métodos de pago disponibles. La versión a color es idónea para fondos claros, mientras que la versión light es más apropiada para fondos con un color oscuro.

Valores posibles Descripción
light (por defecto) Logo de Bold a color y métodos de pago en su versión estándar.
dark Logo de Bold blanco y métodos de pago en su versión dark.
layout

Define si la disposición de los elementos debe ser horizontal o vertical.

Valores posibles Descripción
horizontal (por defecto) Logo de Bold a la izquierda y métodos de pago a la derecha.
vertical Logo de Bold sobre los métodos de pago disponibles.

Valor de ejemplo	Descripción
mi-contenedor	ID del elemento DOM en el cual se quiere ubicar el elemento gráfico de Bold.

Valores posibles	Descripción
static (por defecto)	Imagen estática con el logo de Bold y los métodos de pago disponibles
slider	Logo de Bold y métodos de pago disponibles mostrándose en un carrusel.

Valores posibles	Descripción
light (por defecto)	Logo de Bold a color y métodos de pago en su versión estándar.
dark	Logo de Bold blanco y métodos de pago en su versión dark.

Valores posibles	Descripción
horizontal (por defecto)	Logo de Bold a la izquierda y métodos de pago a la derecha.
vertical	Logo de Bold sobre los métodos de pago disponibles.

Solo carrusel

speed

Modifica la velocidad del carrusel para que los logos de los métodos de pago se muevan más o menos rápido.

Valores posibles Descripción
fast (por defecto) Velocidad rápida (1x)
medium Velocidad media (0.5x)
slow Velocidad lenta (0.25x)

Valores posibles	Descripción
fast (por defecto)	Velocidad rápida (1x)
medium	Velocidad media (0.5x)
slow	Velocidad lenta (0.25x)

Soporte integraciones