로그인 / 위젯 사용자 정의
  문서로 돌아가기

로그인

위젯 사용자 정의

작동 방식

로그인 위젯은 여러분 application에서 사용자를 등록하고 인증하기 위한 그래픽 인터페이스입니다. 위젯은 사용자 자격증명을 입력하기 위한 필드와 SNS를 통한 로그인을 위한 버튼을 포함할 수 있습니다. 위젯은 또한, 예를 들어 비밀번호 초기화 혹은 확인 코드 요청을 위한 설명 문구나 추가 버튼을 포함할 수 있습니다.

엑솔라는 표준 위젯 템플릿을 제공합니다. 그 외형과 콘텐츠는 여러분의 프로젝트를 위해 선택한 로그인 메소드에 의해 결정됩니다. 아래 내용은 고전적 로그인 위젯 표준 화면입니다.

애플리케이션 및 웹사이트의 인터페이스와 일관되고 인식 가능하도록 로그인 제품을 사용하여 위젯을 사용자 정의할 수 있습니다. 이러한 목적을 달성하기 위해 다음 작업을 수행할 수 있습니다.

  • 자신의 로고 추가
  • 색상 구성 변경
  • 이미지를 업로드하여 위젯 주변 배경으로 사용
  • 버튼 형태 및 입력 필드 윤곽 변경
  • 위젯에 SNS 버튼 순서 (이 순서는 현지화 대상국 선택에 따라 결정됩니다) 변경
  • 위젯 표시 언어 설정

위젯의 외형과 콘텐츠를 맞춤 설정할 수 있습니다.

관리자 페이지에서 위젯 맞춤 설정

다음과 같은 장점이 있어서 관리자 페이지에서의 위젯 편집을 권장합니다.

  • 실시간으로 변경 사항 보기
  • 편집기 혹은 위젯 맞춤 설정 페이지의 미리보기 창에서 위젯 버튼 동작을 바로 테스트해보기

알림
관리자 페이지을 통한 위젯 변경 사항은 사용되는 모든 곳에 적용됩니다.
주의
위젯 맞춤 설정은 엑솔라 제품 라이선스 계약에 서명한 이후에만 사용할 수 있습니다. 계약에 서명하려면, 관리자 페이지계약 섹션으로 이동합니다.

위젯 맞춤 설정 방법:

  1. 관리자 페이지에서 프로젝트를 열고 로그인 섹션으로 이동합니다.
  2. 로그인 프로젝트 패널의 구성을 클릭합니다.
  3. 맞춤 설정 블록으로 이동하여 위젯 맞춤 설정 섹션을 선택합니다.

  1. 언어 및 위젯 현지화 국가를 선택합니다 (선택 사항).
  2. 편집기로 위젯 스타일 맞춤 설정.
  3. 모든 설정 완료 후, 위젯 미리보기 영역 위의 버튼을 사용하여 HTML 모드로 전환합니다.
  1. 생성된 위젯 초기화 코드를 복사하기 위하여 코드 복사를 클릭합니다. 이 코드를 사용하여 application 혹은 웹 사이트에 위젯을 통합합니다.

위젯 편집기 사용 방법

  1. 위젯 편집기를 열려면, 위젯 맞춤 설정 페이지에서 맞춤 설정을 클릭합니다.
  2. 편집기 창에서 위젯 스타일에 필요한 사항을 변경합니다:모든 변경 사항은 위젯 미리보기 영역에 실시간으로 표시됩니다.
알림
모든 매개 변수 변경 사항은 자동으로 저장되므로 언제든지 위젯 편집을 중단 및 재개할 수 있습니다.
  1. 위젯에 서로 다른 언어로 어떻게 표시되는지 확인하려면 위젯 미리보기 영역 위의 드롭다운 목록에서 언어를 변경합니다.
알림
편집기에서 언어를 변경해도 위젯이 사용자에게 표시되는 언어에는 영향을 주지 않습니다.
  1. 위젯 편집기에서 모든 변경 사항을 완료한 후 게시를 클릭합니다.
