Login / Personalización de widgets
  Volver a Documentos

Login

Personalización de widgets

Cómo funciona

Un widget de inicio de sesión es una interfaz gráfica para registrar y autorizar usuarios en su aplicación. El widget puede contener campos para introducir credenciales de usuario y botones para iniciar sesión mediante redes sociales. El widget también puede incluir textos explicativos y botones adicionales; por ejemplo, para restablecer la contraseña o solicitar un código de confirmación.

Xsolla proporciona plantillas de widgets estándar. Su apariencia y contenido están determinados por el método de inicio de sesión elegido para su proyecto. A continuación se muestra la vista estándar del widget de inicio de sesión clásico.

El producto Login le permite personalizar el widget para hacerlo reconocible y coherente con la interfaz de su aplicación o sitio web. Para ello, puede:

  • añadir su logotipo
  • cambiar la combinación de colores
  • cargar una imagen y utilizarla como fondo para el área alrededor del widget
  • cambiar la forma del contorno de los botones y campos de entrada
  • cambiar el orden de los botones de redes sociales en el widget (este orden viene determinado por la elección del país de localización)
  • establecer el idioma de visualización del widget.

Puede personalizar la apariencia y el contenido del widget:

Personalización de widgets en Cuenta del editor

Le recomendamos que edite el widget en su Cuenta del editor porque así podrá:

  • ver en tiempo real los cambios introducidos
  • probar el funcionamiento de los botones del widget directamente en el editor o en la ventana Preview de la página Widget customization

Nota
Los cambios realizados en el widget a través de Cuenta del editor se aplican allí donde se utilice.
Aviso
La personalización del widget solo está disponible tras firmar el Acuerdo de licencia del producto de Xsolla. Para firmar el acuerdo, vaya a la sección Agreements en su Cuenta del editor.

Para personalizar el widget:

  1. Abra su proyecto en Cuenta del editor y vaya a la sección de Login.
  2. Haga clic en Configure en el panel de un proyecto de Login.
  3. Vaya al bloque Customization y seleccione la sección Widget customization.

  1. Seleccione el idioma y el país de la localización del widget (opcional).
  2. Personalice el estilo del widget utilizando el editor.
  3. Tras realizar todos los ajustes, cambie al modo HTML usando el botón situado encima del área de vista previa del widget.
  1. Haga clic en Copy code para copiar el código de inicialización del widget generado. Utilice este código para integrar el widget en su aplicación o sitio web.

Cómo utilizar el editor de widgets

  1. Para abrir el editor de widgets, haga clic en Customize en la página Widget customization.
  2. En la ventana del editor, realice los cambios necesarios en el estilo del widget:Todos los cambios se muestran en el área de vista previa del widget en tiempo real.
Nota
Todos los cambios de parámetros se guardan automáticamente, por lo que puede detener y reanudar la edición del widget en cualquier momento.
  1. Para comprobar cómo se mostrará el widget en diferentes idiomas, cambie el idioma en la lista desplegable situada encima del área de vista previa del widget.
Nota
Cambiar el idioma en el editor no afecta al idioma en el que se muestra el widget a los usuarios.
  1. Cuando haya realizado todos los cambios en el editor de widgets, haga clic en Publish.
Aviso
Una vez publicado, el widget cambiará en todas las aplicaciones y sitios web a los que esté conectado.
Nota
Tras la publicación, es posible que la página Widget customization muestre la versión anterior del widget cargada por el navegador desde la caché. En este caso, actualice la página pulsando Control+F5.
  1. Abra el editor de widgets.
  2. En la barra lateral del editor, haga clic en Login widget.
  3. En el panel Login widget editor que se abre, seleccione el conmutador Logo.

  1. Haga clic en el botón de carga situado debajo del conmutador.
  2. En la ventana de búsqueda de archivos, seleccione el archivo de imagen del logotipo y haga clic en Open.

    El panel Assets se abrirá en la barra lateral del editor. El logotipo cargado aparecerá tanto en este panel como en el widget del área de vista previa.

  1. Si desea probar una versión diferente del logotipo, utilice el botón Upload del panel Assets.
  1. Para mostrar una versión diferente del logotipo en el widget, haga clic en su imagen en el panel Assets.
  2. Cuando haya terminado de personalizar su logotipo, cierre el panel Assets. Su última elección se guardará automáticamente.

