> For the complete documentation index, see [llms.txt](https://docs.wfolio.pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wfolio.pro/site/blocks/integration/calculator.md).

# Как добавить калькулятор

На сайт можно добавить сторонние калькуляторы через HTML-блок. Примеры сервисов:

* **stepFORM** ([stepform.io](https://stepform.io))\
  Бесплатно: 50 заявок и 5000 просмотров в месяц.\
  Есть шаблоны калькуляторов для [заказа фотосессии](https://stepform.io/dashboard/template/1643897707) и для [цифровой печати](https://stepform.io/dashboard/template/1570136963).\
  [Как настроить формулу?](https://stepform.io/ru/docs/nastroyka-formuly)\
  [Тарифы](https://stepform.io/dashboard/tariffs/79635)
* **ucalc.pro** ([ucalc.pro](https://ucalc.pro/))\
  Пробный период на 14 дней.\
  [Как настроить формулу?](https://ucalc.pro/help/formula/conditional-expressions)\
  [Тарифы](https://ucalc.pro/pricing)
* Или другой сервис для создания калькулятора на сайт.

#### Как добавить на сайт

* Зарегистрируйтесь в одном из сервисов выше или в любом другом.
* Создайте калькулятор и настройте формулу расчета цены и внешний вид виджета.
* Получите **HTML-код** калькулятора для вставки на сайт. Пример того, как может выглядеть код:\
  `<div class="stepform_cwflPv3 rnd_1808283061"></div>`\
  `<script>`\
  `КОД ДЛЯ РАСЧЕТОВ`\
  `</script>`
* На составной странице нажмите <mark style="background-color:blue;">**(+)**</mark> для добавления нового блока.

<figure><img src="/files/iRw6qH4TRsDzAmaJkesX" alt=""><figcaption></figcaption></figure>

* Перейдите во вкладку **«Виджеты»** и выберите нужный HTML-блок.

<figure><img src="/files/dOCyhQ3zOdzmUVGuDu3v" alt=""><figcaption></figcaption></figure>

* **Вставьте** полученный **код в HTML блок**. Сохраните изменения.

<figure><img src="/files/NhJGFX9n5MDNrXL4bIyp" alt=""><figcaption></figcaption></figure>