주의
일단 한 번 게시하면, 위젯 변경 사항은 연결된 모든 application과 웹 사이트에 걸쳐서 변경됩니다.
알림
게시 후, 위젯 맞춤 설정 페이지에 브라우저가 캐쉬에서 불러 온 이전 버전의 위젯이 표시될 수도 있습니다. 이러한 경우에는, Control+F5를 눌러서 페이지 새로 고침을 하세요.
  1. 위젯 편집기를 엽니다.
  2. 편집기 사이드바에서, 로그인 위젯을 클릭합니다.
  3. 열린 로그인 위젯 편집기에서 로고 토글을 선택합니다.

  1. 토글 아래 업로드 버튼을 클릭합니다.
  2. 파일 검색창에서, 로고 이미지 파일을 선택하고 열기를 클릭합니다.

    편집기 사이드바에 자산 패널이 열립니다. 업로드한 로고가 이 패널과 위젯 미리보기 영역에 나타납니다.

  1. 다른 로고 버전을 테스트하려면, 자산 패널의 업로드 버튼을 사용합니다.
  1. 위젯에 서로 다른 로고 버전을 표시하려면, 자산 패널의 이미지를 클릭합니다.
  2. 로고 맞춤 설정 완료 후, 자산 패널을 닫습니다. 최종 선택 사항은 자동으로 저장됩니다.

위젯 색상 구성 변경 방법

위젯 색상 구성은 세 가지 기본 색상에 의해 정의됩니다:
  • 문장 - 설명 문장, 입력 필드 콘텐츠 및 위젯 하단 버튼의 SNS 로고에 사용됩니다.
  • 버튼 - 로그인수락 및 생성 버튼, 강조 표시된 필드 및 버튼 윤곽, 활성 위젯 탭 링크 및 제목에 사용됩니다.
  • 페이지 색조 - 위젯 배경 색상을 정의합니다.
전체 화면 모드에서 위젯이 표시되는 페이지 색상은 버튼페이지 색조 색상의 조합으로 이루어집니다. 이 색상은 자동으로 설정됩니다.
알림
선택한 색상 구성과 무관하게 위젯 상단의 가장 많이 사용되는 SNS 버튼은 항상 동일한 색상을 유지합니다.
위젯 기본 색상 변경 방법:
  1. 위젯 편집기 열기.
  2. 편집기 사이드바에서, 전역 테마를 클릭하고 변경하려는 기본 색상 버튼을 클릭합니다.
  3. 다음 방법중 하나를 통해 신규 색상을 선택합니다:
    • 열린 색상 팔레트에서 지정합니다. 팔레트에서 색상을 변경하려면, 그 아래 슬라이더를 사용합니다.
    • 모드를 변경하려면 슬라이더바 아래 버튼을 사용합니다: HEX, RGB 혹은 HSL, 그리고 선택한 형식의 색상 코드를 입력합니다.
    색상 구성 변경 내역은 위젯 미리보기 영역에 실시간으로 표시됩니다.
  1. 필요한 경우, 다른 기본 색상도 같은 방식으로 변경합니다.

위젯 주위 영역에 배경 이미지 넣는 방법

  1. 위젯 편집기를 엽니다.
  2. 편집기 사이드바에서 로그인 위젯을 클릭합니다.
  3. 페이지 배경 섹션의 열린 로그인 위젯 편집기 패널에서, + 아이콘을 클릭하고 업로드 버튼을 클릭합니다.

  1. 파일 탐색창에서 배경 이미지 파일을 선택하고 열기를 클릭합니다.

    자산 패널이 편집기 사이드바에서 열립니다. 업로드한 이미지는 이 패널과 위젯 근처 영역에 모두 나타납니다.
  1. 다른 배경 이미지 버전을 테스트하려면, 자산 패널의 업로드 버튼을 사용합니다.
  2. 위젯 미리보기 영역에 다양한 배경을 표시하려면, 자산 패널에서 이미지를 클릭합니다.
  3. 배경 이미지 맞춤 설정을 완료한 이후, 자산 패널을 닫습니다. 최종 선택 사항은 자동으로 저장됩니다.

버튼 형상 변경 방법

위젯의 모든 버튼과 입력 필드는 모서리가 둥근 직사각형 혹은 정사각형입니다. 곡률은 0(직각)에서 100% 사이입니다.

곡률 변경 방법:

  1. 위젯 편집기를 엽니다.
  2. 위젯 버튼 형상을 선택하기 위해 곡률도 슬라이더를 사용합니다.

SNS 버튼 표시 순서 변경 방법

SNS 버튼은 일단 로그인 프로젝트 설정에 연결되어야만 위젯에 표시될 수 있습니다. 버튼 순서는 현지화 국가에 따라 결정됩니다. 위젯은 해당 국가에서 가장 인기있는 네트워크의 인기도에 따라 왼쪽에서 오른쪽의 순서로 내림차순으로 정렬하여 버튼을 표시합니다. 위젯 맨 윗줄에는 각 사용자가 application에 들어간 최종 SNS가 표시됩니다.

