Как да добавите Asyntai AI чатбот към Adobe Experience Manager

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

Платформа:

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

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

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

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

Стъпка 2: Добавяне на код чрез компонент на страницата (Препоръчително)

Препоръчителният метод е да добавите кода на чатбота в секцията head на компонента на страницата в AEM за инсталация на целия сайт:

Влезте във вашия AEM Author екземпляр
Навигирайте до CRXDE Lite (обикновено на http://your-aem-instance:4502/crx/de)
Намерете шаблона на компонента на страницата (обикновено под /apps/your-project/components/page)
Намерете или създайте файла head.html или headerlibs.html
Добавете вашия Asyntai код за вграждане в този файл
Натиснете "Save All" в горното меню
Репликирайте промените към вашия publish екземпляр

Съвет: Поставянето на кода във файла head.html гарантира, че чатботът се появява на всички страници, използващи този шаблон. Това е най-чистият подход за инсталация на целия сайт.

Алтернативен метод 1: Клиентски библиотеки (ClientLibs)

За по-структуриран подход можете да използвате системата за клиентски библиотеки на AEM:

Създайте нова папка за клиентска библиотека под /apps/your-project/clientlibs
Задайте типа на възела cq:clientLibraryFolder
Създайте файл js.txt, изброяващ вашите JavaScript файлове
Добавете вашия Asyntai код за вграждане в JavaScript файл в тази папка
Включете клиентската библиотека в компонента на страницата, използвайки:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

Забележка: Този метод се препоръчва за проекти със съществуваща ClientLib структура и осигурява по-добра организация за по-големи реализации.

Алтернативен метод 2: Управление на тагове (Adobe Launch)

Ако използвате Adobe Launch (бивш DTM) или друг мениджър на тагове:

Влезте в Adobe Experience Platform Launch
Навигирайте до вашия property
Отидете на Rules и създайте ново правило
Задайте събитието на "Page Bottom" или "DOM Ready"
Добавете действие: Custom Code
Поставете вашия Asyntai код за вграждане
Запазете и публикувайте библиотеката

Съвет: Използването на Adobe Launch е препоръчителният от Adobe подход за добавяне на скриптове от трети страни. Осигурява по-добър контрол, възможности за тестване и не изисква разгръщане на код.

Алтернативен метод 3: Experience Fragment

За гъвкава, удобна за автори реализация:

Навигирайте до Experience Fragments в AEM
Създайте нов Experience Fragment
Добавете Text компонент или HTML компонент
Превключете на HTML source режим
Поставете вашия Asyntai код за вграждане
Включете този Experience Fragment в долния колонтитул на шаблона на вашата страница

Важно: Уверете се, че имате подходящи AEM разрешения за промяна на шаблони и компоненти. За AEM as a Cloud Service промените може да трябва да преминат през вашия CI/CD конвейер.

Стъпка 3: Проверка на инсталацията

След разгръщане на промените изчистете кеша на браузъра и посетете вашия уебсайт. Трябва да видите бутона на чат уиджета в долния десен ъгъл. Натиснете го, за да се уверите, че се отваря и функционира правилно.

Не виждате уиджета? Проверете конзолата на браузъра (F12) за JavaScript грешки. Проверете дали кодът е бил правилно разгърнат към вашия publish екземпляр. За AEM as a Cloud Service се уверете, че промените ви са преминали успешно през конвейера за разгръщане.