Как добавить ИИ-чат-бот Asyntai в Adobe Experience Manager

Пошаговое руководство для сайтов на AEM

Платформа:

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

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

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

Примечание: Код выше — всего лишь пример. Вы должны скопировать свой уникальный код для встраивания с вашей Панели управления, так как он содержит ваш персональный идентификатор виджета.

Шаг 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» в верхнем меню
Реплицируйте изменения на ваш экземпляр публикации

Совет: Размещение кода в файле 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
Перейдите в своё свойство
Перейдите в Rules и создайте новое правило
Установите событие на «Page Bottom» или «DOM Ready»
Добавьте действие: Пользовательский код
Вставьте код встраивания Asyntai
Сохранить и опубликовать библиотеку

Совет: Использование Adobe Launch — это рекомендуемый Adobe подход для добавления сторонних скриптов. Он обеспечивает лучший контроль, возможности тестирования и не требует развёртывания кода.

Альтернативный способ 3: Experience Fragment

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

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

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

Шаг 3: Проверка установки

После деплоя изменений очистите кэш браузера и откройте сайт. Вы должны увидеть кнопку виджета чата в правом нижнем углу. Нажмите на неё, чтобы убедиться, что всё работает.

Виджет не отображается? Проверьте консоль браузера (F12) на наличие ошибок JavaScript. Убедитесь, что код был правильно развёрнут в экземпляре публикации. Для AEM as a Cloud Service убедитесь, что ваши изменения успешно прошли через конвейер развёртывания.