Собственная верстка In-App формы

In-app шаблон с собственной версткой — это форма, которая показывается внутри мобильного приложения в виде HTML-страницы, отрендеренной в WebView. Подходит для статичного информирования, анонсов и промо с промокодом.

Работает на версиях Mindbox SDK 2.14.1+.

Поддержка функций в шаблоне

Поддерживается

Не поддерживается

Форма с одним экраном с заголовком, описанием, картинкой и кнопками;
Показ на весь экран устройства, в виде снекбара или модального экрана по центру;
Переход по внешней ссылке, диплинк или универсальной ссылке;
Копирование текста в буфер обмена (например, промокод);
Сбор аналитики при клике и закрытии формы;
Загрузка собственных шрифтов через @import;
Базовые CSS-анимации (появление, fade-in);
Видео (Mindbox SDK 2.15.0+).

Сбор контактов из полей формы;
Многоэкранные формы;
Экран спасибо;
Собственный код JavaScript. Для интерактивных элементов используйте атрибуты data-popmechanic-*;
Динамический контент с персонализацией по клиенту;
Альбомная ориентация.

Рекомендации и требования к видео

Видеофайл должен быть загружен в хранилище или на видеохостинг;
Чем меньше размер видео, тем быстрее оно прогрузиться в In-App;
Рекомендованный формат — MP4 в H264. Это универсальный формат, который поддерживается большинством платформ.

Как перейти к настройке

Создайте новый In-App по инструкции;
На экране выбора шаблона выберите «Собственная верстка»;
Перейдите в редактирование шаблона в блоке «Внешний вид формы» по кнопке «Изменить»;
Добавьте свой код HTML и CSS:

HTML

Общие правила

Верстка начинается сразу с <div class="popmechanic-reset" id="popmechanic-form">. Не нужно добавлять <!DOCTYPE>, <html>, <head> — WebView уже подготовлен;
Все интерактивные элементы управляются атрибутами data-*, а не классами. Классы — только для стилей;
К любому элементу, клик по которому должен закрывать форму, добавляйте data-popmechanic-close;
На кнопках, клики по которым нужно учитывать в аналитике, используйте атрибуты data-popmechanic-inapp-* — см. таблицу ниже.

Атрибуты действий

Атрибут	Что делает	Событие в аналитике	Когда использовать
`data-popmechanic-close`	Закрывает механику	Закрытие	Любой элемент, клик по которому должен закрыть форму: оверлей, кнопка «Позже / Не сейчас», крестик
`data-popmechanic-inapp-follow="URL"`	Открывает URL (обычная ссылка, диплинк, универсальная ссылка)	Клик типа follow	Призыв к действию (CTA): «Перейти», «Подробнее», «Купить»
`data-popmechanic-inapp-copy="TEXT"`	Копирует текст в буфер обмена	Клик типа copy	Многоразовый промокод, короткий код
`data-popmechanic-inapp-click=` `'{"intentPayload":"...","value":"...",` "$type":"redirectUrl"}'`	Отправляет событие с payload в приложение	Клик типа custom	Когда нужна кастомная обработка события на стороне приложения. Поддерживаются payload для `redirectUrl` и копирования промокода

Базовая структура

<div class="popmechanic-reset" id="popmechanic-form">
    <!-- Затемнение за формой. Клик по нему закрывает механику. -->
    <div class="popmechanic-overlay" data-popmechanic-close></div>

    <!-- Основной контейнер механики (снекбар / модальное окно / полный экран) -->
    <div class="popmechanic-main">
        <div class="popmechanic-inner">
            <div class="popmechanic-title">
                Заголовок
            </div>

            <div class="popmechanic-image-container">
                <div class="popmechanic-image"></div>
            </div>

            <div class="popmechanic-description">
                Текст описания
            </div>

            <div class="popmechanic-buttons">
                <button class="popmechanic-button popmechanic-button--primary"
                        data-popmechanic-inapp-follow="<https://example.com>">
                    Основное действие
                </button>

                <button class="popmechanic-button popmechanic-button--secondary"
                        data-popmechanic-close>
                    Отказ
                </button>
            </div>
        </div>
    </div>
