Установка виджета на вашей платформе

Виджет — это два тега <script>: первый задаёт опции, второй загружает виджет. Скопируйте их из настроек проекта в приложении — там уже есть ID вашего проекта и выбранные опции:

<script>
window.__rm__config = {
  projectId: 'YOUR_PROJECT_ID',
  locale: 'auto'
};
</script>
<script src="https://widget.revisionme.com/app.js" defer id="rm_app_script"></script>

Подходит любое место, где сайт позволяет добавить свой HTML на все страницы. Обычно это конец страницы перед </body>, но <head> тоже годится: виджет дождётся, пока страница будет готова. Держите оба тега вместе и в этом порядке. Ниже — где это место на популярных платформах. Чтобы показывать виджет только на отдельных страницах или отдельным людям, см. Показ виджета только там, где нужно.

WordPress

Проще всего — плагин для сниппетов кода. В WPCode (раньше Insert Headers and Footers): Code Snippets → Header & Footer, вставьте код в поле Footer и нажмите Save Changes. Если у вас плагин кеширования, убедитесь, что кеш очищен и посетители получают новые страницы.

Без плагина — через functions.php дочерней темы:

add_action('wp_footer', function () {
    ?>
    <script>
    window.__rm__config = { projectId: 'YOUR_PROJECT_ID', locale: 'auto' };
    </script>
    <script src="https://widget.revisionme.com/app.js" defer id="rm_app_script"></script>
    <?php
});

На WordPress.com (облачный сервис) свои скрипты требуют тарифа с плагинами и включёнными функциями хостинга; на бесплатном тарифе теги <script> вырезаются. Темы с анимированными переходами между страницами (следующая страница грузится без полной перезагрузки) поддерживаются: виджет остаётся на странице после каждого перехода.

Google Tag Manager

Tags → New → Tag Configuration → Custom HTML, вставьте оба тега в поле HTML.
Triggering: All Pages. Для условий (только некоторые страницы, только staging) вместо него — триггер с условиями, примеры в статье Показ виджета только там, где нужно.
Сохраните и опубликуйте контейнер (Submit). Сам режим предпросмотра сайт для посетителей не меняет.

Support document.write оставьте выключенным. GTM может убирать атрибуты тегов <script>, которые вставляет, поэтому встроенная ссылка embedBtn (она появляется там, где стоит тег скрипта) через GTM не работает; плавающая кнопка, кнопка у выделенного текста и Ctrl+Enter работают как обычно.

Конструкторы сайтов

Во всех конструкторах код начинает работать на опубликованном сайте, а не в редакторе, и обычно требует платного тарифа: если описанного меню нет, проверьте, что разрешает ваш тариф.

Tilda

Site Settings → Insert Code → HTML code for the HEAD section, затем переопубликуйте все страницы. Общего поля для конца страницы в Tilda нет, а <head> для виджета подходит. Только для одной страницы — Page Settings → Additional → HTML code for the HEAD section или блок T123 (Embed HTML Code); в редакторе блок показывает код текстом, работает он на опубликованной странице.

Webflow

Site settings → Custom code → Footer code, сохраните и нажмите Publish. Свой код требует платного тарифа сайта (или платного workspace). В Designer вместо кода показывается заглушка; проверяйте на домене webflow.io или на рабочем.

Wix

Settings → Development & integrations → Custom Code → Add Custom Code, вставьте код, выберите All pages и Load code once, размещение — Body – end. Wix разрешает свой код только на тарифе Premium с подключённым доменом, и сниппет привязан к этому домену: после смены домена добавьте его снова.

Shopify

Online Store → Themes → ⋯ → Edit code, откройте layout/theme.liquid и вставьте код сразу перед </body>. Сначала сделайте копию темы (Duplicate): правки кода могут потеряться при обновлении темы. Покрываются все страницы магазина; страницы оформления заказа — нет, код темы Shopify там не выполняет.

Squarespace

Pages → Website Tools → Code Injection → Footer, сохраните. Code Injection доступен на тарифах Core, Plus и Advanced (раньше — Business и Commerce). Пока вы залогинены, код может не срабатывать, поэтому проверяйте в приватном окне.

Single-page приложения

React, Vue, Svelte, Angular и подобные приложения не требуют ничего особенного: добавьте код один раз на страницу, которая загружает приложение, и виджет остаётся при смене маршрутов. Сообщение сохраняет адрес, открытый в момент, когда посетитель открыл форму, так что сообщения с разных маршрутов различаются. Подсветка выделенного текста не мешает фреймворку: когда форма закрывается, виджет возвращает текст страницы точно таким, каким он был.

Задавайте опции как window.__rm__config, как в коде выше. Обычный var __rm__config работает в теге <script> на странице, но внутри JavaScript-модуля остаётся локальной переменной, и виджет её не видит.

Vite, Create React App, Vue CLI, Angular

Вставьте код в HTML-страницу приложения перед </body>: index.html в Vite, public/index.html в Create React App и Vue CLI, src/index.html в Angular.

Next.js

В корневой layout (app/layout.tsx, App Router), чтобы он был на всех маршрутах:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="ru">
      <body>
        {children}
        <Script id="rm-config" strategy="beforeInteractive">
          {`window.__rm__config = { projectId: 'YOUR_PROJECT_ID', locale: 'auto' };`}
        </Script>
        <Script id="rm_app_script" src="https://widget.revisionme.com/app.js" />
      </body>
    </html>
  );
}

beforeInteractive гарантирует, что опции уже заданы, когда стартует виджет; встроенный Script требует id. В Pages Router Script с опциями идёт в pages/_document.tsx (beforeInteractive работает только там), а Script виджета — в pages/_app.tsx.

Nuxt

В nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { innerHTML: "window.__rm__config = { projectId: 'YOUR_PROJECT_ID', locale: 'auto' };", tagPosition: 'bodyClose' },
        { src: 'https://widget.revisionme.com/app.js', defer: true, id: 'rm_app_script', tagPosition: 'bodyClose' }
      ]
    }
  }
});

Turbo, Livewire и другая подмена страниц

Сайты, которые при переходе заменяют весь <body> (Hotwire Turbo, Livewire wire:navigate, Swup, Barba.js), поддерживаются: добавьте код в layout один раз, и виджет сам возвращается после каждой замены.

Content Security Policy

Если ваш сайт отправляет заголовок Content-Security-Policy, добавьте в него такие источники:

script-src  https://widget.revisionme.com https://revisionme.pages.dev;
connect-src https://api.revisionme.com;
style-src   'unsafe-inline';
img-src     data:;

script-src: загрузчик и сам виджет. Встроенный тег с опциями тоже нужно разрешить: вашим nonce (<script nonce="…">), его хешем или 'unsafe-inline'.
connect-src: отправка сообщения.
style-src 'unsafe-inline': собственные стили виджета в его shadow DOM и подсветка выделенного текста.
img-src data:: иконки и скриншот. Скриншот также читает изображения вашей страницы; изображения с других доменов, которые политика блокирует, на него не попадают, а если политика блокирует скриншот полностью, Revisionme делает его на своём сервере из HTML страницы.

Staging и другие домены

Сообщения принимаются с домена проекта, его поддоменов и с localhost. На копии сайта на другом домене (например, *.vercel.app или *.netlify.app) форма откроется, но сообщение будет отклонено: создайте для неё отдельный проект. Подробнее — в статье Показ виджета только там, где нужно.

Вашей платформы здесь нет или что-то не работает? Напишите на hello@revisionme.com с адресом страницы.