Cómo cambiar la combinación de colores del widget

La combinación de colores está definida por tres colores base:
  • Texto - se utiliza para los textos explicativos, el contenido de los campos de entrada y los logotipos de las redes sociales en los botones de la parte inferior del widget.
  • Botón - se utiliza para los botones Login y Accept and create, para los contornos de los campos y botones resaltados, así como para los enlaces y el título de la pestaña activa del widget.
  • Tono de página - define el color de fondo del widget.
El color de la página en la que se muestra el widget en modo de pantalla completa es una combinación de los colores Botón y Tono de página. Este color se establece automáticamente.
Nota
Los botones de las redes sociales más utilizadas en la parte superior del widget siempre tienen el mismo color, independientemente de la combinación de colores seleccionada.
Para cambiar los colores base del widget:
  1. Abra el editor de widgets.
  2. En la barra lateral del editor, haga clic en Global themel y, a continuación, en el botón del color base que desee cambiar.
  3. Seleccione el nuevo color de una de las siguientes maneras:
    • Especifíquelo en la paleta de colores que se abre. Para cambiar los colores de la paleta, utilice el control deslizante situado debajo.
    • Utilice el botón situado debajo del control deslizante para cambiar el modo: HEX, RGB o HSL, e introduzca el código del color en el formato seleccionado.
    Los cambios en la paleta de colores se muestran en el área de vista previa del widget en tiempo real.
  1. Si es necesario, cambie otros colores base de la misma manera.

Cómo colocar una imagen de fondo alrededor del widget

  1. Abra el editor de widgets.
  2. En la barra lateral del editor, haga clic en Login widget.
  3. En el panel Login widget editor que se abre, en la sección Page background, haga clic en el icono + y, luego, en el botón de carga.

  1. En la ventana de búsqueda de archivos, seleccione el archivo de imagen de fondo y haga clic en Open.

    El panel Assets se abrirá en la barra lateral del editor. El logotipo cargado aparecerá tanto en este panel como en el widget del área de vista previa.
  1. Si desea probar una versión diferente de la imagen de fondo, utilice el botón Upload del panel Assets.
  2. Para mostrar una variación del fondo en el área de vista previa del widget, haga clic en su imagen en el panel Assets.
  3. Cuando haya terminado de personalizar su imagen de fondo, cierre el panel Assets. Su última elección se guardará automáticamente.

Cómo cambiar la forma de los botones

Todos los botones y campos de entrada del widget son rectangulares o cuadrados con esquinas redondeadas. El grado de redondez puede variar desde 0 (esquinas rectas) hasta el 100 %.

Para cambiar el grado de redondez:

  1. Abra el editor de widgets.
  2. Utilice el control deslizante de Roundness para seleccionar la forma de los botones del widget.

Cómo cambiar el orden de los botones de las redes sociales

Los botones de las redes sociales solo se pueden mostrar en el widget cuando estén conectados en la configuración del proyecto de Login. El orden de los botones viene determinado por el país de localización. El widget muestra los botones de las redes más populares en ese país, ordenados por popularidad de izquierda a derecha en orden descendente. En la línea superior del widget, se muestra a cada usuario la última red social mediante la cual accedió a la aplicación.

El parámetro País está configurado por defecto como Detectado automáticamente. Para cambiar este ajuste, utilice la lista desplegable Country de la página Widget customization.

Nota
Si desea especificar un orden diferente en el que se muestren los botones de redes sociales en el widget, contacto con su gestor del éxito del cliente o envíe un correo electrónico a csm@xsolla.com.

Cómo establecer el idioma de visualización del widget

Los widgets de inicio de sesión estándar de Xsolla están localizados en 20 idiomas. El idioma de localización de la interfaz se codifica en las dos primeras letras de la variable preferredLocale, que se puede transmitir al widget cuando se inicializa.

Ejemplo: Para visualizar el widget en inglés, establezca preferredLocale: “en_XX”.

Si no se establece el valor de la variable preferredLocale, el idioma se determina automáticamente mediante la dirección IP o el idioma del navegador.

Para establecer el idioma en el que se mostrará el widget a los usuarios:

  1. En la página Widget customization, seleccione un idioma en la lista desplegable Available languagess.

    En el código de inicialización del widget generado por Xsolla, la variable preferredLocale cambiará su valor según su elección.

  1. Para ver el código de inicialización, cambie al modo HTML (usando el botón situado encima del área de vista previa).
  2. Para comprobar cómo se muestra el widget en el idioma seleccionado, cambie al modo Preview.
