Login / Personalização de widgets
  Voltar aos Documentos

Login

Personalização de widgets

Como funciona

Um widget de login é uma interface gráfica para registrar e autorizar usuários em seu aplicativo. O widget pode conter campos para inserir credenciais de usuário e botões para fazer login via redes sociais. O widget também pode incluir textos explicativos e botões adicionais, por exemplo, para redefinir a senha ou solicitar um código de confirmação.

A Xsolla fornece modelos de widget padrão. A aparência e conteúdo deles são determinados pelo método de login escolhido para o seu projeto. Abaixo está a visualização padrão do widget de login clássico.

O produto Login permite que você personalize o widget para torná-lo reconhecível e consistente com a interface do seu aplicativo ou site. Para este propósito, você pode:

  • adicionar seu logotipo
  • alterar o esquema de cores
  • enviar uma imagem e usá-la como plano de fundo para a área ao redor do widget
  • alterar a forma do contorno dos botões e campos de entrada
  • alterar a ordem dos botões de rede social no widget (esta ordem é determinada pela escolha do país da localização)
  • definir o idioma de exibição do widget

Você pode personalizar a aparência e o conteúdo do widget:

Personalização de widgets na Conta de Distribuidor

Recomendamos que você edite o widget em sua Conta de Distribuidor porque isso permite que você:

  • veja as alterações introduzidas em tempo real
  • teste a operação dos botões do widget diretamente no editor ou na janela Preview na página Widget customization

Observação
As alterações feitas no widget por meio da Conta de Distribuidor são aplicadas onde quer que ele seja usado.
Aviso
A personalização do widget só estará disponível depois de assinar o Acordo de Licenciamento de Produto Xsolla. Para assinar o contrato, vá para a seção Agreements em sua Conta de Distribuidor.

Para personalizar o widget:

  1. Abra seu projeto na Conta de Distribuidor e vá para a seção Login.
  2. Clique em Configure no painel de um projeto Login.
  3. Vá para o bloco Personalização e selecione a seção Widget customization.

  1. Selecione o idioma e o país da localização do widget (opcional).
  2. Personalize o estilo do widget usando o editor.
  3. Depois de concluir todas as configurações, troque para o modo HTML usando o botão acima da área de pré-visualização do widget.
  1. Clique em Copy code para copiar o código de inicialização do widget gerado. Use este código para integrar o widget em seu aplicativo ou site.

Como usar o editor de widgets

  1. Para abrir o editor de widgets, clique em Customize na página Widget customization.
  2. Na janela do editor, faça as alterações necessárias no estilo do widget:Todas as alterações são exibidas na área de visualização do widget em tempo real.
Observação
Todas as alterações de parâmetros são salvas automaticamente, para que você possa parar e continuar a edição do widget a qualquer momento.
  1. Para verificar como o widget será exibido em diferentes idiomas, altere o idioma na lista suspensa acima da área de pré-visualização do widget.
Observação
A alteração do idioma no editor não afeta o idioma no qual o widget é exibido aos usuários.
  1. Depois de concluir todas as alterações no editor de widgets, clique em Publish.
Aviso
Uma vez publicado, o widget mudará em todos os aplicativos e sites aos quais está conectado.
Observação
Após a publicação, a página Widget customization pode exibir a versão anterior do widget carregada pelo navegador a partir do cache. Nesse caso, atualize a página pressionando Control+F5.
  1. Abra o editor de widgets.
  2. Na barra lateral do editor, clique em Login widget.
  3. No painel Login widget editor que é aberto, selecione a opção Logo.

  1. Clique no botão de upload abaixo do botão de opção.
  2. Na janela de pesquisa de arquivos, selecione o arquivo de imagem do logotipo e clique em Open.

    O painel Assets será aberto na barra lateral do editor. O logotipo enviado aparecerá neste painel e no widget na área de pré-visualização.

  1. Se você quiser testar uma versão diferente do logotipo, use o botão Upload no painel Assets.
  1. Para exibir uma versão diferente do logotipo no widget, clique em sua imagem no painel Assets.
  2. Depois de concluir a personalização do logotipo, feche o painel Assets. Sua última opção será salva automaticamente.