</div>

Готовые примеры форм с добавленными атрибутами и стилями.

Частые ошибки

На кнопке нет атрибута data-popmechanic-inapp-*. Если на кнопке не стоит ни один из атрибутов data-popmechanic-inapp-* — клик не попадет в статистику.
На кнопке закрытия нет data-popmechanic-close. Без этого атрибута кнопки «Позже», «Не сейчас» и крестик не закроют механику — пользователь окажется заблокирован на экране in-app.

CSS

Позиционирование формы

По умолчанию контейнер шаблона занимает весь экран устройства. Дальше позиционирование блока popmechanic-main определяется CSS. Три типовых варианта:

Снекбар:

#popmechanic-form .popmechanic-main {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px 20px 0 0;
    padding: 24px 16px;
    padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
    background: #FFFFFF;
    z-index: 2;
}

Модальное окно по центру:

#popmechanic-form .popmechanic-main {
    position: absolute;
    top: 50%;
    left: 16px;
    right: 16px;
    transform: translateY(-50%);
    border-radius: 20px;
    padding: 24px;
    background: #FFFFFF;
    z-index: 2;
}

Полный экран:

#popmechanic-form .popmechanic-main {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: calc(env(safe-area-inset-top) + 24px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
    padding-left: 16px;
    padding-right: 16px;
    background: #FFFFFF;
    z-index: 2;
}

Адаптация под размеры экрана

Поддерживается через @media-запросы:

/* Базовые стили — для большинства смартфонов */
#popmechanic-form .popmechanic-title {
    font-size: 20px;
}

/* Для очень маленьких экранов (iPhone SE и подобные) */
@media (max-width: 360px) {
    #popmechanic-form .popmechanic-title {
        font-size: 18px;
    }
}

Кастомные шрифты

Подключение через @import из Google Fonts и других источников:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

#popmechanic-form {
    font-family: 'Montserrat', sans-serif;
}

Анимации

Анимация закрытия на данный момент не поддерживается.

Анимация появления реализуется через CSS @keyframes. Пример для снекбара:

#popmechanic-form .popmechanic-overlay {
    animation: popmechanic-fade-in 0.4s ease-out both;
}

#popmechanic-form .popmechanic-main {
    animation: popmechanic-slide-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform;
}

@keyframes popmechanic-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes popmechanic-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Приоритизация системной настройки "Уменьшить движение" */
@media (prefers-reduced-motion: reduce) {
    #popmechanic-form .popmechanic-main,
    #popmechanic-form .popmechanic-overlay {
        animation: none;
    }
}

Примеры готовых шаблонов

Скопируйте код в редактор и адаптируйте под свою задачу.

Форма на полный экран

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

custom-inapp-example-fullscreen

HTML

