Как да добавите Asyntai AI чатбот в CrafterCMS

Ръководство стъпка по стъпка за уебсайтове на CrafterCMS

Платформа:

Стъпка 1: Вземете вашия код за вграждане

Първо отидете на вашето Табло за управление на Asyntai и превъртете надолу до секцията "Код за вграждане". Копирайте уникалния си код за вграждане, който ще изглежда така:

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

Забележка: Кодът по-горе е само пример. Трябва да копирате собствения си уникален код за вграждане от вашето Табло за управление, тъй като съдържа вашия личен ID на уиджета.

Стъпка 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>
Включете го в основния си шаблон за оформление, като използвате FreeMarker директива за включване:
<#include "/templates/web/components/asyntai-widget.ftl" />
Алтернативно, ако използвате системата за рендиране на компоненти на Crafter, използвайте:
<@renderComponent component=contentModel.asyntaiWidget />
Запазете и двата файла и публикувайте чрез Crafter Studio

Забележка: Използването на отделен компонентен шаблон улеснява активирането или деактивирането на чатбота в целия ви сайт чрез коментиране на един ред за включване.

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

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

В Crafter Studio навигирайте до Site Config > Configuration
Отворете файла 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>
Алтернативно, редактирайте базовото си 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 контролер

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
Прегледайте промените си в секцията My Recent Activity или Pending Approval
Натиснете Publish, за да направите промените активни
Отворете уебсайта си в нов таб на браузъра или в режим инкогнито
Трябва да видите бутона на чат уиджета в долния десен ъгъл
Натиснете го, за да се уверите, че се отваря и работи правилно

Не виждате уиджета? Уверете се, че сте публикували промените чрез Crafter Studio. Проверете дали редактирате правилния файл на шаблона, който вашите страници използват. Изчистете кеша на браузъра или разгледайте в инкогнито прозорец. Ако използвате кеширането на Crafter, изчистете кеша на Engine от таблото на Crafter Studio.

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