Como alterar o esquema de cores do widget

O esquema de cores do widget é definido por três cores base:
  • Text — usado para textos explicativos, conteúdo do campo de entrada e logotipos de redes sociais nos botões na parte inferior do widget.
  • Button — usado para os botões Login e Accept and create, para os contornos de campos e botões realçados, bem como para links e o título da aba ativa do widget.
  • Page tint — define a cor de fundo do widget.
A cor da página na qual o widget é exibido no modo de tela cheia é uma combinação das cores Button e Page tint. Essa cor é definida automaticamente.
Observação
Os botões das redes sociais mais usadas na parte superior do widget são sempre coloridos da mesma forma, independentemente do esquema de cores selecionado.
Para alterar as cores base do widget:
  1. Abra o editor de widgets.
  2. Na barra lateral do editor, clique em Global theme e, em seguida, no botão da cor base que você deseja alterar.
  3. Selecione a nova cor de uma das seguintes maneiras:
    • Especifique-a na paleta de cores que for aberta. Para alterar as cores na paleta, use o controle deslizante abaixo dela.
    • Use o botão abaixo do controle deslizante para alternar o modo: HEX, RGB ou HSL e insira o código da cor no formato selecionado.
    As alterações no esquema de cores são exibidas na área de pré-visualização do widget em tempo real.
  1. Se necessário, altere outras cores base da mesma maneira.

Como colocar uma imagem de fundo na área ao redor do widget

  1. Abra o editor de widgets.
  2. Na barra lateral do editor, clique em Login widget.
  3. No painel Login widget editor que for aberto, na seção Page background, clique no ícone + e, em seguida, no botão de upload.

  1. Na janela de pesquisa de arquivos, selecione o arquivo de imagem de plano de fundo e clique em Open.

    O painel Assets será aberto na barra lateral do editor. A imagem enviada aparecerá neste painel e na área ao redor do widget.
  1. Se você quiser testar uma versão diferente da imagem de plano de fundo, use o botão Upload no painel Assets.
  2. Para exibir uma variação do plano de fundo na área de pré-visualização do widget, clique em sua imagem no painel Assets.
  3. Depois de concluir a personalização da imagem de plano de fundo, feche o painel Assets. Sua última opção será salva automaticamente.

Como remodelar botões

Todos os botões e campos de entrada do widget são retangulares ou quadrados com cantos arredondados. O grau de arredondamento pode variar de 0 (cantos retos) a 100%.

Para alterar o grau de arredondamento:

  1. Abra o editor de widgets.
  2. Use o controle deslizante Roundness para selecionar a forma dos botões do widget.

Como alterar a ordem dos botões da rede social

Os botões da rede social só podem ser exibidos no widget depois que estiverem conectados nas suas configurações do projeto Login. A ordem dos botões é determinada pelo país da localização. O widget exibe os botões das redes mais populares naquele país, classificados por popularidade da esquerda para a direita em ordem decrescente. Na linha superior do widget, é mostrado a cada usuário a última rede social através da qual ele entrou no aplicativo.

O parâmetro Country é definido como Autodetected por padrão. Para alterar essa configuração, use a lista suspensa Country na página Widget customization.

Observação
Se você quiser especificar uma ordem diferente na qual os botões da rede social são exibidos no widget, entre em contato com o Gerente de Sucesso do Cliente ou envie um e-mail para csm@xsolla.com.

Como definir o idioma de exibição do widget

Os widgets de login padrão da Xsolla estão traduzidos em 20 idiomas. O idioma da interface é codificado nas duas primeiras letras da variável preferredLocale, que pode ser passada para o widget quando ele é inicializado.

Exemplo: Para exibir o widget em inglês, defina preferredLocale: “en_XX”.

Se o valor da variável preferredLocale não estiver definido, o idioma será determinado automaticamente pelo endereço IP ou pelo idioma do navegador.

Para definir o idioma no qual o widget será exibido aos usuários:

  1. Na página Widget customization, selecione um idioma na lista suspensa Available languages.

    No código de inicialização do widget gerado pela Xsolla, a variável preferredLocale mudará seu valor de acordo com sua escolha.

  1. Para exibir o código de inicialização, alterne para o modo HTML (usando o botão acima da área de visualização).
  2. Para verificar como o widget é exibido no idioma selecionado, alterne para o modo Preview.