CSS

  <div class="popmechanic-reset" id="popmechanic-form">
      <div class="popmechanic-main">
          <div class="popmechanic-image-container">
              <div class="popmechanic-image"></div>
          </div>
          <div class="popmechanic-content">
              <div class="popmechanic-title">Умный поиск —<br>встречайте</div>
              <div class="popmechanic-description">
                  Опишите, что ищете, обычными словами — мы подберём лучшие варианты
              </div>
          </div>
          <div class="popmechanic-buttons">
              <button class="popmechanic-button popmechanic-button--primary"
                      data-popmechanic-inapp-follow="myapp://smart-search">
                  Попробовать
              </button>
              <button class="popmechanic-button popmechanic-button--tertiary"
                      data-popmechanic-close>
                  Позже
              </button>
          </div>
      </div>
  </div>

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
   
  #popmechanic-form {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      font-family: 'Inter', -apple-system, sans-serif;
  }
  #popmechanic-form .popmechanic-main {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      display: flex;
      flex-direction: column;
      padding-top: calc(constant(safe-area-inset-top) + 44px);
      padding-top: calc(env(safe-area-inset-top) + 44px);
      padding-bottom: calc(constant(safe-area-inset-bottom) + 20px);
      padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
      padding-left: 20px;
      padding-right: 20px;
      background: #FFFFFF;
      animation: pm-fade-in 0.4s ease-out both;
  }
  #popmechanic-form .popmechanic-image-container {
      flex: 1 1 auto;
      min-height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  #popmechanic-form .popmechanic-image {
      width: 100%;
      max-width: 280px;
      aspect-ratio: 1 / 1;
      border-radius: 32px;
      background-size: cover;
      background-position: center;
      /* Временный градиент. Замените на картинку с помощью параметра: background-image: url('...'); */
      background: linear-gradient(135deg, #FFC94D 0%, #FF7A29 50%, #E03E6B 100%);
      position: relative;
      overflow: hidden;
  }
  /* Декоративные кружки на временном градиенте — удалите, когда поставите картинку */
  #popmechanic-form .popmechanic-image::before,
  #popmechanic-form .popmechanic-image::after {
      content: '';
      position: absolute;
      border-radius: 50%;
  }
  #popmechanic-form .popmechanic-image::before {
      width: 120px;
      height: 120px;
      top: 20px;
      right: -30px;
      background: rgba(255, 255, 255, 0.22);
  }
  #popmechanic-form .popmechanic-image::after {
      width: 80px;
      height: 80px;
      bottom: 30px;
      left: 20px;
      background: rgba(255, 255, 255, 0.18);
  }
  #popmechanic-form .popmechanic-content {
      margin-top: 28px;
  }
  #popmechanic-form .popmechanic-title {
      font-size: 28px;
      line-height: 1.2;
      font-weight: 700;
      color: #111;
      text-align: center;
  }
  #popmechanic-form .popmechanic-description {
      margin-top: 12px;
      font-size: 16px;
      line-height: 1.45;
      color: #6C6C70;
      text-align: center;
  }
  #popmechanic-form .popmechanic-buttons {
      margin-top: 28px;
  }
  #popmechanic-form .popmechanic-button {
      width: 100%;
      padding: 16px;
      border-radius: 14px;
      box-sizing: border-box;
      font-family: inherit;
      font-weight: 600;
      font-size: 16px;
      border: none;
      cursor: pointer;
  }
  #popmechanic-form .popmechanic-button.popmechanic-button--primary {
      background: #111;
      color: #FFFFFF;
  }
  #popmechanic-form .popmechanic-button.popmechanic-button--tertiary {
      margin-top: 4px;
      background: transparent;
      color: #8A8A8E;
  }
   
  @keyframes pm-fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
      #popmechanic-form .popmechanic-main {
          animation: none;
      }
  }

Снекбар с сеткой преимуществ Feature grid

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

custom-inapp-example-snackbar

HTML

