Az Asyntai AI chatbot hozzáadása az Adobe Experience Managerhez

Lépésről lépésre útmutató AEM webhelyekhez

Platform:

1. lépés: Szerezze be a beágyazási kódját

Először lépjen az Asyntai Irányítópultra és görgessen le a „Beágyazási kód" szekcióhoz. Másolja le az egyedi beágyazási kódját, amely így fog kinézni:

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

Megjegyzés: A fenti kód csak egy példa. Le kell másolnia saját egyedi beágyazási kódját az Irányítópultról, mivel az tartalmazza személyes widget-azonosítóját.

2. lépés: Kód hozzáadása oldalkomponens segítségével (ajánlott)

Az ajánlott módszer a chatbot kódjának hozzáadása az AEM oldal komponens fejléc szekciójához a webhelyszerű telepítéshez:

Jelentkezzen be az AEM szerkesztői példányba
Navigáljon a CRXDE Lite-hoz (általában a http://your-aem-instance:4502/crx/de címen)
Keresse meg az oldal komponens sablonját (általában a /apps/your-project/components/page alatt)
Keresse meg vagy hozza létre a head.html vagy headerlibs.html fájlt
Adja hozzá az Asyntai beágyazási kódját ehhez a fájlhoz
Kattintson az „Összes mentése" gombra a felső menüben
Replikálja a változtatásokat a közzétevő példányra

Tipp: A kód head.html fájlba helyezése biztosítja, hogy a chatbot megjelenjen az adott sablont használó összes oldalon. Ez a legtisztább megközelítés a webhelyszerű telepítéshez.

1. alternatív módszer: Klienskönyvtárak (ClientLibs)

Strukturáltabb megközelítéshez használhatja az AEM Klienskönyvtár rendszerét:

Hozzon létre egy új klienskönyvtár mappát a /apps/your-project/clientlibs alatt
Állítsa be a cq:clientLibraryFolder csomóponttípust
Hozzon létre egy js.txt fájlt, amely felsorolja a JavaScript-fájljait
Adja hozzá az Asyntai beágyazási kódját egy JavaScript-fájlhoz ebben a mappában
Foglalja bele a klienskönyvtárat az oldalkomponensébe a következők használatával:

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

Megjegyzés: Ez a módszer ajánlott meglévő ClientLib struktúrával rendelkező projektekhez, és jobb szervezettséget biztosít nagyobb megvalósításokhoz.

2. alternatív módszer: Tagkezelés (Adobe Launch)

Ha az Adobe Launchet (korábban DTM) vagy más tagkezelőt használ:

Jelentkezz be az Adobe Experience Platform Launch felületére
Navigáljon a tulajdonához
Lépjen a Szabályokhoz és hozzon létre egy új szabályt
Állítsa az eseményt „Oldal alja" vagy „DOM kész" értékre
Adjon hozzá egy műveletet: Egyéni kód
Illessze be az Asyntai beágyazási kódját
Mentse el és tegye közzé a könyvtárat

Tipp: Az Adobe Launch használata az Adobe által ajánlott megközelítés harmadik féltől származó szkriptek hozzáadásához. Jobb irányítást, tesztelési lehetőségeket biztosít és nem igényel kódfejlesztéseket.

3. alternatív módszer: Experience Fragment

Rugalmas, szerkesztőbarát megvalósításhoz:

Navigáljon az Experience Fragmentekhez az AEM-ben
Hozzon létre egy új Experience Fragmentet
Adjon hozzá egy Szöveg komponenst vagy HTML komponenst
Váltson HTML forrásmódra
Illessze be az Asyntai beágyazási kódját
Foglalja bele ezt az Experience Fragmentet az oldalsablon láblécébe

Fontos: Győződjön meg arról, hogy rendelkezik a megfelelő AEM jogosultságokkal a sablonok és komponensek módosításához. AEM felhőszolgáltatás esetén a változtatásoknak esetleg a CI/CD folyamaton kell átmenniük.

3. lépés: Telepítés ellenőrzése

A változtatások telepítése után törölje a böngésző gyorsítótárát és látogasson el webhelyére. A jobb alsó sarokban kell látnia a csevegési widget gombot. Kattintson rá, hogy meggyőződjön arról, hogy megnyílik és megfelelően működik.

Nem látja a widgetet? Ellenőrizze a böngésző konzolját (F12) JavaScript hibák szempontjából. Ellenőrizze, hogy a kód megfelelően lett-e telepítve a közzétevő példányra. AEM felhőszolgáltatás esetén győződjön meg arról, hogy a változtatásai sikeresen átmentek a telepítési folyamaton.