Nota
También puede personalizar el idioma de visualización del widget cambiando el valor de la variable preferredLocale directamente en el código de inicialización del widget que está integrado en su aplicación o sitio web.

Personalización de widgets mediante archivos JSON

Si ya ha conectado el Xsolla Login Widget SDK, puede cambiar la apariencia y el contenido del widget sin utilizar su Cuenta del editor. En un editor de texto, puede realizar cambios en los siguientes archivos JSON:

  • socialsJSON, para establecer el orden en que se muestran los botones de redes sociales en el widget
  • themeJSON, para personalizar la apariencia del widget:
    • seleccione el esquema de colores del widget y del área circundante
    • establezca el grado de redondez de las esquinas para determinados tipos de elementos: botones, campos de entrada y el propio widget
    • utilice imágenes de fondo para distintos elementos: el título del widget, el propio widget, el área que lo rodea
    • si es necesario, oculte la pestaña de autorización o registro del widget, así como los botones de redes sociales.

Los ajustes de widget disponibles para su edición se describen en la sección Archivos JSON con ajustes de widget.

Nota
El idioma de visualización del widget no se establece en los archivos JSON, sino en el código de inicialización del widget utilizando el parámetro preferredLocale.

Personalización de widgets mediante carga de archivos con código CSS

  1. Cree un archivo CSS e incluya ajustes visuales para el bloque Login.

Ejemplo de código de personalización de fuentes:

Copy
Full screen
Small screen
@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Chakra-Petch-Regular'),
        url('https://some-url-to-fonts/Chakra-Petch-Regular.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Chakra-Petch-Bold'),
        url('https://some-url-to-fonts/Chakra-Petch-Bold.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Chakra-Petch-Thin'),
        url('https://some-url-to-fonts/Chakra-Petch-Thin.woff2 ') format('woff2');
}

body, .app-block {
    font-family: 'Chakra petch', sans-serif;
}

Ejemplo de código de personalización de estilos:

Copy
Full screen
Small screen
#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}

  1. Abra su proyecto en Cuenta del editor. En el menú lateral, haga clic en Login.
  2. Haga clic en Configure en el panel de un proyecto de Login.
  3. En la página de navegación, vaya al bloque Customization y seleccione la sección Widget customization.
  4. Cargue su archivo CSS en el bloqueAdditional customization.

  1. Haga clic en Save changes.

Personalización de textos del widget

El widget de inicio de sesión está localizado en 20 idiomas: inglés, árabe, búlgaro, chino, checo, alemán, español, francés, húngaro, italiano, japonés, coreano, polaco, portugués, rumano, ruso, tailandés, turco, taiwanés y vietnamita. Puede personalizar los textos del widget de inicio de sesión por sus medios. Abajo se muestra una lista de sus claves y valores por defecto en inglés:

