Кастомизация виджета

Как это работает

Виджет авторизации — это графический интерфейс для регистрации и авторизации пользователей в вашем приложении. Виджет может содержать поля для ввода данных учетной записи пользователя приложения и кнопки для входа в приложение через социальные сети. Также на виджете могут быть поясняющие тексты и дополнительные кнопки, например, для восстановления пароля или запроса кода подтверждения.

Xsolla предоставляет стандартные шаблоны виджетов. Их внешний вид и наполнение определяются способом авторизации, выбранным для вашего проекта. Ниже приведен стандартный вид виджета для классической авторизации.

Продукт Авторизация позволяет изменять параметры виджета, чтобы сделать его узнаваемым и органичным в интерфейсе вашего приложения или веб-сайта. Для этой цели вы можете:

• добавить на виджет свой логотип;
• изменить цветовую гамму виджета;
• загрузить изображение и использовать его как фон для области вокруг виджета;
• изменить форму контура кнопок и полей ввода;
• изменить порядок расположения кнопок социальных сетей на виджете (порядок определяется выбором страны локализации);
• задать язык отображения виджета.

Настроить внешний вид и наполнение виджета вы можете с помощью:

• графического редактора в Личном кабинете;
• изменения настроек в соответствующих JSON-файлах библиотеки Xsolla Login Widget SDK.

Кастомизация виджета в Личном кабинете

Редактирование виджета в Личном кабинете — это рекомендованный способ кастомизации, который позволяет:

• увидеть изменения в реальном времени;
• проверить работу кнопок виджета непосредственно в редакторе или в окне Предварительный просмотр на странице Кастомизация виджета.

Для кастомизации виджета:

1. Откройте ваш проект в Личном кабинете и перейдите в раздел Авторизация.
2. Нажмите Настроить в панели нужного варианта авторизации.
3. Перейдите к блоку Кастомизация и выберите раздел Кастомизация виджета.

4. Выберите язык и страну локализации виджета, если необходимо.
5. Настройте стиль виджета с помощью редактора.
6. После выполнения всех настроек переключитесь в режим HTML с помощью кнопки над областью просмотра виджета.

7. Нажмите Copy code, чтобы скопировать сгенерированный код инициализации виджета. Используйте этот код для интеграции виджета в ваше приложение или веб-сайт.

Как использовать редактор виджета

1. Чтобы открыть редактор виджета, на странице Кастомизация виджета нажмите Кастомизировать.
2. В окне редактора внесите необходимые изменения в стиль виджета:
   • добавьте свой собственный логотип;
   • измените цветовую гамму виджета;
   • загрузите изображение и используйте его как фон для области вокруг виджета;
   • задайте форму контура кнопок.
   Все изменения отображаются в области просмотра виджета в режиме реального времени.

3. Чтобы проконтролировать, как виджет будет отображаться на разных языках, измените язык в выпадающем списке над областью просмотра.

4. После внесения всех необходимых изменений в редакторе виджета нажмите Опубликовать.

Как добавить логотип

1. Откройте редактор виджета.
2. В боковой панели редактора нажмите Виджет авторизации.
3. В открывшейся панели Редактор виджета авторизации установите переключатель Логотип в активное положение.

4. Нажмите кнопку загрузки под переключателем.
5. В окне поиска файла выберите файл с рисунком логотипа и нажмите Открыть.

В боковой панели редактора отобразится панель Медиа. Загруженный логотип появится как на этой панели, так и на виджете в области просмотра.

6. Если вы хотите протестировать другой вариант логотипа, используйте кнопку Загрузить в панели Медиа.

7. Чтобы отобразить вариант логотипа на виджете, нажмите его изображение в панели Медиа.
8. По завершении настройки логотипа закройте панель Медиа. Ваш последний выбор будет автоматически сохранен.

Как изменить цветовую гамму виджета

Цветовая гамма виджета задается тремя базовыми цветами:

• Текст — используется для поясняющих текстов, содержимого полей ввода и логотипов социальных сетей на кнопках внизу виджета.
• Кнопка — используется для кнопок Вход и Принять и создать, для контуров выделенных полей и кнопок, а также для ссылок и заголовка активной вкладки виджета.
• Оттенок фона — определяет цвет фона виджета.

Чтобы изменить базовые цвета виджета:

1. Откройте редактор виджета.
2. В боковой панели редактора нажмите Тема, а затем кнопку базового цвета, который вы хотите изменить.
3. Выберите желаемый цвет одним из следующих способов:
   • Укажите цвет на открывшейся цветовой палитре. Для изменения цветов в палитре используйте расположенный под ней ползунок.
   • С помощью кнопки под ползунком переключитесь в один из режимов: HEX, RGB или HSL, и введите код цвета в выбранном формате.
   Изменения цветовой гаммы отображаются в области просмотра виджета в режиме реального времени.

4. Если требуется, измените другие базовые цвета аналогичным образом.

Как поместить фоновое изображение в область вокруг виджета

1. Откройте редактор виджета.
2. В боковой панели редактора нажмите Виджет авторизации.
3. В открывшейся панели Редактор виджета авторизации в разделе Фон страницы нажмите значок +, а затем кнопку загрузки.

4. В окне поиска файла выберите файл для фонового рисунка и нажмите Открыть.

В боковой панели редактора отобразится панель Медиа. Загруженный рисунок появится как на этой панели, так и в области вокруг виджета.