CSS

  <div class="popmechanic-reset" id="popmechanic-form">
      <div class="popmechanic-overlay" data-popmechanic-close></div>
      <div class="popmechanic-main">
          <button class="popmechanic-close-x"
                  aria-label="Закрыть"
                  data-popmechanic-close>×</button>
          <div class="popmechanic-inner">
              <div class="popmechanic-title">Premium-подписка</div>
              <div class="popmechanic-description">Всё лучшее — без ограничений</div>
   
              <div class="popmechanic-features">
                  <div class="popmechanic-feature">
                      <div class="popmechanic-feature-icon">🎬</div>
                      <div class="popmechanic-feature-label">Новинки кино</div>
                  </div>
                  <div class="popmechanic-feature">
                      <div class="popmechanic-feature-icon">📺</div>
                      <div class="popmechanic-feature-label">Эксклюзивные сериалы</div>
                  </div>
                  <div class="popmechanic-feature">
                      <div class="popmechanic-feature-icon">⚡</div>
                      <div class="popmechanic-feature-label">Без рекламы</div>
                  </div>
                  <div class="popmechanic-feature">
                      <div class="popmechanic-feature-icon">📥</div>
                      <div class="popmechanic-feature-label">Загрузка офлайн</div>
                  </div>
              </div>
   
              <div class="popmechanic-buttons">
                  <button class="popmechanic-button popmechanic-button--primary"
                          data-popmechanic-inapp-follow="myapp://subscription/premium">
                      Попробовать 7 дней бесплатно
                  </button>
              </div>
          </div>
      </div>
  </div>

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
   
  #popmechanic-form {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      font-family: 'Inter', -apple-system, sans-serif;
  }
  #popmechanic-form .popmechanic-overlay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      background: rgba(0, 0, 0, 0.4);
      animation: pm-fade-in 0.3s ease-out both;
  }
  #popmechanic-form .popmechanic-main {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: 32px 20px 20px;
      padding-bottom: calc(constant(safe-area-inset-bottom) + 20px);
      padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
      border-radius: 24px 24px 0 0;
      background: #FFFFFF;
      animation: pm-slide-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  #popmechanic-form .popmechanic-close-x {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      font-size: 26px;
      line-height: 1;
      color: #8A8A8E;
      cursor: pointer;
      padding: 0;
      font-family: inherit;
  }
  #popmechanic-form .popmechanic-title {
      font-size: 22px;
      line-height: 1.25;
      font-weight: 700;
      color: #111;
      text-align: center;
      padding: 0 32px;
  }
  #popmechanic-form .popmechanic-description {
      margin-top: 6px;
      font-size: 14px;
      line-height: 1.4;
      color: #8A8A8E;
      text-align: center;
      padding: 0 16px;
  }
  #popmechanic-form .popmechanic-features {
      margin-top: 24px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
  }
  #popmechanic-form .popmechanic-feature {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 18px 10px;
      background: #F5F5F7;
      border-radius: 16px;
      text-align: center;
  }
  #popmechanic-form .popmechanic-feature-icon {
      font-size: 28px;
      line-height: 1;
  }
  #popmechanic-form .popmechanic-feature-label {
      font-size: 13px;
      line-height: 1.3;
      font-weight: 500;
      color: #1C1C1E;
  }
  #popmechanic-form .popmechanic-buttons {
      margin-top: 20px;
  }
  #popmechanic-form .popmechanic-button {
      width: 100%;
      padding: 16px;
      border-radius: 14px;
      box-sizing: border-box;
      font-family: inherit;
      font-weight: 600;
      font-size: 16px;
      border: none;
      cursor: pointer;
  }
  #popmechanic-form .popmechanic-button.popmechanic-button--primary {
      background: #111;
      color: #FFFFFF;
  }
   
  @keyframes pm-slide-up {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
  }
  @keyframes pm-fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
      #popmechanic-form .popmechanic-main,
      #popmechanic-form .popmechanic-overlay {
          animation: none;
      }
  }

Модальное окно в центре экрана с промокодом

Когда использовать: промоакция с многоразовым публичным промокодом и переходом в каталог.
Что внутри: модальное окно с оверлеем, бейдж, промокод, две кнопки — копирование кода (data-popmechanic-inapp-copy) и переход в каталог (data-popmechanic-inapp-follow).

custom-inapp-example-modal

HTML