국가 매개 변수는 기본으로 자동 감지로 설정됩니다. 이 설정을 변경하려면, 위젯 맞춤 설정 페이지의 국가 드론다운 목록을 사용합니다.

알림
SNS 버튼이 위젯에 표시되는 순서를 다르게 지정하려면, 고객 성공 매니저에게 문의하거나 csm@xsolla.com으로 이메일을 보내주세요.

위젯 표시 언어 설정 방법

표준 엑솔라 로그인 위젯은 20개 언어로 현지화됩니다. 인터페이스 현지화 언어는 preferredLocale 변수의 처음 두 문자로 인코딩되는데 이는 위젯 초기화 시 위젯에 전달됩니다.

사례: 위젯을 영어로 표시하려면, preferredLocale: “en_XX”를 설정합니다.

preferredLocale 변수 값이 설정되지 않으면, 언어는 IP 주소 혹은 브라우저 언어에 따라 자동으로 결정됩니다.

위젯이 사용자에게 표시되는 언어 설정 방법:

  1. 위젯 맞춤 설정 페이지에서 사용 가능 언어 드롭다운 목록으로부터 언어를 선택합니다.

    엑솔라가 생성한 위젯 초기화 코드에서, preferredLocale 변수는 여러분의 선택에 따라 값이 변경됩니다.

  1. 초기화 코드를 보려면, HTML 모드로(미리보기 영역 위 버튼 사용) 전환합니다.
  2. 위젯이 선택한 언어로 어떻게 보일지 확인하려면, 미리보기 모드로 전환합니다.
알림
여러분의 application 혹은 웹 사이트에 통합된 위젯 초기화 코드에서 preferredLocale 값을 직접 바꾸어도 위젯 표시 언어를 맞춤 설정할 수 있습니다.

JSON 파일을 이용하여 위젯 맞춤 설정

만약 엑솔라 로그인 위젯 SDK에 이미 연결한 경우, 자신의 관리자 페이지을 사용하지 않고 위젯의 외형과 콘텐츠를 변경할 수 있습니다. 문장 편집기에서 다음 JSON 파일을 변경할 수 있습니다:

  • socialsJSON, SNS 버튼이 위젯에 표시되는 순서 설정;
  • themeJSON, 위젯 외형 맞춤 설정:
    • 위젯과 그 주변의 색상 구성 설정;
    • 특정 유형 요소의 모서리 곡률 설정: 버튼, 입력 필드, 위젯 자신;
    • 다른 요소를 위한 배경 이미지 사용: 위젯 제목, 위젯 자신, 위젯 주변 영역;
    • 필요한 경우, SNS 버튼 뿐만 아니라 위젯의 인증 혹은 등록 탭도 감춥니다.

편집 가능한 위젯 설정에 관한 내용은 JSON 파일 위젯 설정 섹션에 기술되어 있습니다.

알림
위젯 표시 언어는 JSON 파일에서 설정하지 않고 preferredLocale 매개 변수를 사용하여 위젯 초기화 코드에서 설정합니다.

CSS 파일 업로드를 사용한 위젯 사용자 정의

  1. CSS 파일을 생성하고 로그인 블록에 대한 비주얼 설정을 포함합니다.

글꼴 사용자 정의 코드 예제:

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;
}

스타일 사용자 정의 코드 예제:

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. 관리자 페이지에서 프로젝트를 열고 로그인 섹션으로 이동합니다.
  2. 로그인 프로젝트의 창에서 구성을 클릭합니다.
  3. 탐색 페이지에서 사용자 정의 블록으로 이동하여 위젯 사용자 정의 섹션을 선택합니다.
  4. 추가 사용자 정의 블록에서 CSS 파일을 업로드합니다.

  1. 변경 내용 저장을 클릭합니다.

위젯 텍스트 사용자 정의

로그인 위젯은 영어, 아랍어, 불가리아어, 중국어, 체코어, 독일어, 스페인어, 프랑스어, 헝가리어, 이탈리아어, 일본어, 한국어, 폴란드어, 포르투갈어, 루마니아어, 러시아어, 태국어, 터키어, 대만어, 베트남어 등 20개 언어로 현지화되어 있습니다. 로그인 위젯의 텍스트는 직접 사용자 정의할 수 있습니다. 아래는 영어로된 로그인 위젯 텍스트의 기본 키와 값입니다.

알림
위젯의 다른 텍스트를 변경하려면 개인 매니저에게 문의하거나 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",
}