5. Если вы хотите протестировать другой вариант фонового изображения, используйте кнопку Загрузить в панели Медиа.
6. Чтобы отобразить фоновое изображение вокруг виджета, нажмите соответствующий рисунок в панели Медиа.
7. По завершении настройки фонового изображения закройте панель Медиа. Ваш последний выбор будет автоматически сохранен.

Как изменить форму кнопок

Кнопки и поля ввода виджета имеют форму прямоугольника или квадрата с закругленными углами. Степень закругления может меняться от 0 (прямые углы) до 100%.

Чтобы изменить степень закругления углов:

1. Откройте редактор виджета.
2. Выберите желаемую форму кнопок виджета с помощью ползунка Скругление.

Как изменить порядок расположения кнопок социальных сетей

Чтобы на виджете отображались кнопки социальных сетей, эти сети необходимо подключить в настройках вашего варианта авторизации. Порядок расположения кнопок определяется страной локализации. Для каждой страны на виджете отображаются кнопки сетей, наиболее популярных в этой стране. Кнопки упорядочены слева направо по убыванию популярности социальных сетей. В верхней строке виджета каждому пользователю отображается последняя социальная сеть, через которую он вошел в приложение.

По умолчанию для Страны установлено значение Определять автоматически. Чтобы изменить данную настройку, используйте выпадающий список Страна на странице Кастомизация виджета.

Как задать язык отображения виджета

Стандартные виджеты авторизации Xsolla локализованы на 20 языков. Язык локализации интерфейса кодируется в первых двух буквах параметра preferredLocale, который может быть передан виджету при его инициализации.

Пример: Для отображения виджета на английском языке задайте preferredLocale: "en_XX".

Если значение переменной preferredLocale не задано, то язык определяется автоматически по IP-адресу или языку браузера.

Чтобы задать язык, на котором виджет отображается пользователю:

1. На странице Кастомизация виджета выберите язык из выпадающего списка Поддерживаемые языки.

Переменная preferredLocale в сгенерированном Xsolla коде инициализации виджета изменит значение в соответствии с вашим выбором.

2. Чтобы просмотреть код инициализации, переключитесь в режим HTML (с помощью кнопки над областью просмотра).
3. Чтобы проконтролировать отображение виджета на выбранном языке, переключитесь в режим Предварительный просмотр.

Кастомизация виджета с помощью JSON-файлов

Если у вас уже подключен Xsolla Login Widget SDK, вы можете изменять внешний вид и наполнение виджета и без использования Личного кабинета. В текстовом редакторе внесите необходимые изменения в следующие JSON-файлы:

• socialsJSON, чтобы задать собственный порядок отображения кнопок социальных сетей на виджете;
• themeJSON, чтобы настроить внешний вид виджета:
  • выбрать цветовую гамму виджета и окружающей его области;
  • задать степень скругления углов для отдельных элементов: кнопок, полей ввода, самого виджета;
  • использовать фоновые изображения для различных элементов: заголовка виджета, самого виджета, области вокруг виджета;
  • при необходимости скрыть на виджете вкладку авторизации или регистрации, а также кнопки социальных сетей.

Доступные для редактирования настройки виджета описаны в разделе JSON-файлы с настройками виджета.

Кастомизация с помощью загрузки CSS-файла

1. Создайте 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;
}

Пример кода для кастомизации стилей:

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

2. Откройте ваш проект в Личном кабинете и перейдите в раздел Авторизация.
3. Нажмите Настроить в панели нужного варианта авторизации.
4. Перейдите к блоку Кастомизация и выберите раздел Кастомизация виджета.
5. Загрузите CSS-файл в блоке Дополнительная кастомизация.

6. Нажмите Сохранить изменения.

Кастомизация виджета через Site Builder

Если вы используете Site Builder Xsolla, то можете кастомизировать виджет авторизации в настройках блока конструктора.

Чтобы кастомизировать виджет в Site Builder:

1. Откройте ваш проект в Личном кабинете.
2. В боковом меню нажмите Site Builder.
3. В разделе Сайты выберите ваш сайт и нажмите Открыть Site Builder.
4. В блоке Настройки входа перейдите к секции Настройка блока.
5. Загрузите свой логотип или пользовательский фон. Для этого:
   1. Установите переключатель Логотип или Пользовательский фон в активное положение.
   2. Нажмите кнопку загрузки под переключателем.
   3. В окне поиска файла выберите файл с изображением и нажмите Открыть. В боковой панели редактора отобразится панель Медиа. Загруженное изображение появится как на этой панели, так и в виджете в области просмотра.
   4. Выберите размер изображения (опционально):
      1. Нажмите на загруженное изображение.
      2. В разделе Изображение в раскрывающемся списке Размер выберите Вписать, Растянуть или Фиксировать.
   5. Измените оттенок изображения (опционально):
      1. Нажмите на загруженное изображение.
      2. В разделе Изображение > Оттенок выберите один из предложенных вариантов или выберите любой цвет в палитре, нажав значок ⚙.
   6. Если вы хотите протестировать другой вариант логотипа или фона, используйте нажмите на это изображение в панели Медиа.
6. В разделе Авторизация Иксолла вы можете настроить автоматический подбор цветов для блока авторизации. Для этого установите переключатель Использовать тему сайта в активное положение.

Кастомизация с помощью CSS-кода в Site Builder

1. Создайте 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);
}

2. Загрузите файл с CSS-кодом на свой хостинг в публичный доступ и скопируйте ссылку на файл.
3. В Site Builder нажмите Добавить блок > Ваш код.
4. Вставьте следующий код:

<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-файл с вашими стилями.

Оценить страницу

Что может сделать страницу еще лучше? Отправить

В другой раз

Спасибо за обратную связь!