Како додати 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: Додајте код коришћењем компоненте странице (препоручено)

Препоручени метод је додавање кода четбота у одељак заглавља компоненте AEM странице за инсталацију на целом сајту:

Пријавите се на своју AEM Author инстанцу
Навигирајте до CRXDE Lite (обично на http://your-aem-instance:4502/crx/de)
Пронађите шаблон компоненте странице (обично под /apps/your-project/components/page)
Пронађите или креирајте head.html или headerlibs.html фајл
Додајте свој Asyntai код за уграђивање у овај фајл
Кликните „Сачувај све" у горњем менију
Реплицирајте промене на своју инстанцу за објављивање

Савет: Постављање кода у 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
Идите до свог својства
Идите на Правила и креирајте ново правило
Подесите догађај на „Дно странице" или „DOM спреман"
Додајте акцију: Прилагођени код
Налепите свој Asyntai код за уграђивање
Сачувајте и објавите библиотеку

Савет: Коришћење Adobe Launch је приступ који Adobe препоручује за додавање скрипти трећих страна. Обезбеђује бољу контролу, могућности тестирања и не захтева деплојмент кода.

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

За флексибилну имплементацију прилагођену ауторима:

Навигирајте до Experience Fragments у AEM-у
Креирајте нови Experience Fragment
Додајте Текст компоненту или HTML компоненту
Пребаците се на HTML режим извора
Налепите свој Asyntai код за уграђивање
Укључите овај Experience Fragment у подножје шаблона странице

Важно: Уверите се да имате одговарајуће AEM дозволе за измену шаблона и компоненти. За AEM као Cloud Service, промене ће можда морати да прођу кроз ваш CI/CD пајплајн.

Корак 3: Верификујте инсталацију

Након деплојмента промена, обришите кеш претраживача и посетите свој веб-сајт. Требало би да видите дугме виџета за ћаскање у доњем десном углу. Кликните на њега да бисте се уверили да се отвара и функционише исправно.

Не видите виџет? Проверите конзолу претраживача (F12) за JavaScript грешке. Верификујте да је код правилно деплојован на вашу инстанцу за објављивање. За AEM као Cloud Service, уверите се да су ваше промене успешно прошле кроз пајплајн за деплојмент.