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

Платформа:

CrafterCMS

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Docusaurus Hugo Kentico Volusion Craft CMS Contentful Strapi Joomla Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Statamic Umbraco Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

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

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

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

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

1. В Crafter Studio перейдите в Site Dashboard > Content Types или перейдите к шаблонам
2. Откройте главный шаблон страницы (например, /templates/web/pages/home.ftl или базовый макет)
3. Найдите закрывающий тег </body>
4. Вставьте код встраивания Asyntai перед тегом </body>:
   <!-- Asyntai AI Chatbot --> <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>
5. Сохраните файл и опубликуйте через Crafter Studio

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

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

1. В Crafter Studio создайте новый файл шаблона по пути /templates/web/components/asyntai-widget.ftl
2. Добавьте следующее содержимое в шаблон компонента:
   <!-- Asyntai AI Chatbot Component --> <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. Подключите его в основном шаблоне макета с помощью директивы include FreeMarker:
   <#include "/templates/web/components/asyntai-widget.ftl" />
4. Как вариант, если вы используете систему рендеринга компонентов CrafterCMS, используйте:
   <@renderComponent component=contentModel.asyntaiWidget />
5. Сохраните оба файла и опубликуйте через Crafter Studio

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

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

1. В Crafter Studio перейдите в Site Config > Configuration
2. Откройте файл конфигурации сайта Engine (site-config.xml)
3. Добавьте конфигурацию инъекции скрипта:
   <site> <!-- Existing configuration... --> <!-- Custom Scripts --> <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>
4. Кроме того, можно отредактировать базовый макет 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>
5. Сохраните и опубликуйте изменения конфигурации

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

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

1. Создайте Groovy-скрипт в /scripts/pages/ (например, /scripts/pages/home.groovy или контроллер всего сайта)
2. Добавьте следующий код для внедрения 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"
3. Затем обратитесь к переменным модели в вашем шаблоне FreeMarker:
   <#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
4. Сохраните Groovy-скрипт и файл шаблона
5. Опубликуйте изменения через Crafter Studio

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

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

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