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

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

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

Перейдiть до каталогу user/themes/yourtheme/templates/ вашого проекту Grav та вiдкрийте default.html.twig (або базовий шаблон, який використовує ваша тема)
Додайте код вбудовування Asyntai перед закриваючим тегом </body>:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <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>
</html>

Збережіть файл

Порада: Grav використовує Twig як движок шаблонiв. Базовий шаблон зазвичай - це default.html.twig або partials/base.html.twig залежно вiд теми. Перевiрте структуру вашої теми, щоб знайти правильний файл, що мiстить закриваючий тег </body>.

Альтернативний метод 1: Використання менеджера ресурсів Grav

Вбудований менеджер ресурсiв Grav надає зручний спосiб додавання ресурсiв JavaScript через Twig:

Вiдкрийте базовий шаблон Twig вашої теми (наприклад, user/themes/yourtheme/templates/partials/base.html.twig)
Використовуйте менеджер ресурсів для додавання JavaScript:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

Або додайте вбудований JavaScript для динамiчного створення елемента скрипту у вашому базовому шаблонi:

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.body.appendChild(script);
})();
</script>
</body>
</html>

Примітка: Метод менеджера ресурсiв - це рекомендований Grav пiдхiд для керування ресурсами JavaScript. Вiн надає вбудовану пiдтримку конвеєрної обробки ресурсiв, впорядкування та групування.

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

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

Встановіть плагін "Custom JS" з адмін-панелі Grav або через CLI:

bin/gpm install custom-js

Перейдіть до Admin > Plugins > Custom JS
Додайте код скрипту вбудовування:

<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нтеграцiї чат-бота.

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

Якщо ваша тема Grav використовує успадкування блокiв Twig, ви можете перевизначити нижнiй блок у дочiрньому шаблонi:

{% block bottom %}
    {{ parent() }}
    <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>
{% endblock %}

Створіть або відкрийте дочірній шаблон, який розширює базовий шаблон вашої теми
Додайте перевизначення блоку, показане вище
Виклик parent() забезпечує збереження всього існуючого контенту в блоці

Примітка: Цей метод використовує систему успадкування шаблонiв Twig. Переконайтеся, що назва блоку (наприклад, bottom) вiдповiдає блоку, визначеному в базовому шаблонi вашої теми. Поширенi назви блокiв включають bottom, javascripts або footer.

Альтернативний метод 4: Використання плагіна Grav Custom Head

Ще один варіант на основі плагіна - плагін Custom Head:

Встановіть плагін custom-head через CLI або адмін-панель:

bin/gpm install custom-head

Перейдіть до Admin > Plugins > Custom Head
Додайте код скрипту вбудовування 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>

Збережіть конфігурацію

Порада: Плагiн Custom Head дозволяє впроваджувати код у роздiли head або body вашого сайту без змiни файлiв теми. Перевiрте документацiю плагiна для правильного варiанту розмiщення для вставки скрипту перед закриваючим тегом </body>.

Крок 3: Очистіть кеш та перевірте

Після додавання коду очистіть кеш Grav та перевірте встановлення:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

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

Не бачите віджет? Переконайтеся, що ви очистили кеш Grav за допомогою bin/grav clearcache або з адмiн-панелi. Перевiрте, що ви замiнили YOUR_WIDGET_ID на фактичний ID вiджету з панелi керування. Очистiть кеш браузера або перегляньте в режимi iнкогнiто. Вiдкрийте консоль браузера (F12), щоб перевiрити наявнiсть помилок JavaScript. Перевiрте наявнiсть скрипту у вихiдному кодi сторiнки, натиснувши правою кнопкою мишi та вибравши "View Page Source".

Документація