Jak dodać chatbota Asyntai AI do Adobe Experience Manager

Przewodnik krok po kroku dla stron AEM

Platforma:

Krok 1: Pobierz swój kod osadzania

Najpierw przejdź do swojego Panelu Asyntai i przewiń w dół do sekcji "Kod osadzania". Skopiuj swój unikalny kod osadzania, który będzie wyglądał tak:

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

Uwaga: Powyższy kod to tylko przykład. Musisz skopiować swój własny unikalny kod osadzania z Panelu, ponieważ zawiera on Twój osobisty identyfikator widgetu.

Krok 2: Dodaj kod za pomocą komponentu strony (zalecane)

Zalecana metoda to dodanie kodu chatbota do sekcji head komponentu strony AEM w celu instalacji na całej witrynie:

Zaloguj się do swojej instancji AEM Author
Przejdź do CRXDE Lite (zazwyczaj pod adresem http://your-aem-instance:4502/crx/de)
Zlokalizuj szablon komponentu strony (zwykle w /apps/your-project/components/page)
Znajdź lub utwórz plik head.html lub headerlibs.html
Dodaj swój kod osadzania Asyntai do tego pliku
Kliknij "Zapisz wszystko" w górnym menu
Zreplikuj zmiany na swoją instancję publikacji

Wskazówka: Umieszczenie kodu w pliku head.html zapewnia, że chatbot pojawi się na wszystkich stronach używających tego szablonu. Jest to najczystsze podejście do instalacji na całej witrynie.

Metoda alternatywna 1: Biblioteki klienta (ClientLibs)

W celu bardziej uporządkowanego podejścia możesz użyć systemu bibliotek klienta AEM:

Utwórz nowy folder biblioteki klienta w /apps/your-project/clientlibs
Ustaw typ węzła cq:clientLibraryFolder
Utwórz plik js.txt zawierający listę Twoich plików JavaScript
Dodaj swój kod osadzania Asyntai do pliku JavaScript w tym folderze
Dołącz bibliotekę klienta do komponentu strony za pomocą:

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

Uwaga: Ta metoda jest zalecana dla projektów z istniejącą strukturą ClientLib i zapewnia lepszą organizację dla większych implementacji.

Metoda alternatywna 2: Zarządzanie tagami (Adobe Launch)

Jeśli używasz Adobe Launch (dawniej DTM) lub innego menedżera tagów:

Zaloguj się do Adobe Experience Platform Launch
Przejdź do swojej właściwości
Przejdź do Reguły i utwórz nową regułę
Ustaw zdarzenie na "Page Bottom" lub "DOM Ready"
Dodaj akcję: Kod niestandardowy
Wklej swój kod osadzania Asyntai
Zapisz i opublikuj bibliotekę

Wskazówka: Korzystanie z Adobe Launch to zalecane przez Adobe podejście do dodawania skryptów firm trzecich. Zapewnia lepszą kontrolę, możliwości testowania i nie wymaga wdrożeń kodu.

Metoda alternatywna 3: Fragment doświadczenia

Dla elastycznej implementacji przyjaznej dla autorów:

Przejdź do Fragmentów doświadczeń w AEM
Utwórz nowy Fragment doświadczenia
Dodaj komponent tekstowy lub komponent HTML
Przełącz na tryb źródła HTML
Wklej swój kod osadzania Asyntai
Dołącz ten Fragment doświadczenia do stopki szablonu strony

Ważne: Upewnij się, że masz odpowiednie uprawnienia AEM do modyfikowania szablonów i komponentów. W przypadku AEM as a Cloud Service zmiany mogą wymagać przejścia przez pipeline CI/CD.

Krok 3: Weryfikacja instalacji

Po wdrożeniu zmian wyczyść pamięć podręczną przeglądarki i odwiedź swoją stronę internetową. Powinieneś zobaczyć przycisk widgetu czatu w prawym dolnym rogu. Kliknij go, aby upewnić się, że otwiera się i działa poprawnie.

Nie widzisz widgetu? Sprawdź konsolę przeglądarki (F12) pod kątem błędów JavaScript. Zweryfikuj, czy kod został prawidłowo wdrożony na instancji publikacji. W przypadku AEM as a Cloud Service upewnij się, że zmiany przeszły pomyślnie przez pipeline wdrożeniowy.