텍스트 변경 방법:

  1. 위젯의 텍스트를 현지화한 JSON 파일을 만듭니다. 사용 가능한 로캘: en, ar, bg, cn, cs, de, es, fr, he, it, ja, ko, pl, pt, ro, ru, th, tr, tw, vi. 파일 구조는 다음과 같아야 합니다.

알림
언어에 대한 값을 제공하지 않으면 기본값이 사용됩니다.
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. 생성된 JSON 파일을 서버에 저장합니다.
파일 URL 예시:
https://your-domain.com/assets/loginWidgetLocales.json
  1. 위젯 초기화 시 파일 URL을 아래와 같이 전달해 주세요.
Copy
Full screen
Small screen
const xl = new Widget({
  // any other params
  customLabels: https://your-domain.com/assets/loginWidgetLocales.json’
});

웹사이트 빌더를 사용한 위젯 사용자 정의

엑솔라 웹사이트 빌더를 사용하는 경우 빌더의 블록 설정에서 로그인 위젯을 사용자 정의할 수 있습니다.

웹사이트 빌더에서 위젯을 사용자 정의하는 방법:

  1. 관리자 페이지에서 프로젝트를 엽니다.
  2. 사이드 메뉴에서 웹사이트 빌더를 클릭합니다.
  3. 사이트 섹션에서 사이트를 선택한 후 웹사이트 빌더 열기를 클릭합니다.
  4. 로그인 설정에서 레이아웃 섹션으로 이동합니다.
  5. 로고를 업로드하거나 배경을 사용자 정의합니다. 이렇게 하려면:
    1. 로고 또는 사용자 정의 배경 토글을 선택합니다.
    2. 토글 아래의 업로드 버튼을 클릭합니다.
    3. 파일 검색 창에서 로고 이미지 파일을 선택한 후 열기를 클릭합니다. 편집기의 사이드바에 자산 패널이 열리고 이 패널과 미리보기 영역의 위젯에 업로드한 이미지가 모두 표시됩니다.
    4. 이미지 크기 선택(선택 사항):
      1. 업로드한 이미지를 클릭합니다.
      2. 이미지 섹션에서 크기 드롭다운 목록을 연 후 맞춤 확인, 최대화 또는 맞춤을 선택합니다.
    5. 이미지 색조 변경(선택 사항):
      1. 업로드한 이미지를 클릭합니다.
      2. 이미지 > 색조 섹션에서 아이콘을 클릭한 후 옵션 중 하나를 선택하거나 팔레트에서 아무 색상이나 선택합니다.
    6. 위젯에 다른 버전의 로고나 배경을 표시하려면 자산 패널에서 해당 이미지를 클릭합니다.
  6. 엑솔라 로그인 섹션에서 로그인 블록의 색상을 자동으로 선택하도록 설정할 수 있습니다. 이렇게 하려면 사이트 스타일 사용 토글을 선택합니다.

알림
관리자 페이지을 통해 위젯을 구성한 후 위젯이 업데이트되거나 캐시가 플러싱될 때까지 7~10분 정도 기다립니다.

웹사이트 빌더에서 CSS 코드를 사용한 위젯 사용자 정의

알림
이 방식을 사용하려면 나중에 사용할 수 있도록 CSS 파일을 퍼블릭으로 호스팅할 수 있는 호스트가 있어야 합니다.

  1. CSS 파일을 생성하고 로그인 블록에 대한 비주얼 설정을 포함합니다.

예제:

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. 퍼블릭 액세스를 위해 호스팅에 CSS 코드가 포함된 파일을 업로드하고 파일 링크를 복사합니다.
  2. 웹사이트 빌더에서 블록 추가 > 사용자 정의 코드를 클릭합니다.
  3. 다음 코드를 삽입합니다.
Copy
Full screen
Small screen
<script>
    window.SB.subscribe((api) => {
        api.login.setConfigMiddleware((config) => ({
            ...config,
            customStyle: "https://your-domain.com/assets/loginWidgetStyles.css"
        }));
    });
</script>

여기서 https://your-domain.com/assets/loginWidgetStyles.css는 스타일이 포함된 CSS 파일에 대한 링크입니다.

이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
이 페이지 평가
이 페이지 평가
개선해야 할 점이 있을까요?

답하기 원하지 않습니다

의견을 보내 주셔서 감사드립니다!
마지막 업데이트: 2024년 2월 20일

오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.

문제 보고
콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
후속 조치를 위해 이메일을 제공해 주세요
의견을 보내 주셔서 감사드립니다!