> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fintoc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Guías de UX

Nos tomamos muy en serio la experiencia del cliente y la conversión de pagos. Para asegurar tu éxito, nuestros expertos en UX/UI han preparado esta guía para tu organización.

### Buenas prácticas

✅ Sí:

* Usa solo las imágenes proporcionadas por Fintoc, embebiendo la URL provista.
* Usa el mismo estilo de imagen en todo tu sitio.
* El texto del botón solo debe incluir terminología aprobada por Fintoc.
* Asegúrate de que el tamaño de los botones de Fintoc sea igual o mayor al de otros botones.
* Asegúrate de elegir un color de fondo que contraste con el color del botón o la imagen.

❌ No:

* No modifiques la fuente, color, radio del botón ni el padding dentro del logo de ninguna manera.
* No utilices una versión en png, jpg ni no-URL de las imágenes proporcionadas.
* No hagas el botón de Fintoc más pequeño que otros botones.
* No uses un color de fondo similar al color del logo o de la imagen.
* No agregues efectos de sombra al logo.
* No agregues efectos de hover.
* No utilices ninguna otra terminología que no sea la recomendada.

### Por qué usar URLs en tu sitio web o app

Te recomendamos usar los enlaces URL directamente en tu aplicación o sitio web para obtener la versión más actualizada de las imágenes. De esta forma no tienes que actualizar manualmente cada vez que haya un cambio.

```html theme={null}
src="https://assets.fintoc.com/?img_name=button_cl_light_trailing"
```

### Dentro del flujo de suscripción

**Terminología aceptada:** *Suscríbete* o *Suscribir* o *Pago Automático* o *Pago recurrente*.

En el proceso en el que tus usuarios conectan su cuenta a Fintoc, usa la terminología recomendada para el botón que abrirá nuestro widget. También puede que quieras mostrar nuestro logo completo como una forma de demostrar que este proceso está impulsado por Fintoc.

|                                                                   | Descripción     | HTML                                                         |
| :---------------------------------------------------------------- | :-------------- | :----------------------------------------------------------- |
| ![Dark logotype](https://assets.fintoc.com/?img_name=logo_dark)   | Logotipo oscuro | `<img src="https://assets.fintoc.com/?img_name=logo_dark">`  |
| ![Light logotype](https://assets.fintoc.com/?img_name=logo_light) | Logotipo claro  | `<img src="https://assets.fintoc.com/?img_name=logo_light">` |

### Otros usos del logo

Es posible que quieras mostrar nuestro logo para indicar con quién trabajas. Queremos ayudarte a hacerlo de la mejor manera.

Te proporcionamos dos URLs para que las incrustes en tu sitio web o aplicación con este propósito. Por favor, deja el espacio seguro recomendado alrededor de nuestro logo.

|                                                                         | Descripción      | HTML                                                              |
| :---------------------------------------------------------------------- | :--------------- | :---------------------------------------------------------------- |
| ![Dark imagotype](https://assets.fintoc.com/?img_name=imagotype_dark)   | Imagotipo oscuro | `<img src="https://assets.fintoc.com/?img_name=imagotype_dark">`  |
| ![Light imagotype](https://assets.fintoc.com/?img_name=imagotype_light) | Imagotipo claro  | `<img src="https://assets.fintoc.com/?img_name=imagotype_light">` |

<Frame>
  <img src="https://mintcdn.com/fintoc-49b8bee8/YQmOnq8Zegydl6oL/images/39bda7a2253e37ddeba1189faa3bc22acc88c67141469e877f893326df35be2e-Clearance_explanation.png?fit=max&auto=format&n=YQmOnq8Zegydl6oL&q=85&s=efd4f1df88b667f8450870eba89c46f8" width="3192" height="2160" data-path="images/39bda7a2253e37ddeba1189faa3bc22acc88c67141469e877f893326df35be2e-Clearance_explanation.png" />
</Frame>

Si tienes alguna pregunta sobre cómo implementar estas recomendaciones, contacta a nuestro equipo.