Nota
Para cambiar otros textos del widget, contacte con su el gestor de su cuenta o envíe un correo electrónico a integration@xsolla.com.
Copy
Full screen
Small screen
{
  "form.auth.title": "",
  "form.auth.subtitle": "",
  "login.link": "Log in",
  "sign-up.link": "Sign up",
  "back-button.text": "Back to login",
  "form.field.email": "Email",
  "form.field.password": "Password",
  "form.field.new-password": "New password",
  "form.field.confirm-password.validation": "Passwords do not match",
  "form.field.confirm-password": "Confirm password",
  "form.field.required.validation": "Required",
  "form.login.login-button": "Log in",
  "form.reset-password.reset-button": "Recover password",
  "form.reset-password.link": "Forgot your password?",
  "form.reset-password.header": "Recover password",
  "form.reset-password.message": "You will receive an email with a link to reset your password.",
  "form.reset-password.success": "It’s okay, we all forget sometimes. Just change your password using the instructions we sent to {email}.",
  "form.reset-password.resend": "Resend message",
  "form.set-password.set-button": "Set new password",
  "form.set-password.success": "Password is successfully recovered.",
  "form.field.sign-up.consent" : "Please choose whether or not to give us your {link} to carry out profiling and use your data for marketing purposes.",
  "form.field.sign-up.username": "Username",
  "form.field.sign-up.email": "Email",
  "form.field.sign-up.password": "Password",
  "form.field.sign-up.bday": "Date of birth",
  "form.field.sign-up.birthday": "Date of birth",
  "form.field.sign-up.nickname": "Nickname",
  "form.field.sign-up.last_name": "Last name",
  "form.field.sign-up.first_name": "First name",
  "form.field.sign-up.family-name": "Last name",
  "form.field.sign-up.given-name": "First name",
  "form.field.sign-up.gender": "Gender",
  "form.field.sign-up.country": "Country",
  "form.field.sign-up.country-name": "Country",
  "form.field.sign-up.platform": "Platform",
  "form.field.sign-up.promo_email_agreement": "Subscribe to our newsletter",
  "form.field.sign-up.password_confirm": "Confirm password",
  "form.field.sign-up.complete-registration.description": "Please confirm your account following the instructions we sent to {email}.",
  "form.field.sign-up.confirm-registration.description": "We sent a confirmation code to {email}.{newLine}{timerMessage}",
  "form.field.sign-up.complete-registration.spam": "If you cannot find the confirmation email, please check the spam folder.",
  "form.field.sign-up.complete-registration.button": "Thanks, dismiss",
  "form.sign-up.sign-up-button": "Create account",
  "form.sign-up.sign-up-button.accept": "Accept and create",
  "form.sign-up.sign-up-button.decline": "Skip and create",
  "form.get-code.confirm-code.we-sent": "We sent a confirmation code to {whereTo}.",
  "form.get-code.confirm-code.can-resend-timer": "You can get a new code in {timer} {timer, plural, one {second} other {seconds}}.",
  "form.get-link.confirm-link.we-sent": "We’ve sent a confirmation email with a link to {whereTo}.",
  "form.get-link.confirm-link.can-resend-timer": "You can get a new confirmation email with a link in {timer} {timer, plural, one {second} other {seconds}}.",
  "form.ask.header": "Provide additional info",
  "form.ask.back-button.text": "Back to {link}",
  "form.ask.button.confirm": "continue",
  "form.ask.back-button.text.link": "login options",
  "form.ask.title.collect.email": "We will send an email with the confirmation code.",
  "form.ask.title.collect.phone": "We will send you a confirmation code.",
  "form.ask.title.collect.both-data.phone": "Confirm your phone and email address.",
  "form.ask.title.collect.both-data.email": "Confirm your email address and phone.",
  "form.ask.title.collect.confirm.phone": "Confirm your phone",
  "form.ask.title.collect.confirm.email": "Confirm your email address",
  "form.ask.title.collect.confirm.both-data": "Confirm your data",
  "form.ask.confirm-code.email": "Enter the code we sent to {whereTo} to confirm your email address.",
  "form.ask.confirm-code.phone": "Enter a confirmation code we sent to {whereTo}.",
  "form.ask.confirm-code.email.link": "Click the link in the email we sent to {whereTo} to confirm your email address.",
  "form.ask.confirm-code.email.link.resend": "Resend confirmation email",
  "back-button.previous-step": "Back to {link}",
  "back-button.previous-step.link": "previous step",
  "form.ask.skip-button": "Skip",
  "form.ask.dismiss-button": "dismiss",
  "form.ask.ask-button": "Submit",
  "form.ask.email.field-title": "Enter your email to secure your account.",
  "form.ask.phone.field-title": "Enter your phone to secure your account.",
  "form.ask.success-message": "Your data was saved.",
  "form.ask.confirm-registration.description": "We sent a confirmation code to {whereTo}.{newLine}{timerMessage}",
  "form.ask.confirm-registration.exist-phone": "This phone is linked to another {merchant} account. Log in with this phone?",
  "form.ask.confirm-registration.exist-email": "This email is linked to another {merchant} account. Log in with this email?",
  "form.ask.confirm-registration.exist-user.btn": "Yes, log in",
  "form.confirm-status.success.title": "Success",
  "form.confirm.main-title": "Are you trying to log in?",
  "form.confirm.decline-btn": "No",
  "form.confirm.accept-btn": "Yes",
  "form.confirm-status.success.subtitle.phone": "Your phone number has been confirmed. You can close this tab.",
  "form.confirm-status.success.subtitle.email": "Your email address has been confirmed. You can close this tab.",
  "form.confirm-status.fail.title.phone": "Phone number not confirmed",
  "form.confirm-status.fail.title.email": "Email address not confirmed",
  "form.confirm-status.fail.subtitle": "Confirmation code has expired. Go back to login and try again.",
  "form.confirm-status.decline.header": "Thank you. This answer helps us improve our services.",
  "form.confirm-code.invalid": "Confirmation code has expired.",
  "form.otp.description": "Enter the 6-digit verification code we sent to {destination}.",
  "form.otp.resend": "Resend code",
  "form.otp.resend-timer": "Resend code in {count} {count, plural, one {second} other {seconds}}",
  "form.otp.send-button": "Confirm",
  "form.field.otp.placeholder": "Verification code",
  "form.field.search.placeholder": "Search...",
  "form.change-auth-method.phone.message": "Enter phone number",
  "form.change-auth-method.email-username.message": "Enter email or username",
  "form.change-auth-method.email.message": "Enter email",
  "form.change-auth-method.username.message": "Enter username",
  "form.enter-your.email-username-phone": "Enter your email, username, or phone",
  "form.enter-your.email-username": "Enter your email or username",
  "form.enter-your.email-phone": "Enter your email or phone",
  "form.enter-your.username-phone": "Enter your username or phone",
  "form.enter-your.phone": "Enter your phone to receive SMS",
  "form.enter-your.email": "Enter your email address to get code",
  "form.enter-your.username": "Enter your username",
  "form.field.phone.code.title": "Enter the confirmation code",
  "form.button.login-now": "Log in",
  "form.button.submit": "Submit",
  "form.email-login.send-code.text": "We will send you a code to the email address you entered. Use this code to log in.",
  "form.phone-login.send-sms.text": "We will send you a code to the phone number you entered. Use this code to log in.",
  "form.button.get-code": "Get code",
  "form.button.get-link": "Get link",
  "form.button.get-link.resend": "Get link",
  "form.enter-phone-code.error.incorrect-code": "Incorrect confirmation code. Check the code that you received and try again.",
  "form.phone-login.get-code.timer-message": "We sent a confirmation code to {whereTo}.{newLine}{timerMessage}",
  "form.phone-login.get-code.resend-message": "We sent you a text with a confirmation code. {link}.",
  "form.phone-login.get-code.resend-code": "Resend the code",
  "success-message.footer": "This window will automatically close in 5 seconds",
}