Observação
Você também pode personalizar o idioma de exibição do widget alterando o valor da variável preferredLocale diretamente no código de inicialização do widget que é integrado ao seu aplicativo ou site.

Personalização de widgets usando arquivos JSON

Se você já conectou o Xsolla Login Widget SDK, você pode alterar a aparência e o conteúdo do widget sem usar sua Conta de Distribuidor. Em um editor de texto, você pode fazer alterações nos seguintes arquivos JSON:

  • socialsJSON, para definir a ordem em que os botões de rede social são exibidos no widget
  • themeJSON, para personalizar a aparência do widget:
    • selecione o esquema de cores do widget e a área ao redor dele
    • defina o grau de arredondamento de canto para certos tipos de elementos: botões, campos de entrada, o próprio widget
    • use imagens de fundo para diferentes elementos: o título do widget, o widget em si, a área ao redor do widget
    • se necessário, oculte a aba de autorização ou cadastro do widget, bem como os botões de redes sociais.

As configurações do widget disponíveis para edição são descritas na seção JSON files with widget settings.

Observação
O idioma de exibição do widget não é definido em arquivos JSON, mas no código de inicialização do widget usando o parâmetro preferredLocale.

Personalização de widget usando envio de arquivo CSS

  1. Crie um arquivo CSS e inclua configurações visuais para o bloco Login.

Exemplo de código de personalização de fonte:

Copy
Full screen
Small screen
  • css
@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;
}

Exemplo de código de personalização de estilo:

Copy
Full screen
Small screen
  • css
#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 seu projeto na Conta de Distribuidor e vá para a seção Login.
  2. Clique em Configure no painel de um projeto Login.
  3. Na página de navegação, vá para o bloco Personalização e selecione a seção Widget customization.
  4. Envie seu arquivo CSS no bloco Additional customization.

  1. Clique em Save changes.

Personalização de textos do widget

O widget de login está traduzido em 26 idiomas: inglês, árabe, birmanês, búlgaro, chinês, tcheco, alemão, espanhol, francês, filipino, húngaro, indonês, italiano, japonês, khmer, coreano, lao, nepalês, polonês, português, romeno, russo, tailandês, turco, taiwanês e vietnamita. Você pode personalizar os textos do widget de login por conta própria. Abaixo está uma lista das chaves padrões e seus valores em inglês:

Observação
Para alterar outros textos do widget, contate seu Gerente Pessoal ou envie um e-mail para integration@xsolla.com.
Copy
Full screen
Small screen
  • json
{
  "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 alterar os textos:

  1. Crie um arquivo JSON com os arquivos dos widgets traduzidos. Traduções disponíveis:
    • en - Inglês
    • ar - Árabe
    • bg - Búlgaro
    • cn - Chinês Simplificado
    • cs - Tcheco
    • de - Alemão
    • es - Espanhol
    • fr - Francês
    • he - Hebreu
    • id - Indonês
    • it - Italiano
    • ja - Japonês
    • km - Khmer
    • ko - Coreano
    • lo - Lao
    • my - Birmanês
    • ne - Nepalês
    • ph - Filipino
    • pl - Polonês
    • pt - Português
    • ro - Romeno
    • ru - Russo
    • th - Tailandês
    • tr - Turco
    • tw - Chinês Tradicional
    • vi - Vietnamita
    O arquivo deve ter a seguinte estrutura:

Observação
Se você providenciar um valor para qualquer idioma, os valores padrões serão usados.
Copy
Full screen
Small screen
  • json
{
  "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",
  },
  "km": {
    "form.auth.title": "ចុះឈ្មោះ",
    "form.auth.subtitle": "បញ្ចូលអ៊ីមែល"
  },
  "id": {
    "form.auth.title": "Daftar",
    "form.auth.subtitle": "Masukkan email"
  },
  "lo": {
    "form.auth.title": "ລົງຊື່ເຂົ້າໃຊ້",
    "form.auth.subtitle": "ປ້ອນອີເມວ"
  },
  "my": {
    "form.auth.title": "အကောင့်ဖွင့်ရန်",
    "form.auth.subtitle": "အီးမေးလ်ကို ထည့်သွင်းပါ"
  },
  "ph": {
    "form.auth.title": "Mag-sign up",
    "form.auth.subtitle": "Ilagay ang email"
  },
  "ne": {
    "form.auth.title": "साइन अप गर्नुहोस्",
    "form.auth.subtitle": "इमेल हाल्नुहोस्"
  }
}
  1. Coloque o arquivo JSON criado no seu servidor.
