Personalización SDK

1. Personalización del Loader

El SDK emite un evento llamado loader-sdk-milio para indicar el inicio o el fin de una operación asíncrona. Puedes escuchar este evento para mostrar u ocultar tu propio loader.

JavaScript

window.document.addEventListener('loader-sdk-milio', (event) => {
	if (event.detail === true) yourModalLoader.showModal();
  else yourModalLoader.close();
});

2. Personalización de Colores

Puedes personalizar los colores del SDK sobrescribiendo las variables CSS definidas en :root.

Variable	Descripción
--sdk-modal-text-color	Color del texto del modal
--sdk-button-background-color	Color de fondo del botón principal
--sdk-button-text-color	Color del texto del botón principal
--sdk-button-disabled-background-color	Color de fondo del botón deshabilitado
--sdk-button-disabled-text-color	Color del texto del botón deshabilitado
--sdk-error-text-color	Color del texto de error

Ejemplo de Personalización de Colores

HTML

<style>
    :root {
      --sdk-modal-text-color: #003366;
      --sdk-button-background-color: #0066cc;
      --sdk-button-text-color: #ffffff;
      --sdk-button-disabled-background-color: #99c2ff;
      --sdk-button-disabled-text-color: #cccccc;
      --sdk-error-text-color: #ff4d4d;
    }
</style>

3. Personalización de Fuentes

Puedes personalizar las fuentes del SDK sobrescribiendo las variables de fuente.

Variable	Descripción
--sdk-font-family-regular	Fuente principal para textos
--sdk-font-family-regular-fallback	Respaldo para fuente principal
--sdk-font-family-bold	Fuente principal en negrita
--sdk-font-family-bold-fallback	Respaldo para fuente en negrita
--sdk-font-family-button	Fuente para los botones
--sdk-font-family-button-fallback	Respaldo para fuente de botones

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playwrite+MX+Guides&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

 <style>
    :root {
      --sdk-font-family-regular: 'Ubuntu';
      --sdk-font-family-regular-fallback: serif;

      --sdk-font-family-bold: 'Ubuntu';
      --sdk-font-family-bold-fallback: serif;

      --sdk-font-family-button: 'Ubuntu';
      --sdk-font-family-button-fallback:serif;
    }
</style>