Что такое виджет-калькулятор
Виджет-калькулятор — это компактная самостоятельная версия полноценного калькулятора Calculate.Studio, которая работает прямо на вашей странице. Технически это iframe — элемент HTML, встраивающий одну страницу внутрь другой, — указывающий на облегчённую встраиваемую версию калькулятора, плюс однострочный абзац с указанием источника под ним. Iframe — это стандартный элемент HTML, поддерживаемый всеми современными браузерами, поэтому устанавливать ничего не нужно, и он не может конфликтовать с кодом вашего сайта.
Виджет — это тот же самый калькулятор, что работает на Calculate.Studio: те же проверенные формулы, те же мгновенные результаты, вычисляемые на стороне клиента, а для инструментов по здоровью и финансам — тот же дисклеймер. Посетители вводят свои числа и сразу видят результат, не покидая вашу страницу. Поскольку вычисление происходит в браузере посетителя, а не на сервере, виджет остаётся быстрым даже при высокой нагрузке, и никакие данные посетителя никуда не отправляются.
Встроить можно любой из 210 калькуляторов сайта. В галерее на calculate.studio/en/widgets представлены самые популярные — ИМТ, ипотека, кредит, проценты, сложные проценты, возраст, калории и средний балл (GPA), — а на странице каждого отдельного калькулятора рядом с кнопками «поделиться» есть кнопка Embed, которая показывает код именно для этого инструмента.
Как установить виджет — общий способ
Установка сводится к простому копированию и вставке. Код состоит из двух частей: iframe, отображающего калькулятор, и небольшого абзаца с указанием источника, который ведёт на полную версию калькулятора и на Calculate.Studio. Единственное условие бесплатного использования — сохранить эту строку с источником нетронутой: именно она позволяет программе оставаться бесплатной для всех.
- Откройте calculate.studio/en/widgets или откройте страницу любого калькулятора и нажмите кнопку </> Embed.
- Нажмите Copy code. Код будет скопирован в буфер обмена.
- В редакторе вашего сайта переключитесь в режим HTML (иногда его называют «код» или «источник») на странице, где должен появиться калькулятор.
- Вставьте код в то место, где должен отображаться калькулятор, затем сохраните и опубликуйте страницу.
- Просмотрите страницу. Калькулятор должен загрузиться и сразу начать считать — проверьте его один раз на примерных числах.
Инструкции для конкретных платформ
Большинство конструкторов сайтов принимают произвольный HTML через специальный блок или элемент, поэтому один и тот же код работает везде. Отличаются лишь названия элементов на разных платформах:
| Платформа | Куда вставить код |
|---|---|
| WordPress (блочный редактор) | Добавьте блок «Произвольный HTML» и вставьте туда код. |
| WordPress (классический редактор) | Переключите вкладку редактора с «Визуально» на «Текст» и вставьте код. |
| Wix | Добавьте элемент «Embed HTML» (Добавить → Embed code → Embed HTML) и вставьте код. |
| Squarespace | Добавьте блок «Code» в раздел страницы и вставьте код. |
| Shopify | В редакторе страницы или записи блога нажмите кнопку <> (Show HTML) и вставьте код. |
| Webflow | Добавьте компонент «Embed» и вставьте код. |
| Обычный HTML-сайт | Вставьте код прямо в HTML страницы, в том месте, где должен отображаться калькулятор. |
Размер, оформление и производительность
Код поставляется с разумными настройками по умолчанию: полная ширина (width="100%"), фиксированная высота, подобранная под количество полей ввода конкретного калькулятора, и лёгкая скруглённая рамка. Вы можете изменить значение высоты, если вашей теме нужен более высокий или низкий блок, а также изменить или убрать оформление рамки под свой дизайн. Ширина по умолчанию адаптивная, поэтому виджет работает на телефонах без каких-либо дополнительных настроек.
В iframe включён атрибут loading="lazy" — стандартный атрибут браузера, откладывающий загрузку виджета до тех пор, пока посетитель не прокрутит страницу почти до него. Это значит, что встраивание калькулятора практически не увеличивает время первоначальной загрузки страницы — браузер загружает виджет только тогда, когда он вот-вот станет видимым.
Сами страницы для встраивания помечены как noindex с канонической ссылкой на полную страницу калькулятора, что соответствует рекомендациям Google по встроенному и дублирующемуся контенту. Поэтому встраивание виджета не может создать проблему дублирования контента ни для вашего сайта, ни для нашего.
Единственное правило: сохраняйте ссылку на источник
Программа виджетов бесплатна и не требует регистрации благодаря одному условию: небольшой абзац с указанием источника под iframe — строка вида «[Название калькулятора] by Calculate.Studio» — должен оставаться на месте. Это текст размером 12 пикселей, который скромно располагается под виджетом и не конкурирует с вашим контентом.
Вы можете свободно менять размер iframe, оформление его рамки и размещать виджет в любом месте своего сайта, в том числе на коммерческих сайтах, в блогах и в клиентских проектах. Если нужный калькулятор не входит в основную галерею, на странице каждого калькулятора сайта есть своя кнопка Embed, так что доступны все 210 инструментов.
Какие калькуляторы лучше всего подходят для виджетов?
Лучший виджет для вашего сайта — тот, ради которого читатели иначе ушли бы с вашей страницы. Блоги о фитнесе и здоровье обычно встраивают калькуляторы ИМТ, калорий или TDEE. Сайты о недвижимости и личных финансах встраивают калькуляторы ипотеки, кредита и сложных процентов. Образовательные и студенческие сайты встраивают калькуляторы среднего балла (GPA) и процентов, а блоги общей тематики часто добавляют калькулятор возраста в вечнозелёные статьи.
Поскольку каждый виджет показывает компактную версию калькулятора со ссылкой на полную версию — включающую таблицы интерпретации, разобранные примеры и источники, — ваши читатели получают мгновенный ответ прямо на странице и путь к более глубокому изучению темы, если он им нужен.
Часто задаваемые вопросы
Виджет-калькулятор действительно бесплатный?
Да. Не требуется ни регистрация, ни API-ключ, нет ограничений по использованию и никакой платы. Единственное условие — сохранить на месте небольшую строку с указанием источника под виджетом, ведущую на Calculate.Studio.
Замедлит ли виджет мой сайт?
Нет. Iframe использует встроенную в браузер отложенную загрузку, поэтому он подгружается только тогда, когда посетитель прокручивает страницу почти до него, а вычисления полностью выполняются в браузере посетителя. Это практически не увеличивает время первоначальной загрузки страницы.
Можно ли встроить калькулятор на коммерческий или клиентский сайт?
Да. Виджеты можно бесплатно использовать на коммерческих сайтах, в блогах и в клиентских проектах при условии, что ссылка на источник под виджетом остаётся нетронутой.
Можно ли изменить размер или рамку виджета?
Да. Вы можете менять высоту iframe и оформление рамки под свой сайт. Ширина уже адаптивная (100%), поэтому она автоматически подстраивается под телефоны и узкие колонки.
Создаёт ли встраивание виджета проблему дублирующегося контента для SEO?
Нет. Страницы для встраивания помечены как noindex с канонической ссылкой на полную страницу калькулятора, что соответствует официальным рекомендациям Google, поэтому поисковые системы не считают виджет дублирующимся контентом на вашем сайте.
Источники
- MDN Web Docs — <iframe>: The Inline Frame element. Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
- MDN Web Docs — Lazy loading (loading attribute). Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
- Google Search Central — Consolidate duplicate URLs with canonicals. Google. https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
- Google Search Central — Block search indexing with noindex. Google. https://developers.google.com/search/docs/crawling-indexing/block-indexing
- WHATWG HTML Living Standard — The iframe element. https://html.spec.whatwg.org/multipage/iframe-embed-object.html