Ako pridat Asyntai AI chatbota do Adobe Experience Manager

Návod krok za krokom pre webove stránky AEM

Platforma:

Krok 1: Získajte svoj vkladací kód

Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii „Vkladací kód“. Skopírujte svoj jedinečný vkladací kód, ktorý bude vyzerať takto:

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

Poznámka: Kód vyššie je len príklad. Musíte skopírovať svoj vlastný jedinečný vkladací kód zo svojho Dashboardu, pretože obsahuje vaše osobné ID widgetu.

Krok 2: Pridanie kodu pomocou komponentu stránky (odporúčané)

Odporúčaná metóda je pridať kód chatbota do sekcie head vášho AEM komponentu stránky pre inštaláciu na celom webe:

Prihláste sa do svojej autorovej inštancie AEM
Prejdite na CRXDE Lite (typicky na http://vasa-aem-instancia:4502/crx/de)
Nájdite šablónu komponentu vašej stránky (zvyčajne v /apps/vas-projekt/components/page)
Nájdite alebo vytvorte súbor head.html alebo headerlibs.html
Pridajte svoj vkladací kód Asyntai do tohto súboru
Kliknite na „Uložiť všetko“ v hornom menu
Replikujte zmeny na svoju publikačnú inštanciu

Tip: Umiestnenie kódu do súboru head.html zabezpečí, že sa chatbot zobrazí na všetkých stránkach používajúcich túto šablónu. Toto je najčistejší prístup pre inštaláciu na celom webe.

Alternatívna metóda 1: Klientske knižnice (ClientLibs)

Pre štruktúrovanejší prístup môžete použiť systém klientskych knižníc AEM:

Vytvorte novy priečinok klientskej knižnice v /apps/vas-projekt/clientlibs
Nastavte typ uzla cq:clientLibraryFolder
Vytvorte súbor js.txt so zoznamom vašich JavaScript súborov
Pridajte svoj vkladací kód Asyntai do JavaScript súboru v tomto priečinku
Zahrňte klientsku knižnicu do vášho komponentu stránky pomocou:

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

Poznámka: Táto metóda sa odporúča pre projekty s existujúcou štruktúrou ClientLib a poskytuje lepšiu organizáciu pre väčšie implementácie.

Alternatívna metóda 2: Správa tagov (Adobe Launch)

Ak používate Adobe Launch (predtým DTM) alebo iný správca tagov:

Prihláste sa do Adobe Experience Platform Launch
Prejdite na svoju vlastnosť
Prejdite na Pravidlá a vytvorte nové pravidlo
Nastavte udalosť na „Page Bottom“ alebo „DOM Ready“
Pridajte akciu: Vlastný kód
Vložte svoj vkladací kód Asyntai
Uložte a publikujte knižnicu

Tip: Použitie Adobe Launch je prístup odporúčaný spoločnosťou Adobe na pridávanie skriptov tretích strán. Poskytuje lepšiu kontrolu, možnosti testovania a nevyžaduje nasadenie kódu.

Alternatívna metóda 3: Experience Fragment

Pre flexibilnú implementáciu prívetivú pre autorov:

Prejdite na Experience Fragments v AEM
Vytvorte nový Experience Fragment
Pridajte Textový komponent alebo HTML komponent
Prepnite na režim zdrojového kódu HTML
Vložte svoj vkladací kód Asyntai
Zahrňte tento Experience Fragment do päty šablóny vašej stránky

Dôležité: Uistite sa, že máte správne oprávnenia AEM na úpravu šablón a komponentov. Pre AEM ako Cloud Service môžu zmeny vyžadovať prechod cez váš CI/CD pipeline.

Krok 3: Overenie inštalácie

Po nasadení vašich zmien vyčistite vyrovnávaciu pamäť prehliadača a navštívte svoju webovú stránku. Mali by ste vidieť tlačidlo chatového widgetu v pravom dolnom rohu. Kliknite naň, aby ste sa uistili, že sa otvára a funguje správne.

Nevidíte widget? Skontrolujte konzolu prehliadača (F12) kvôli chybám JavaScriptu. Overte, že kód bol správne nasadený na vašu publikačnú inštanciu. Pre AEM ako Cloud Service sa uistite, že vaše zmeny úspešne prešli cez pipeline nasadenia.