Это самый распространённый шаблон пейвола. Используйте его как отдельный экран или разместите в конце многоэкранного флоу. Стандартный экран пейвола содержит заголовок, описание ценности, список функций, список продуктов, кнопку покупки и ссылки в футере для восстановления покупок, пользовательского соглашения и политики конфиденциальности.

Перед началом работы

• Создайте продукты в дашборде Adapty.
• Подключите Adapty к App Store и Google Play.

1. Настройте повторно используемые стили

Повторно используемые стили позволяют применять одинаковую типографику и цвета на всех экранах в один клик. Каждый новый флоу поставляется с набором стилей текста по умолчанию (H1, Body, Button Label и т. д.) — настройте их под своё оформление, прежде чем начать добавлять элементы. Добавьте цветовые стили для фирменных цветов, которые будете использовать на экране.

Подробные инструкции: Стили и оформление — Повторно используемые стили.

Чтобы настроить стили:

1. На левой панели откройте панель Styles .
2. На вкладке Text нажмите на существующий стиль, чтобы изменить шрифт, начертание, размер и цвет. Новые стили добавляйте только если стандартных не хватает.

3. На вкладке Colors нажмите Create style и добавьте цвета, которые планируете использовать на экране повторно.

2. Настройте макет экрана

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

Полный список свойств экрана см. в разделе Экраны и слои — Настройки экрана.

Чтобы настроить экран:

1. Нажмите на пустую область холста, чтобы выбрать экран. Правая панель переключится на настройки экрана.
2. В разделе System UI отключите Safe area, чтобы контент распространялся до краёв экрана.
3. В разделе Layout задайте направление Vertical и распределение Space evenly.

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

3. Добавьте кнопку закрытия

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

1. На канвасе нажмите +.
2. Выберите Buttons > Close.

4. Добавьте заголовок и свяжите его с кнопкой закрытия

H1 располагается рядом с кнопкой закрытия в верхней части экрана. Чтобы выровнять их по горизонтали, оберните оба элемента в горизонтальный контейнер.

Чтобы добавить заголовок:

1. Нажмите + > Text > H1.
2. Выделив H1, откройте вкладку Design на правой панели и отредактируйте текст в поле Content.

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

1. На панели Layers нажмите меню с тремя точками на слое кнопки закрытия и выберите Wrap > Wrap in Horizontal Container.

2. Перетащите слой H1 в новый горизонтальный контейнер.

Чтобы выровнять два элемента:

1. Отрегулируйте размер кнопки закрытия и размер шрифта H1 так, чтобы они комфортно располагались на одной строке.
2. Выделив горизонтальный контейнер, задайте в правой панели выравнивание и распределение элементов, чтобы они выстраивались правильно.

5. Добавьте описание ценности

Короткая строка под заголовком объясняет пользователю, что он получит от подписки.

1. Нажмите + > Text > Body.
2. Выделив элемент body, отредактируйте текст в поле Content на вкладке Design.

6. Добавьте список возможностей

Список возможностей показывает, что входит в подписку. Каждая строка содержит иконку, заголовок и краткое описание.

Полный набор пресетов списков см. в разделе Элементы — List.

Чтобы добавить список возможностей:

1. Нажмите + > List и выберите пресет списка. Icon List — самый распространённый вариант для пейволов.
2. Выбрав каждую строку, отредактируйте заголовок и описание в поле Content.
3. Чтобы добавить или удалить строки, выберите список и используйте элементы управления строками на панели Layers.

7. Добавьте список продуктов

Список продуктов показывает варианты подписок, из которых пользователь может выбрать. Элемент Products отображает одну карточку на каждый продукт, назначенный экрану, и одна карточка автоматически помечается как выбранная по умолчанию.

Подробнее об управлении продуктами — в разделе Настройка покупок.

Чтобы добавить и настроить продукты:

1. Нажмите + > Products и выберите шаблон макета. Vertical List — самый распространённый вариант.
2. Выберите каждую карточку продукта на холсте и укажите продукт в выпадающем списке на вкладке Design. В списке отображаются все продукты, настроенные в дашборде Adapty.
3. Чтобы изменить выбранный по умолчанию продукт, выберите нужную карточку и включите Set as default product на вкладке Design.
4. Чтобы настроить значок скидки, разверните карточку продукта на панели Layers, выберите слой значка и отредактируйте его текст в поле Content. Скройте значок на других карточках, нажав значок глаза рядом с каждым слоем значка.

8. Добавьте кнопку покупки

Кнопка покупки запускает встроенную покупку для продукта, который пользователь выбрал на экране. Переменная products.selectedProduct всегда указывает на текущий выбранный продукт.

Чтобы добавить кнопку покупки:

1. Нажмите + > Buttons и выберите подходящий пресет кнопки.
2. Выделив кнопку, откройте вкладку Interactions в правой панели.
3. Нажмите Add trigger > On tap, затем нажмите Add action.
4. Установите Action в значение Purchase, а Product — в products.selectedProduct.

9. Добавьте ссылки в футер

Футер содержит ссылки на условия использования и политику конфиденциальности (обязательные требования сторов), а также кнопку для восстановления предыдущих покупок.

Чтобы добавить ссылки в футер:

1. Нажмите + > Buttons > Links. На экран добавится строка с кнопками Restore Purchases, Terms of Use и Privacy Policy.
2. На панели Layers выберите кнопку Terms of Use. Откройте вкладку Interactions — действие Open URL уже привязано. Нажмите на него и введите нужный URL.
3. Повторите то же самое для кнопки Privacy Policy, указав URL вашей политики конфиденциальности.
4. Кнопку Restore Purchases оставьте без изменений — её действие настроено заранее.

Следующие шаги

• Сохраните и опубликуйте флоу.
• Добавьте флоу в плейсмент, чтобы начать показывать его пользователям.