# HTML-код

Свой HTML со скриптами и стилями внутри элемента: калькулятор, виджет сервиса, нестандартная вёрстка. Элемент встаёт в область экрана рядом с другими элементами. Если ваш код должен занять весь экран, выберите вид экрана «HTML-код».

![Элемент «HTML-код»: карточка бонусов на экране, код, выходы и переменные](https://support.watbot.ru/_media/ru/02-mini-apps/_images/html-element.webp?v=1791781230)

## Настройки

- **«Код»** — HTML до 100 000 символов. Скрипты и стили — внутри кода. У нового элемента в коде пример: заголовок «Привет!» и строка текста.
- **«Высота»** — «По содержимому»: подстраивается под код, в том числе когда он меняет содержимое сам. «Задать» — от 40 до 2000 пикселей, всё, что не поместится, прокручивается внутри элемента.
- **«Выходы»** — до 20. У выхода — «Ключ» (латиница, цифры, `_` и `-`) и «Название на схеме». Код вызывает выход по ключу: `app.event('next')`.
- **«Переменные, которые код может записать»** — до 50 имён. Остальные сервер не примет.

Под настройками — справка «Что доступно коду».

## Как работает код

Код работает в изолированном фрейме: сессия, данные приложения и остальной экран ему недоступны. Цвет текста фрейм берёт из темы приложения. В редакторе экрана фрейм показывает результат и перезапускается после правки кода; на схеме вместо кода — заглушка.

Что можно вызвать из кода — `app.event`, `app.variables.set`, хранилище `localStorage`, `app.openLink` — и как подставить переменную прямо в код, описано на странице [Код в приложении](https://support.watbot.ru/mini-apps/code#html-код-элемент-и-экран).

## Выходы

Каждый выход из «Выходов» — выход экрана с названием, которое вы задали (без названия — с ключом). Вместе с переходом код может записать разрешённые переменные: `app.event('use', {bonusUsed: '350'})`.