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

Покрокова iнструкцiя для веб-сайтiв Craft CMS

Платформа:

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

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

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

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

Крок 2: Редагування шаблону макету (Рекомендовано)

Найпростiший спосiб додати чат-бот на всi сторiнки - це редагування головного шаблону макету:

Access your Craft CMS project files via FTP, SSH, or your code editor
Перейдiть до каталогу templates/
Знайдiть головний файл макету (зазвичай називається _layout.twig, _layout.html або знаходиться в templates/_layouts/)
Знайдiть закриваючий тег </body>
Вставте ваш код для вставки Asyntai безпосередньо перед тегом </body>
Збережiть файл

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

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

Craft CMS надає вбудований тег Twig для реєстрацiї JavaScript:

Вiдкрийте головний шаблон макету
Додайте наступний код перед закриваючим тегом </body>:
{% js %} (function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })(); {% endjs %}
Замiнiть YOUR_WIDGET_ID на ваш фактичний ID вiджету
Збережiть файл

Примiтка: The {% js %} tag automatically handles script registration and prevents duplicate loading if the same code appears multiple times.

Альтернатива: Створення окремого файлу включення

Для кращої органiзацiї створiть окремий файл включення:

Створiть новий файл: templates/_includes/chatbot.twig (або .html)
Додайте код вбудовування Asyntai до цього файлу:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
У головному шаблонi макету включiть цей файл перед </body>:
{% include '_includes/chatbot' %}
Збережiть обидва файли

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

Альтернатива: Умовне завантаження

Щоб завантажити чат-бот лише на певних сторiнках або в певних роздiлах:

У вашому шаблонi макету або сторiнки використовуйте умови Twig:
{% if entry.showChatbot ?? true %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
Або перевiрте конкретнi роздiли:
{% if craft.app.request.segments[0] != 'admin' %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}

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

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

Не бачите вiджет? Переконайтеся, що ви зберегли файл шаблону та що ви редагуєте правильний шаблон макету, який використовують вашi сторiнки. Очистiть кеш браузера або перегляньте в режимi iнкогнiто. Якщо використовується кешування шаблонiв, очистiть кеш Craft CMS з панелi керування в роздiлi Utilities > Clear Caches.

Розташування шаблону: Розташування шаблонiв Craft CMS може вiдрiзнятися залежно вiд налаштувань вашого проекту. Типовi мiсця включають templates/_layout.twig, templates/_layouts/main.twig або templates/_base.twig. Перевiрте iснуючi шаблони, щоб знайти, де визначений тег </body>.