# HTML-код

Власний HTML зі скриптами та стилями всередині елемента: калькулятор, віджет сервісу, нестандартна верстка. Елемент стає в область екрана поруч з іншими елементами. Якщо ваш код має зайняти весь екран, виберіть вигляд екрана «HTML-код».

![Елемент «HTML-код»: картка бонусів на екрані, код, виходи та змінні](https://support.watbot.org/_media/uk/02-mini-apps/_images/html-element.webp?v=1791781231)

## Налаштування

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

Під налаштуваннями — довідка «Що доступно коду».

## Як працює код

Код працює в ізольованому фреймі: сесія, дані застосунку та решта екрана йому недоступні. Колір тексту фрейм бере з теми застосунку. У редакторі екрана фрейм показує результат і перезапускається після зміни коду; на схемі замість коду — заглушка.

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

## Виходи

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