Виджет рейтинга для сайта

Виджет рейтинга показывает TrustScore компании на внешнем сайте бренда: балл, число отзывов, ссылка на профиль на вашей площадке. Источник данных — ваш сервис отзывов, не статичная картинка «5 звёзд», нарисованная в Photoshop. Если виджет не обновляется после нового одобренного отзыва, для бизнеса он бесполезен, а для вас — источник тикетов.

Контекст продукта: сервис отзывов, профили и отзывы — отзывы о сайтах, формула выдачи — рейтинг компаний.

Как обычно встраивают

Бренд получает код: скрипт или iframe с ID профиля. Вставляет перед закрывающим body или в сайдбар. На https-сайте виджет тоже только https. Смешение протоколов даёт пустой блок без понятной ошибки — классика первого дня.

1. Скопировать код из кабинета представителя или из админки.
2. Вставить на страницу «О компании» или в футер.
3. Проверить, что балл совпадает с профилем на площадке.
4. Опубликовать тестовый отзыв, одобрить, убедиться, что виджет сменил цифру (с учётом кэша).

Кэш и актуальность

Кэш на 5–15 минут нормален. Кэш на сутки — уже вопрос. Если кэшируете агрессивно, дайте в кабинете кнопку «сбросить кэш виджета» после модерации спорного отзыва. Иначе бренд будет скриншотить расхождение и писать «у вас баг».

CDN и браузерный кэш скрипта версиируйте query-параметром при обновлении виджета, чтобы старый JS не жил вечно у клиентов.

Дизайн и адаптив

Два-три размера: компактный (балл + звёзды), расширенный (балл + число + ссылка), возможно бейдж. Не требуйте от виджета тащить ленту из пятидесяти отзывов на чужой сайт — это тяжело и ломает вёрстку клиента. Полная лента живёт на вашей карточке.

Цвета: либо нейтральные, либо CSS-переменные под бренд. Жёстко зашитый кислотный стиль на сайте юристов выглядит чужеродно. Тёмная тема сайта-клиента — проверьте читаемость текста виджета заранее.

CORS, CSP и безопасность

Если виджет ходит XHR/fetch на ваш домен, настройте CORS осознанно: не «*» на всю админку, а отдачу публичного API рейтинга. iframe проще с изоляцией, но хуже стыкуется с высотой. Документируйте оба варианта, если даёте.

CSP у клиента может резать ваш скрипт — в инструкции к виджету напишите, какие домены добавить. Это снимает половину «у нас пусто» без доступа к их серверу.

ID профиля не должен позволять вытащить приватные черновики отзывов. Публичный endpoint — только опубликованное.

Ошибки внедрения

• Неверный ID — виджет показывает чужую компанию или ноль.
• http на https.
• Два разных виджета старой и новой версии на одной странице.
• Блок спрятан в display:none до согласия cookie и «забыт».
• Ожидание мгновенного обновления при кэше 30 минут — не баг, а недоговорённость.

Кабинет представителя

Кроме кода виджета дайте превью и инструкцию из трёх шагов. Счётчик показов опционален; важнее ссылка «открыть профиль» и статус верификации. Если профиль не верифицирован, можно показывать виджет, но без галочки «проверено» — или наоборот требовать верификацию до выдачи кода. Решите явно.

Связь с модерацией

После скрытия отзыва балл в виджете должен пересчитаться. Цепочка: модерация → пересчёт TrustScore → инвалидация кэша виджета. Разрыв любого звена = расхождение. См. модерацию.

Фото в отзывах виджету обычно не нужны; достаточно цифр. Тяжёлую галерею оставьте на площадке — отзывы с фото.

Приёмка

1. Виджет на пустой HTML-странице вашего тестового домена.
2. Виджет на https-стенде клиента (или локальный nginx с SSL).
3. Смена балла после одобрения отзыва в пределах заявленного TTL кэша.
4. Клик по виджету ведёт на правильный профиль.
5. Отключение профиля / снятие публикации отражается корректно (скрытие или заглушка).

Не обещайте в продажах «виджет поднимет SEO клиента сам по себе». Он поднимает доверие на сайте; SEO вашей карточки — отдельная история.

Версии виджета и поддержка клиентов

У брендов код живёт годами. Не ломайте старый API без депрекейшн-периода. Новую версию виджета отдавайте новым клиентам, старым — напишите письмо с выгодой обновления. Changelog из трёх пунктов лучше молчаливого редизайна, после которого «пропали звёзды».

Тикеты «виджет пустой» разбирайте по чеклисту: ID, https, CSP, блокировщик рекламы, кэш, статус профиля. Выложите этот чеклист в кабинет представителя — срежете половину повторных обращений. Скриншот консоли браузера в тикете полезнее эссе «у нас не работает».

Если виджет режется AdBlock из-за слова «rating» в пути — переименуйте endpoint заранее. Это звучит смешно, пока не потеряете виджеты на половине сайтов клиентов.

Аналитика для площадки

Считайте установки виджета, клики в профиль, домены встройки. Так видно, какие бренды приносят обратный трафик. Не злоупотребляйте трекингом на стороне клиента: минимум данных, прозрачная политика. Пиксель третьих лиц в виджете без нужды не добавляйте — компании из регулируемых ниш откажутся встраивать.

Песочница для разработчика клиента: демо-ID и страница-пример. Иначе каждый фронтендер клиента будет поднимать ваш стенд заново. Пример кода копипастой с актуальным доменом API экономит дни переписки.

На своей стороне мониторьте latency публичного endpoint виджета. Если он отвечает секундами, клиенты снимут код раньше, чем вы заметите по CPU.

Юридические и брендовые ограничения

Некоторые компании не имеют права светить чужие логотипы или обязаны согласовывать внешние скрипты. Дайте вариант статичного SVG/PNG бейджа с ручным обновлением как запасной — честно пометив, что это не live. Лучше честный статичный бейдж, чем сломанный live-скрипт на сайте банка.

В оферте площадки пропишите, что искажение виджета (подмена цифр CSS-ом, обрезка блока) запрещены и могут повлечь отзыв права на встройку. Полностью не предотвратите, но для крупных партнёров это аргумент в переговорах.

Финальная проверка: тот же балл на профиле, в топе и в виджете через TTL кэша. Расхождение на одну десятую из-за округления тоже стоит заранее решить — округляйте одинаково во всех трёх местах.