Інструкція

Як підключити AI-віджет на сайт WordPress

Віджет — це один невеликий JS-файл (≤50KB gzip), який самостійно монтується у власний ізольований Shadow DOM вузол, тож він не конфліктує зі стилями чи скриптами теми WordPress. Підключення зводиться до вставки одного <script>-тега.

1. Зібрати production-бандл

У репозиторії проєкту:

pnpm --filter widget build
gzip -c apps/widget/dist/widget.js | wc -c   # має бути < 51200 байт

Команда створює єдиний файл apps/widget/dist/widget.js. Його потрібно завантажити на CDN або в статичне сховище (наприклад, той самий S3/MinIO бакет чи звичайний хостинг-провайдер), щоб отримати постійне публічне посилання на нього — вручну заливати файл у медіатеку WordPress не варто, оскільки там немає версіювання та кеш-контролю, потрібних для оновлень.

2. Скопіювати сніпет підключення

Вставте цей рядок перед закриваючим тегом </body> — атрибут data-api-base-url має вказувати на продакшн-адресу API (без нього віджет за замовчуванням піде на http://localhost:3001/api/v1, що годиться лише для локальної розробки):

<script
  src="https://cdn.soloway.tech/widget/widget.js"
  data-api-base-url="https://api.soloway.tech/api/v1"
></script>

3. Куди вставити сніпет у WordPress

Є три звичні способи — оберіть найзручніший для вашої теми:

• Плагін «Insert Headers and Footers» (або WPCode) — найпростіший спосіб без редагування коду теми: вставте сніпет у поле Footer налаштувань плагіна, і він зʼявиться на кожній сторінці сайту.
• Файл теми footer.php — додайте сніпет безпосередньо перед <?php wp_footer(); ?> або одразу після нього, якщо редагуєте тему напряму (через дочірню тему, щоб не втратити зміни при оновленні).
• Налаштування теми → «Додатковий код» / Customizer — деякі теми (напр. Astra, GeneratePress) мають власне поле для коду в footer, яке підходить так само, як і плагін вище.

Оскільки віджет має зʼявлятися на всіх сторінках сайту (а не лише на одній), не вставляйте сніпет у блок «Кастомний HTML» окремого запису чи сторінки — це підключить віджет лише там.

4. Перевірити підключення

• Відкрийте будь-яку сторінку сайту — кнопка запуску має з'явитися внизу зліва екрана.
• Відкрийте консоль розробника (F12) і переконайтеся, що немає помилок CORS — адреса вашого WordPress-домену має бути в списку дозволених origin\'ів на бекенді (CORS_WIDGET_ORIGIN в конфігурації apps/api).
• Перейдіть на кілька різних сторінок і переконайтесь, що сесія (та відповідь асистента, якщо вона вже отримана) зберігається між переходами — це демонструють сторінки цього тестового сайту («Головна» → «Послуги» → «Блог» → «Контакти»).