BITSPARK / Статьи / Дизайн и элементы сайта
Виджет на сайте: что это и что проверить до запуска
Коротко: виджет на сайте в этой статье - блок чужого сервиса внутри вашей страницы: карта, видеоплеер, чат, обратный звонок, отзывы, оплата, капча. web.dev называет такой блок third-party embed (встраиваемое стороннее содержимое). В страницу он попадает тегом iframe или тегом script. web.dev пишет, что такие блоки могут влиять на скорость страницы, и называет приёмы загрузки. Заказчику остаётся решить, какие виджеты нужны, и спросить подрядчика, как подключён каждый.
Ниже: что такое виджет, чем различаются iframe и script, что web.dev и MDN пишут о цене виджета для страницы, какие приёмы загрузки названы и что MDN говорит о cookie от встроенного содержимого. В конце - решения для шага разработки, вопросы подрядчику и проверки перед запуском.
Страницы источников открыты 06.10.2026. web.dev, MDN (iframe, сторонние cookie, проверка целостности) и Chrome for Developers написаны на английском: цитаты даны в оригинале с переводом, перевод наш. Страница MDN о script - на русском, с пометкой о переводе сообществом. На страницах web.dev о сторонних блоках стоят пометки Last updated 2019 и 2021 года. Поэтому цифры ниже даны с годом страницы.
Статья не обзор сервисов-виджетов: цен, установки конкретного чата или мессенджера и сбора заявок в ней нет. Поставщики названы там, где их называют источники: Яндекс Карты, YouTube и Google Maps. Пример вымышленный: веломастерская с сайтом example.ru.
Что такое виджет на сайте?
Коротко: определения слова виджет в источниках статьи нет, поэтому в статье оно значит блок чужого сервиса внутри вашей страницы. web.dev описывает такое содержимое двумя признаками: написано не вами и отдаётся с серверов третьей стороны. Для блока страница использует термин third-party embed, для скрипта - third-party JavaScript.
Виджет в этой статье - блок чужого сервиса, показанный внутри вашей страницы. Карта организации, видеоплеер, окно чата, форма обратного звонка, лента отзывов, платёжная форма и капча выглядят как часть страницы. Код блока написан поставщиком сервиса. Это определение - сводка автора статьи: ни одна из страниц-источников его не даёт. Слово widget на них встречается без определения («chat widgets», «social media widgets», «sign-in widget»), а Яндекс называет виджетами свои инструменты: Виджет Яндекс Карт и Виджет отзывов.
Что вставлено в страницу со стороны, web.dev описывает через два признака. Страница о встраиваемом содержимом называет third-party embed любым содержимым вашего сайта, которое «Not authored by you» (перевод наш: написано не вами) и «Served from third-party servers» (перевод наш: отдаётся с серверов третьей стороны). Примеры там же:
«The most common examples of third-party content embeds are video players, social-media feeds, maps, and advertisements.» Перевод наш: самые распространённые примеры встраиваемого стороннего содержимого - видеоплееры, ленты соцсетей, карты и реклама.
- web.dev, Best practices for using third-party embeds | Articles | web.dev, страница 2021-10-05
Другая страница web.dev, о сторонних скриптах (2019-08-13), даёт то же определение для скрипта и перечисляет, для чего сайты их подключают: кнопки публикации в соцсетях, видеоплееры, чаты, рекламные iframe, аналитика, A/B-тесты, вспомогательные библиотеки. Для вашей страницы из списка важны блоки, которые видит посетитель. Аналитика и A/B-тесты здесь не разбираются. Страница добавляет оценку: сторонние скрипты дают возможности, но «They also affect privacy, security, and page behavior» (перевод наш: они также влияют на приватность, безопасность и поведение страницы).
Для заказчика из определения следует одно: у блока есть автор и сервер вне вашего сайта. Что с этим делать, зависит от способа встраивания.
Как виджет встраивается: через iframe или script?
Коротко: сервис выдаёт код для вставки, и это либо тег iframe, либо тег script. MDN: iframe встраивает в текущую страницу другой документ, script подключает исполняемый код JavaScript. web.dev пишет, что встраиваемое содержимое «typically» грузят через iframe, а часть поставщиков даёт script, который сам вставляет iframe. В таблице Яндекса способ назван для каждого инструмента.
Код для вставки - несколько строк, которые сервис показывает владельцу сайта. Яндекс пишет, что «код для вставки на сайт» получают по клику на кнопку «Поделиться» (страница о Виджете Яндекс Карт). Подрядчик помещает код в нужное место страницы.
iframe. Это рамка: внутри вашей страницы показан отдельный документ поставщика. MDN определяет элемент так:
«The <iframe> HTML element represents a nested browsing context, embedding another document into the current one.» Перевод наш: элемент iframe представляет вложенный контекст просмотра: он встраивает в текущий документ другой документ.