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

Покрокова інструкція для вебсайтів на October 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: Додати до шаблону макета (Рекомендовано)

Рекомендований спосіб додати чат-бот - відредагувати ваш макет за замовчуванням у бекенді October CMS:

Увійдіть до вашого бекенду October CMS
Перейдіть до CMS > Layouts у головному меню
Відкрийте ваш макет за замовчуванням (зазвичай default.htm)
Знайдіть закриваючий </body> тег та {% scripts %} заповнювач
Додайте ваш код вбудовування Asyntai безпосередньо перед {% scripts %} та </body>:
<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> {% scripts %} </body>
Натисніть "Save", щоб застосувати зміни

Порада: Placing the script before {% scripts %} and </body> ensures it loads after the page content, which is recommended for chat widgets and won't slow down your page loading.

Alternative Method 1: Using {% put scripts %} Block

Ви можете використовувати заповнювач скриптів October CMS для вставки чат-бота зі сторінки або часткового шаблону:

Відкрийте будь-яку сторінку або частковий шаблон у редакторі CMS
Додайте наступний код за допомогою {% put scripts %} блоку:
{% put scripts %} <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> {% endput %}
Замiнiть YOUR_WIDGET_ID на фактичний ID вiджету з панелi керування
Натисніть "Save"

Примітка: For this method to work, your layout must include the {% scripts %} placeholder in its markup. This is where October CMS renders all injected scripts. Most default layouts already include this tag.

Альтернативний метод 2: Використання компонента PHP

Якщо ви віддаєте перевагу програмному підходу, ви можете додати скрипт чат-бота через власний компонент:

Створіть або змініть компонент у вашому плагіні October CMS
У методі onRun() компонента використовуйте метод addJs():
public function onRun() { $this->addJs('https://asyntai.com/static/js/chat-widget.js', [ 'async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID' ]); }
Замініть YOUR_WIDGET_ID на ваш фактичний ID віджету
Зареєструйте компонент на сторінках, де ви хочете, щоб чат-бот з'являвся

Порада: Використання компонента дає вам програмний контроль над тим, коли та де завантажується чат-бот. Ви можете додати умовну логіку всередині onRun() для управління завантаженням на основі ролей користувачів, типів сторінок або інших критеріїв.

Альтернативний метод 3: Використання часткового шаблону

Для кращої організації ви можете створити частковий шаблон для багаторазового використання для чат-бота:

Перейдіть до CMS > Partials у бекенді October CMS
Натисніть "+ Add", щоб створити новий частковий шаблон
Назвіть його asyntai-widget.htm
Додайте ваш код вбудовування 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>
Натисніть "Save"
Відкрийте шаблон макета та включіть частковий шаблон перед </body>:
{% partial 'asyntai-widget' %}
Збережіть макет

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

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

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

Не бачите віджет? Переконайтеся, що ви зберегли всі зміни в бекенді CMS. Очистіть кеш браузера або перегляньте сторінку у вікні інкогніто. Якщо ваш сайт використовує кешування, очистіть кеш October CMS, виконавши php artisan cache:clear з командного рядка, або використовуйте опцію Settings > System > Clear Cache у бекенді.

Вибір макета: Переконайтеся, що сторінки, де ви хочете, щоб чат-бот з'являвся, використовують правильний макет. Ви можете перевірити, який макет використовує сторінка, відкривши сторінку в CMS > Pages та переглянувши випадаючий список Layout у налаштуваннях сторінки.