Виджет отзывов на React, Vue, Next.js

Шаг за шагом

1. Поставьте div с нашим id туда, где нужны отзывы.
2. В useEffect (или onMounted) добавьте script с нашим адресом и async.
3. На выходе из компонента уберите script — чтобы при переходах не добавлялся второй.

Что важно знать

Виджет не спорит с вёрсткой сайта: ваши стили его не задевают, а его — вашу страницу.

Где на сайте ставить

В приложении на React, Vue или Next.js виджет ставят в компонент страницы: div с нашим id и script, который добавляется при монтировании. При переходах между страницами важно убрать script за собой — иначе на второй заход в компонент появится второй виджет.

Что может не получиться

• Виджет пропадает при переходе по ссылкам. Роутер меняет страницу без перезагрузки: добавляйте script в useEffect компонента, а не в index.html.
• Виджетов стало два. Script добавляется при каждом монтировании — уберите его в функции очистки useEffect (или onUnmounted).
• В Next.js виджета нет на первом рендере. Так и должно быть: код исполняется в браузере. Если нужен виджет в разметке сервера — сделайте блок заглушкой той же высоты, чтобы не было сдвига.

Как проверить, что встало

• Откройте страницу не в редакторе, а как посетитель — по её обычному адресу.
• Отзывы должны появиться на месте кода. Если пусто — сбросьте кэш сайта и обновите страницу.
• Посмотрите с телефона: виджет подстраивается под ширину, но контейнер может её ограничивать.

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

Свой ключ вы возьмёте в кабинете — там же есть кнопка «скопировать».