Як додати ШI-чатбот Asyntai до Adobe Experience Manager

Покрокова інструкція для сайтів AEM

Платформа:

Крок 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: Додайте код за допомогою компонента сторінки (Рекомендовано)

Рекомендований метод - додати код чатбота до роздiлу head компонента сторiнки AEM для встановлення на весь сайт:

Увійдіть до вашого екземпляра AEM Author
Перейдiть до CRXDE Lite (зазвичай за адресою http://your-aem-instance:4502/crx/de)
Знайдiть шаблон компонента сторiнки (зазвичай у /apps/your-project/components/page)
Знайдiть або створiть файл head.html або headerlibs.html
Додайте ваш код для вставки Asyntai до цього файлу
Натисніть "Save All" у верхньому меню
Реплікуйте зміни на ваш екземпляр публікації

Порада: Розмiщення коду у файлi head.html забезпечує появу чатбота на всiх сторiнках, що використовують цей шаблон. Це найкращий пiдхiд для встановлення на весь сайт.

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

Для бiльш структурованого пiдходу ви можете використовувати систему клiєнтських бiблiотек AEM:

Створiть нову папку клiєнтської бiблiотеки в /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'}" />

Примітка: Цей метод рекомендується для проектiв з iснуючою структурою ClientLib та забезпечує кращу органiзацiю для масштабних впроваджень.

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

Якщо ви використовуєте Adobe Launch (раніше DTM) або інший менеджер тегів:

Увійдіть до Adobe Experience Platform Launch
Перейдіть до вашої властивості
Перейдіть до Rules та створіть нове правило
Встановiть подiю на "Page Bottom" або "DOM Ready"
Додайте дію: Custom Code
Вставте ваш код для вставки Asyntai
Збережіть та опублікуйте бібліотеку

Порада: Використання Adobe Launch є рекомендованим Adobe пiдходом для додавання сторонiх скриптiв. Вiн забезпечує кращий контроль, можливостi тестування та не вимагає розгортання коду.

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

Для гнучкого, зручного для авторів впровадження:

Перейдіть до Experience Fragments в AEM
Створіть новий Experience Fragment
Додайте текстовий компонент або HTML-компонент
Перемкніться на режим HTML-коду
Вставте ваш код для вставки Asyntai
Включіть цей Experience Fragment у футер вашого шаблону сторінки

Важливо: Переконайтеся, що у вас є вiдповiднi дозволи AEM для змiни шаблонiв та компонентiв. Для AEM as a Cloud Service змiни можуть потребувати проходження через ваш CI/CD-конвеєр.

Крок 3: Перевірте встановлення

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

Не бачите віджет? Перевiрте консоль браузера (F12) на наявнiсть помилок JavaScript. Переконайтеся, що код був правильно розгорнутий на вашому екземплярi публiкацiї. Для AEM as a Cloud Service переконайтеся, що вашi змiни успiшно пройшли через конвеєр розгортання.