Встановлення віджета на вашій платформі

Віджет — це два теги <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="uk">
      <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 з адресою сторінки.