Para cambiar los textos:

  1. Cree un archivo JSON con textos localizados para el widget. Configuraciones regionales disponibles:en, ar, bg, cn, cs, de, es, fr, he, it, ja, ko, pl, pt, ro, ru, th, tr, tw, vi. El archivo debe tener la siguiente estructura:

Nota
Si no facilita un valor para ningún idioma, se usarán los valores por defecto.
Copy
Full screen
Small screen
{
  "en": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "ar": {
    "form.auth.title": "الاشتراك",
    "form.auth.subtitle": "يُرجى إدخال بريدك الإلكتروني للمصادقة"
  },
  "bg": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email<span>{timer}</span>"
  },
  "cn": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "cs": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "de": {
    "form.auth.title": "Registrieren",
    "form.auth.subtitle": "Bitte gib deine E-Mail-Adresse zur Authentifizierung ein"
  },
  "es": {
    "form.auth.title": "Registrarse",
    "form.auth.subtitle": "Introduce tu correo para la autentificación."
  },
  "fr": {
    "form.auth.title": "S'abonner",
    "form.auth.subtitle": "Veuillez saisir votre adresse e-mail pour vous authentifier"
  },
  "he": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "it": {
    "form.auth.title": "Iscriviti",
    "form.auth.subtitle": "Inserisci il tuo indirizzo e-mail per l'autenticazione"
  },
  "ja": {
    "form.auth.title": "サインアップ",
    "form.auth.subtitle": "認証のためにメールアドレスを入力してください"
  },
  "ko": {
    "form.auth.title": "가입",
    "form.auth.subtitle": "인증을 위해 이메일을 입력하세요"
  },
  "pl": {
    "form.auth.title": "Zarejestruj się",
    "form.auth.subtitle": "Podaj swój adres e-mail w celu uwierzytelnienia"
  },
  "pt": {
    "form.auth.title": "Registrar-se",
    "form.auth.subtitle": "Insira seu e-mail para autenticação"
  },
  "ro": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "ru": {
    "form.auth.title": "Подписаться",
    "form.auth.subtitle": "Введите адрес электронной почты для аутентификации"
  },
  "th": {
    "form.auth.title": "สมัคร",
    "form.auth.subtitle": "โปรดกรอกอีเมลของคุณเพื่อการตรวจสอบสิทธิ์"
  },
  "tr": {
    "form.auth.title": "Kaydol",
    "form.auth.subtitle": "Kimlik doğrulama için lütfen e-postanı gir"
  },
  "tw": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "vi": {
    "form.auth.title": "Đăng Ký",
    "form.auth.subtitle": "Vui lòng nhập email của bạn để xác thực"
  }
}
  1. Ponga el archivo JSON creado en su servidor.
