Як додати AI чат-бот Asyntai до ProcessWire

Покрокова інструкція для вебсайтів на ProcessWire CMS

Платформа:

Крок 1: Отримайте код для вставки

Спочатку перейдiть до вашої Панелi керування Asyntai та прокрутiть вниз до роздiлу "Код для вставки". Скопiюйте унiкальний код для вставки, який виглядатиме так:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Примітка: Код вище є лише прикладом. Ви повиннi скопiювати власний унiкальний код для вставки з вашої Панелi керування, оскiльки вiн мiстить ваш особистий ID вiджета.

Крок 2: Додати до файлу шаблону (Рекомендовано)

ProcessWire використовує PHP-файли шаблонів, розташовані в директорії site/templates/. Найпростіший підхід - додати код вбудовування безпосередньо до вашого основного файлу шаблону:

Отримайте доступ до файлів інсталяції ProcessWire через FTP, SSH або файловий менеджер
Перейдіть до site/templates/
Відкрийте ваш основний файл шаблону — зазвичай це _main.php або basic-page.php залежно від профілю вашого сайту
Якщо ви використовуєте стратегію відкладеного виведення (за замовчуванням для більшості профілів сайту), відкрийте _main.php
Знайдіть закриваючий тег </body>
Вставте ваш код вбудовування Asyntai безпосередньо перед ним:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
</body>

Порада: Розміщення скрипта безпосередньо перед закриваючим тегом </body> забезпечує завантаження чат-бота після вмісту сторінки, що рекомендується для оптимальної продуктивності та не сповільнить рендеринг вашої сторінки.

Альтернативний метод 1: Використання _foot.inc або файлу доповнення _main.php

Якщо ваш сайт ProcessWire використовує підхід з файлом доповнення (поширений у багатьох профілях сайту), ви можете додати код вбудовування до спільного включення футера:

Перейдіть до site/templates/
Відкрийте _foot.inc (або ваш еквівалентний файл включення футера)
Вставте ваш код вбудовування Asyntai безпосередньо перед закриваючим тегом </body>
Збережіть файл

Стратегія відкладеного виведення ProcessWire зазвичай працює з трьома ключовими файлами:

_init.php — виконується перед кожним шаблоном, ініціалізує змінні
Ваш файл шаблону (наприклад, basic-page.php) — заповнює змінні контенту
_main.php — виводить фінальну HTML-розмітку, використовуючи ці змінні

Якщо ваш сайт використовує цей підхід, додавання скрипта до _main.php перед </body> забезпечить його появу на кожній сторінці.

Примітка: Назви файлів _init.php та _main.php налаштовуються у вашому site/config.php через параметри $config->prependTemplateFile та $config->appendTemplateFile. Перевірте вашу конфігурацію, якщо ваші файли називаються інакше.

Альтернативний метод 2: Використання масиву $config->scripts

ProcessWire надає FilenameArray $config->scripts, який ви можете використовувати для управління файлами JavaScript. У вашому _init.php або окремому файлі шаблону додайте:

<?php
$config->scripts->add('https://asyntai.com/static/js/chat-widget.js');
?>

Потім у вашому _main.php (або включенні футера) пройдіть циклом по масиву скриптів для їх виведення:

<?php foreach($config->scripts as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

Важливо: Підхід $config->scripts обробляє атрибут src скрипта, але атрибут data-asyntai-id потрібно обробляти окремо. Вам потрібно або додати атрибут data вручну у виведенні циклу, або використовувати метод прямого тегу script з Кроку 2 для найпростішого налаштування.

Альтернативний метод 3: Використання хука (ready.php)

Для більш розширеного підходу ви можете використовувати систему хуків ProcessWire для автоматичної вставки скрипта чат-бота на кожну сторінку. Додайте наступне до вашого файлу site/ready.php:

<?php
$wire->addHookAfter('Page::render', function(HookEvent $event) {
    $html = $event->return;
    $script = '<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>';
    $html = str_replace('</body>', $script . '</body>', $html);
    $event->return = $html;
});
?>

Цей хук перехоплює відрендерений HTML-вивід кожної сторінки та автоматично вставляє скрипт Asyntai безпосередньо перед закриваючим тегом </body>.

Порада: Підхід з хуком ready.php ідеальний, якщо ви хочете чат-бот на кожній сторінці без зміни файлів шаблонів. Він також зберігається після змін шаблонів та оновлень тем, оскільки знаходиться за межами файлів шаблонів.

Крок 3: Перевірте встановлення

Після збереження змін відвідайте ваш сайт ProcessWire у новій вкладці браузера або у вікні інкогніто. Ви повинні побачити кнопку чат-віджета у нижньому правому куті. Натисніть на неї, щоб переконатися, що вона відкривається та працює коректно.

Не бачите віджет? Переконайтеся, що ви зберегли всі змінені файли. Спробуйте очистити кеш браузера або переглянути сторінку у вікні інкогніто. Якщо кеш шаблонів ProcessWire увімкнено, вам може знадобитися очистити його, перейшовши до Modules → Core → Template Engine Cache або додавши ?nocache=1 до вашої URL-адреси. Також перевірте, що ваш файл шаблону дійсно використовується сторінками, які ви переглядаєте.