---
title: "Медиа для онбординга"
description: "Создавайте привлекательные онбординги в Adapty с изображениями, видео, анимированными графиками и пользовательскими фонами."
---

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

## Изображения и видео \{#images-and-videos\}

Изображения и видео отлично подходят для превью функций и туров по приложению. Показать пользователям, что они получат, эффективнее, чем просто описать это словами.

Чтобы загрузить медиа:

1. Нажмите **Add** в верхнем левом углу.
2. Перейдите в **Media & Display** и выберите **Image/Video**.
3. Нажмите на область загрузки справа и выберите изображение или видео.

  <img src="/assets/shared/img/onboarding-media.gif"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Поддерживаемые форматы и размеры \{#supported-formats-and-size\}

| Параметр              | Подробности                     |
|-----------------------|---------------------------------|
| Расширения            | PNG, JPG, JPEG, WEBP, MP4, WEBM |
| Максимальный размер   | 15 МБ                           |
| Максимальное разрешение | 1920x1920                     |

Если вы хотите добавить анимированный элемент в неподдерживаемом формате (например, Lottie), конвертируйте его в видео (например, с помощью [этого инструмента](https://www.lottielab.com/lottie/lottie-to-video)) и вставьте как видео.

## Анимированные графики \{#animated-charts\}

Графики — это анимации, которые визуализируют результаты и персонализируют пользовательский опыт в ваших онбордингах. Чтобы добавить график:

1. Нажмите **Add** в верхнем левом углу.
2. Перейдите в **Media & Display** и выберите **Chart**.
3. Настройте график справа:
   - **Type**: выберите тип кривой. Обратите внимание, что тип кривой не связан напрямую со значениями.
   - **Left** и **Right badges**: задайте названия начальной и конечной точек графика.
   - **X Labels** и **Date Range**: по умолчанию на оси X отображаются даты. Можно настроить диапазон дат или указать произвольные значения.
   - **Animation Duration**: задайте длительность анимации в соответствии с вашим дизайном.

:::tip
Используйте [переменные](onboarding-variables) для динамической визуализации данных в графиках.
:::

  <img src="/assets/shared/img/chart-onboarding.png"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Настройка медиа \{#media-customization\}

Помимо базовой [настройки расположения элементов](onboarding-layout#element-layout), вы можете дополнительно изменить внешний вид изображений, видео и графиков:

1. Выберите элемент слева.
2. Перейдите в **Styles** в правом меню.
3. В зависимости от типа элемента доступны следующие параметры:
   - **Image/Video**: ширина, высота, скругление, прозрачность, выравнивание.
   - **Chart**: цвет и ширина линии, отступы бейджа, скругление, шрифт и цвет, шрифт и цвет оси X.

## Удаление медиа \{#delete-media\}

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

- **Удалить медиаэлемент**: щёлкните правой кнопкой мыши по медиаэлементу слева и выберите **Delete**.
- **Удалить медиафайл**: нажмите на превью медиа справа. Откроется область для загрузки нового файла.

  <img src="/assets/shared/img/onboarding-delete.gif"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>