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

Покрокова інструкція для веб-сайтів CrafterCMS

Платформа:

Крок 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стить ваш особистий ID вiджета.

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

CrafterCMS використовує шаблони FreeMarker (.ftl) для вiдображення сторiнок. Найпростiший спосiб додати чат-бот на всi сторiнки - це редагування головного шаблону сторiнки:

У Crafter Studio перейдiть до Site Dashboard > Content Types або перейдiть до шаблонiв
Вiдкрийте головний шаблон сторiнки (наприклад, /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> забезпечує його завантаження пiсля контенту сторiнки, що рекомендується для чат-вiджетiв i не сповiльнює завантаження сторiнки.

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

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

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

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

Альтернативний метод 2: Використання конфігурації Head/Scripts Crafter

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

У Crafter Studio перейдiть до Site Config > Configuration
Вiдкрийте файл Engine Site Configuration (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>
Як альтернативу, вiдредагуйте базовий макет FreeMarker, щоб зчитувати конфiгурацiю сайту та динамiчно впроваджувати скрипти:
<#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>
Збережіть та опублікуйте зміни конфігурації

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

Альтернативний метод 3: Використання контролера Groovy

CrafterCMS пiдтримує скрипти Groovy для серверної логiки. Ви можете використовувати контролер для динамiчного додавання скрипту чат-бота:

Створiть скрипт 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, так i файл шаблону
Опублікуйте зміни через Crafter Studio

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

Крок 3: Публікація та перевірка

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

У Crafter Studio перейдіть до Site Dashboard
Перегляньте свої змiни в роздiлi My Recent Activity або Pending Approval
Натисніть Publish, щоб зміни стали активними
Відкрийте ваш сайт у новій вкладці браузера або вікні інкогніто
Ви повинні побачити кнопку віджета чату в правому нижньому куті
Натисніть на нього, щоб переконатися, що він відкривається та працює коректно

Не бачите віджет? Переконайтеся, що ви опублiкували змiни через Crafter Studio. Перевiрте, що ви редагуєте правильний файл шаблону, який використовують вашi сторiнки. Очистiть кеш браузера або перегляньте в режимi iнкогнiто. Якщо використовується кешування Crafter, очистiть кеш Engine з панелi керування Crafter Studio.

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