Ejemplo de URL de archivo:
https://your-domain.com/assets/loginWidgetLocales.json
  1. Transmita la URL del archivo durante la inicialización del widget como se muestra a continuación:
Copy
Full screen
Small screen
const xl = new Widget({
  // any other params
  customLabels: https://your-domain.com/assets/loginWidgetLocales.json’
});

Personalización de widgets mediante Site Builder

Si utiliza Site Builder de Xsolla, puede personalizar el widget de Login en la configuración del bloque en el creador de sitios web.

Para personalizar el widget en el Site Builder:

  1. Abra su proyecto en Cuenta del editor.
  2. Haga clic en Site Builder en el menú lateral.
  3. En la sección Sites, seleccione su sitio web y haga clic en Open Site Builder.
  4. En Login settings vaya a la sección Layout.
  5. Cargue un logotipo o un fondo personalizado. Para ello:
    1. Seleccione el conmutador Logo o Custom background.
    2. Haga clic en el botón de carga situado debajo del conmutador.
    3. En la ventana de búsqueda de archivos, seleccione el archivo de imagen del logotipo y haga clic en Open. El panel Assets se abrirá en la barra lateral del editor, y la imagen cargada aparecerá tanto en este panel como en el widget del área de vista previa.
    4. Elija el tamaño de la imagen (opcional):
      1. Haga clic en la imagen cargada.
      2. En la sección Image, abra la lista desplegable Size y elija Ensure fit, Maximize, o Fit.
    5. Cambie el tono de la imagen (opcional):
      1. Haga clic en la imagen cargada.
      2. En la sección Image > Tint, haga clic en el icono y elija una de las opciones o elija cualquier color de la paleta.
    6. Para mostrar una versión diferente del logotipo o del fondo en el widget, haga clic en su imagen en el panel Assets.
  6. En la sección Xsolla Login, puede establecer la selección automática de colores para el bloque Login. Para ello, seleccione el toggler Use site style.

Nota
Después de configurar el widget a través de Cuenta del editor, espere de 7 a 10 minutos para que el widget se actualice o vacíe la caché.

Personalización de widgets mediante código CSS en Site Builder

Nota
Para utilizar este método, debe tener un host donde pueda alojar públicamente el archivo CSS para su uso futuro.

  1. Cree un archivo CSS e incluya ajustes visuales para el bloque Login.

Ejemplo

Copy
Full screen
Small screen
#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}
  1. Suba un archivo con código CSS a su alojamiento de acceso público y copie un enlace al archivo.
  2. En el Site Builder, haga clic en Add block > Custom code.
  3. Inserte el siguiente código:
Copy
Full screen
Small screen
<script>
    window.SB.subscribe((api) => {
        api.login.setConfigMiddleware((config) => ({
            ...config,
            customStyle: "https://your-domain.com/assets/loginWidgetStyles.css"
        }));
    });
</script>

en el cual https://your-domain.com/assets/loginWidgetStyles.css es un enlace al archivo CSS con sus estilos.

¿Te ha resultado útil este artículo?
¡Gracias!
¿Hay algo en lo que podamos mejorar? Mensaje
Lo sentimos
Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.
Valore esta página
Valore esta página
¿Hay algo en lo que podamos mejorar?

Prefiero no responder

¡Gracias por tu mensaje!
Última actualización: 20 de Febrero de 2024

¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.

Informar de un problema
Nos esforzamos por ofrecer contenido de calidad. Tus comentarios nos ayudan a mejorar.
Déjanos tu correo electrónico para que te podamos responder
¡Gracias por tu mensaje!