Каждый, кто делал лендинги или небольшие сайты на коленке, сталкивался с дилеммой: как красиво вывести отзывы клиентов с Яндекс Карт, если бюджет ограничен, а заказчик просит «как у всех, но уникально»?

На первый взгляд, есть два очевидных пути, и у обоих есть серьезные недостатки.

Способ №1. Официальный виджет Яндекса.

Это просто, бесплатно и работает «из коробки». Но есть фатальный минус: он загружается в iframe. Это как черный ящик — вы не можете повлиять на его внешний вид через CSS, нет никаких настроек стилизации. Получается ситуация: «Имеем то, что имеем». Для сайта, где важен дизайн, это часто становится проблемой.

Способ №2. Виджет от сторонних сервисов (например, smartwidgets.ru).

Здесь ситуация лучше: виджет внедряется скриптом прямо в DOM-дерево. Это значит, что вы можете гибко настроить его отображение в панели управления и, при желании, «допилить» стили через CSS, вписав в любой дизайн. Но и тут кроется подвох: бесплатный тариф имеет жесткое ограничение — всего 300 показов в месяц. Если сайт популярный, через пару недель виджет просто перестанет показывать отзывы, оставив пустое место на странице.

Наше решение: подстраховка 2-в-1

Я не стал выбирать меньшее из зол и реализовал систему автопереключения. Идея проста и надежна:

1. Основой мы ставим красивый и кастомизируемый виджет от smartwidgets.ru.

2. Если он исчерпывает лимит показов за месяц и перестает загружаться, в дело вступает «тяжелая артиллерия».

3. На его месте автоматически появляется стандартный виджет Яндекс. Да, он менее гибкий в плане дизайна, но он бесплатный и безлимитный.

4. Как только начинается новый месяц, и лимиты smartwidgets обнуляются, сайт снова переключается на основной (красивый) вариант.

Таким образом, получаем идеальный баланс: красивое оформление и 100% гарантия, что место под отзывы никогда не будет пустовать. 

Код для вставки:

<!-- SmartWidgets -->
				<script src="https://res.smartwidgets.ru/app.js" async></script>
				<div class="sw-app" data-app="[000000000000000]"></div>

				<!-- Yandex Reviews (Hidden by default) -->
				<div id="yandex_reviews" style="display:none; height:700px; position:relative; overflow:hidden; margin-bottom:20px;">
					<iframe style="width:100%; height:100%; border:1px solid #e6e6e6; border-radius:8px; box-sizing:border-box" 
							src="https://yandex.ru/maps-reviews-widget/[000000000000000]?comments"></iframe>
					<a href="https://yandex.ru/maps/org/relaks_tur/[000000000000000]/" 
					   target="_blank" 
					   style="box-sizing:border-box; text-decoration:none; color:#b3b3b3; font-size:10px; font-family:YS Text,sans-serif; padding:0 20px; position:absolute; bottom:8px; width:100%; text-align:center; left:0; overflow:hidden; text-overflow:ellipsis; display:block; max-height:14px; white-space:nowrap; padding:0 16px;">
					   Компания на карте — Яндекс Карты
					</a>
				</div>

				<script>
				(function() {
					const swApp = document.querySelector('.sw-app');
					const yandexReviews = document.getElementById('yandex_reviews');
					let checkInitiated = false;

					// Используем MutationObserver для отслеживания загрузки контента SmartWidgets
					const observer = new MutationObserver((mutations) => {
						if (checkInitiated) return;
						
						const reviewsList = swApp.querySelector('.sw-review-list');
						if (reviewsList) {
							checkInitiated = true;
							// Если внутри списка есть элементы, значит виджет работает
							if (reviewsList.children.length > 0) {
								console.log("SmartWidgets loaded successfully");
								observer.disconnect();
							} else {
								console.log("SmartWidgets is empty, switching to Yandex");
								switchToYandex();
							}
						}
					});

					if (swApp) {
						observer.observe(swApp, { childList: true, subtree: true });
					}

					// Таймаут 5 секунд на случай, если скрипт не загрузился или заблокирован
					setTimeout(() => {
						if (!checkInitiated) {
							console.log("SmartWidgets timeout or script failed, checking status...");
							const reviewsList = swApp ? swApp.querySelector('.sw-review-list') : null;
							if (!reviewsList || reviewsList.children.length === 0) {
								switchToYandex();
							}
						}
					}, 5000);

					function switchToYandex() {
						if (swApp) swApp.style.display = 'none';
						if (yandexReviews) yandexReviews.style.display = 'block';
						observer.disconnect();
					}
				})();
				</script>

Пояснение по коду:

Данный код нужно просто вставить туда, где хотите видеть отзывы, но заменить [000000000000] в Яндексе на свой id, а в смартвиджете на токен. Ну и всё, радуемся красивым отзывам 😁