Как добавить ИИ-чат-бот Asyntai в Grav

Пошаговое руководство для Grav CMS

Платформа:

Шаг 1: Получите код встраивания

Сначала перейдите на Панель управления 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>

Примечание: Код выше — всего лишь пример. Вы должны скопировать свой уникальный код для встраивания с вашей Панели управления, так как он содержит ваш персональный идентификатор виджета.

Шаг 2: Добавьте в шаблон темы Grav (рекомендуется)

Лучший способ добавить чат-бот на все страницы вашего сайта на Grav — отредактировать базовый Twig-шаблон темы:

Перейдите в каталог user/themes/yourtheme/templates/ вашего проекта Grav и откройте 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 в качестве шаблонизатора. Базовый шаблон, как правило, называется default.html.twig или partials/base.html.twig в зависимости от темы. Изучите структуру своей темы, чтобы найти правильный файл с закрывающим тегом </body>.

Альтернативный способ 1: Через Grav Asset Manager

Встроенный Asset Manager в Grav предоставляет удобный способ добавления JavaScript-ресурсов через Twig:

Откройте базовый 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 для динамического создания элемента script в вашем базовом шаблоне:

<!-- 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>

Примечание: Метод Asset Manager — это рекомендованный в Grav подход к управлению JavaScript-ресурсами. Он обеспечивает встроенную поддержку конвейерной обработки, упорядочивания и группировки ресурсов.

Альтернативный способ 2: Через 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>

Сохранить конфигурацию плагина

Совет: Использование плагина для внедрения скриптов означает, что вам не нужно изменять файлы темы. Это упрощает смену или обновление тем без потери интеграции чат-бота.

Альтернативный метод 3: переопределение блока в дочернем шаблоне

Если ваша тема Grav использует наследование блоков Twig, вы можете переопределить нижний блок в дочернем шаблоне:

{% 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() гарантирует сохранение всего существующего содержимого в блоке

Примечание: Этот метод использует систему наследования шаблонов Twig. Убедитесь, что имя блока (например, bottom) совпадает с блоком, определённым в базовом шаблоне вашей темы. Распространённые имена блоков: 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>

Сохраните конфигурацию

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

Шаг 3: Очистка кэша и проверка

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

# Clear cache via CLI
bin/grav clearcache

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

Откройте свой сайт Grav в новой вкладке браузера. Вы должны увидеть кнопку чат-виджета в правом нижнем углу. Нажмите на неё, чтобы убедиться, что он открывается и работает правильно.

Виджет не отображается? Убедитесь, что очистили кеш Grav командой bin/grav clearcache или через панель администратора. Проверьте, что заменили YOUR_WIDGET_ID на реальный ID виджета с панели управления. Очистите кеш браузера или откройте в режиме инкогнито. Откройте консоль браузера (F12) для проверки ошибок JavaScript. Убедитесь, что скрипт присутствует в исходном коде страницы, нажав правой кнопкой мыши и выбрав «Просмотр исходного кода».

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