Exemplo de arquivo URL:
https://your-domain.com/assets/loginWidgetLocales.json
  1. Passe o arquivo URL durante a inicialização do widget como demonstrado abaixo:
Copy
Full screen
Small screen
  • javascript
const xl = new Widget({
  // any other params
  customLabels: ‘https://your-domain.com/assets/loginWidgetLocales.json’
});

Personalização de widgets usando o Site Builder

Se você usar o Xsolla Site Builder, poderá personalizar o widget de Login nas configurações do bloco no construtor.

Para personalizar o widget no Site Builder:

  1. Abra seu projeto na Conta de Distribuidor.
  2. Clique em Site Builder no menu lateral.
  3. Na seção Sites, selecione seu site e clique em Open Site Builder.
  4. Em Login settings, vá para a seção Layout.
  5. Envie um logotipo ou plano de fundo personalizado. Para fazer isso:
    1. Selecione a opção Logo ou Custom background.
    2. Clique no botão de envio abaixo do botão de opção.
    3. Na janela de pesquisa de arquivos, selecione o arquivo de imagem do logotipo e clique em Open. O painel Assets será aberto na barra lateral do editor e a imagem carregada aparecerá neste painel e no widget na área de pré-visualização.
    4. Escolha o tamanho da imagem (opcional):
      1. Clique na imagem enviada.
      2. Na seção Image, abra a lista suspensa Size e escolha Ensure fit, Maximize ou Fit.
    5. Alterar a tonalidade da imagem (opcional):
      1. Clique na imagem carregada.
      2. Na seção Image > Tint, clique no ícone ⚙ e escolha uma das opções ou escolha qualquer cor na paleta.
    6. Para exibir uma versão diferente do logotipo ou plano de fundo no widget, clique em sua imagem no painel Assets.
  6. Na seção Xsolla Login, você pode configurar a seleção automática de cores para o bloco Login. Para fazer isso, selecione a opção Use site style.

Observação
Depois de configurar o widget por meio da Conta de Distribuidor, aguarde de 7 a 10 minutos para que o widget atualize ou libere o cache.

Personalização de widgets usando código CSS no Site Builder

Observação
Para usar esse método, você deve ter um host onde você pode hospedar publicamente o arquivo CSS para uso no futuro.

  1. Crie um arquivo CSS e inclua configurações visuais para o bloco Login.

Exemplo:

Copy
Full screen
Small screen
  • css
#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. Envie um arquivo com código CSS ao seu serviço de hospedagem para acesso público e copie um link para o arquivo.
  2. No Site Builder, clique em Add block > Custom code.
  3. Insira o seguinte código:
Copy
Full screen
Small screen
  • css
<script>
    window.SB.subscribe((api) => {
        api.login.setConfigMiddleware((config) => ({
            ...config,
            customStyle: "https://your-domain.com/assets/loginWidgetStyles.css"
        }));
    });
</script>

onde https://your-domain.com/assets/loginWidgetStyles.css — é um link para o arquivo CSS com seus estilos.

Este artigo foi útil?
Obrigado!
Podemos melhorar alguma coisa? Mensagem
Que pena ouvir isso
Explique porque este artigo não foi útil para você. Mensagem
Obrigado pelo seu feedback!
Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.
Última atualização: 18 de Setembro de 2024

Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.

Relatar um problema
Nós sempre avaliamos nossos conteúdos. Seu feedback nos ajuda a melhorá-los.
Forneça um e-mail para que possamos responder
Obrigado pelo seu feedback!