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

Пошаговое руководство для сайтов на CrafterCMS

Платформа:

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

Сначала перейдите на Панель управления Asyntai и прокрутите вниз до раздела «Код для встраивания». Скопируйте уникальный код, который выглядит так:

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

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

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

CrafterCMS использует шаблоны FreeMarker (.ftl) для отрисовки страниц. Самый простой способ добавить чат-бот на все страницы — отредактировать основной шаблон страницы:

В Crafter Studio перейдите в Site Dashboard > Content Types или перейдите к шаблонам
Откройте главный шаблон страницы (например, /templates/web/pages/home.ftl или базовый макет)
Найдите закрывающий тег </body>
Вставьте код встраивания Asyntai перед тегом </body>:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Сохраните файл и опубликуйте через Crafter Studio

Совет: Добавление скрипта перед закрывающим тегом </body> гарантирует загрузку после контента страницы — это рекомендуется для чат-виджетов и не замедлит загрузку страницы.

Альтернативный метод 1: использование компонентов шаблонов Crafter

Для лучшей организации создайте отдельный шаблон компонента для виджета чат-бота:

В Crafter Studio создайте новый файл шаблона по пути /templates/web/components/asyntai-widget.ftl
Добавьте следующее содержимое в шаблон компонента:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Подключите его в основном шаблоне макета с помощью директивы include FreeMarker:
<#include "/templates/web/components/asyntai-widget.ftl" />
Как вариант, если вы используете систему рендеринга компонентов CrafterCMS, используйте:
<@renderComponent component=contentModel.asyntaiWidget />
Сохраните оба файла и опубликуйте через Crafter Studio

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

Альтернативный метод 2: использование конфигурации Head/Scripts в Crafter

CrafterCMS позволяет глобально внедрять скрипты через конфигурацию сайта:

В Crafter Studio перейдите в Site Config > Configuration
Откройте файл конфигурации сайта Engine (site-config.xml)
Добавьте конфигурацию инъекции скрипта:
<site>   <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
Кроме того, можно отредактировать базовый макет FreeMarker для чтения из конфигурации сайта и динамического внедрения скриптов:
<#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
Сохраните и опубликуйте изменения конфигурации

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

Альтернативный способ 3: Через Groovy Controller

CrafterCMS поддерживает Groovy-скрипты для серверной логики. Вы можете использовать контроллер для динамического добавления скрипта чат-бота:

Создайте Groovy-скрипт в /scripts/pages/ (например, /scripts/pages/home.groovy или контроллер всего сайта)
Добавьте следующий код для внедрения URL скрипта в модель шаблона:
// /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
Затем обратитесь к переменным модели в вашем шаблоне FreeMarker:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Сохраните Groovy-скрипт и файл шаблона
Опубликуйте изменения через Crafter Studio

Примечание: Подход с Groovy-контроллером полезен, когда вам нужна условная логика (например, включение чат-бота только для определённых ролей пользователей или типов страниц) или когда вы хотите получать значения конфигурации из внешних источников.

Шаг 3: Публикация и проверка

После внесения изменений опубликуйте их через Crafter Studio:

В Crafter Studio перейдите в Site Dashboard
Проверьте свои изменения в разделе Моя недавняя активность или Ожидает одобрения
Нажмите Опубликовать, чтобы изменения вступили в силу
Откройте сайт CrafterCMS в новой вкладке браузера или режиме инкогнито
Кнопка виджета чата должна появиться в правом нижнем углу
Нажмите на нее, чтобы убедиться, что она открывается и работает корректно

Виджет не отображается? Убедитесь, что вы опубликовали изменения через Crafter Studio. Проверьте, что вы редактируете правильный файл шаблона, который используется вашими страницами. Очистите кэш браузера или откройте сайт в режиме инкогнито. При использовании кэширования Crafter очистите кэш Engine из панели управления Crafter Studio.

Расположение шаблона: Расположение шаблонов CrafterCMS зависит от структуры проекта. Типичные пути: /templates/web/pages/ для шаблонов страниц, /templates/web/components/ для компонентов и /templates/web/ для шаблонов макетов. Найдите, где определён тег </body>.