CSS

  <div class="popmechanic-reset" id="popmechanic-form">
      <div class="popmechanic-overlay" data-popmechanic-close></div>
      <div class="popmechanic-main">
          <button class="popmechanic-close-x"
                  aria-label="Закрыть"
                  data-popmechanic-close>×</button>
          <div class="popmechanic-inner">
              <div class="popmechanic-badge">Только сегодня</div>
              <div class="popmechanic-title">−20% на всё</div>
              <div class="popmechanic-description">
                  Скопируйте промокод и примените при оформлении заказа
              </div>
   
              <div class="popmechanic-promo">
                  <div class="popmechanic-promo-code">SPRING20</div>
              </div>
   
              <div class="popmechanic-buttons">
                  <button class="popmechanic-button popmechanic-button--primary"
                          data-popmechanic-inapp-copy="SPRING20">
                      Скопировать промокод
                  </button>
                  <button class="popmechanic-button popmechanic-button--secondary"
                          data-popmechanic-inapp-follow="myapp://catalog/sale">
                      Перейти к каталогу
                  </button>
              </div>
          </div>
      </div>
  </div>

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
   
  #popmechanic-form {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      font-family: 'Inter', -apple-system, sans-serif;
  }
  #popmechanic-form .popmechanic-overlay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      background: rgba(0, 0, 0, 0.5);
      animation: pm-fade-in 0.3s ease-out both;
  }
  #popmechanic-form .popmechanic-main {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: calc(100% - 32px);
      max-width: 360px;
      box-sizing: border-box;
      padding: 28px 24px 24px;
      border-radius: 24px;
      background: #FFFFFF;
      animation: pm-pop-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  #popmechanic-form .popmechanic-close-x {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      font-size: 26px;
      line-height: 1;
      color: #8A8A8E;
      cursor: pointer;
      padding: 0;
      font-family: inherit;
  }
  #popmechanic-form .popmechanic-badge {
      display: inline-block;
      padding: 5px 12px;
      border-radius: 999px;
      background: #FFF1E5;
      color: #FF6B00;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.3px;
      text-transform: uppercase;
  }
  #popmechanic-form .popmechanic-inner {
      text-align: center;
  }
  #popmechanic-form .popmechanic-title {
      margin-top: 12px;
      font-size: 32px;
      line-height: 1.15;
      font-weight: 700;
      color: #111;
      letter-spacing: -0.5px;
  }
  #popmechanic-form .popmechanic-description {
      margin-top: 10px;
      font-size: 14px;
      line-height: 1.45;
      color: #6C6C70;
      padding: 0 8px;
  }
  #popmechanic-form .popmechanic-promo {
      margin-top: 20px;
      padding: 16px;
      border: 1.5px dashed #D1D1D6;
      border-radius: 14px;
      background: #FAFAFA;
  }
  #popmechanic-form .popmechanic-promo-code {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 3px;
      color: #111;
      font-family: 'Inter', -apple-system, sans-serif;
  }
  #popmechanic-form .popmechanic-buttons {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
  }
  #popmechanic-form .popmechanic-button {
      width: 100%;
      padding: 15px;
      border-radius: 12px;
      box-sizing: border-box;
      font-family: inherit;
      font-weight: 600;
      font-size: 15px;
      border: none;
      cursor: pointer;
  }
  #popmechanic-form .popmechanic-button.popmechanic-button--primary {
      background: #FF6B00;
      color: #FFFFFF;
  }
  #popmechanic-form .popmechanic-button.popmechanic-button--secondary {
      background: transparent;
      color: #111;
      border: 1.5px solid #E5E5EA;
  }
   
  @keyframes pm-pop-in {
      from {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.92);
      }
      to {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
      }
  }
  @keyframes pm-fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
      #popmechanic-form .popmechanic-main,
      #popmechanic-form .popmechanic-overlay {
          animation: none;
      }
  }

Была ли статья полезна?

Почему не показывается In-App

Как добавить In-App «Авторизуйтесь и получите промокод на заказ»

Собственная верстка In-App формы

Поддержка функций в шаблонеПоддержка функций в шаблоне

Как перейти к настройкеКак перейти к настройке

HTMLHTML

Общие правилаОбщие правила

Атрибуты действийАтрибуты действий

Базовая структураБазовая структура

Частые ошибкиЧастые ошибки

CSSCSS

Позиционирование формыПозиционирование формы

Адаптация под размеры экранаАдаптация под размеры экрана

Кастомные шрифтыКастомные шрифты

АнимацииАнимации

Примеры готовых шаблоновПримеры готовых шаблонов

Форма на полный экранФорма на полный экран

Снекбар с сеткой преимуществ Feature gridСнекбар с сеткой преимуществ Feature grid

Модальное окно в центре экрана с промокодомМодальное окно в центре экрана с промокодом

Была ли статья полезна?

Поддержка функций в шаблоне

Как перейти к настройке

HTML

Общие правила

Атрибуты действий

Базовая структура

Частые ошибки

CSS

Позиционирование формы

Адаптация под размеры экрана

Кастомные шрифты

Анимации

Примеры готовых шаблонов

Форма на полный экран

Снекбар с сеткой преимуществ Feature grid

Модальное окно в центре экрана с промокодом