Jak přidat AI chatbota Asyntai do Adobe Experience Manager

Průvodce krok za krokem pro weby AEM

Platforma:

Krok 1: Získejte svůj vkládací kód

Nejprve přejděte na svůj Asyntai Dashboard a přejděte dolů k sekci „Embed Code". Zkopírujte svůj unikátní kód pro vložení, který bude vypadat takto:

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

Poznámka: Kód výše je pouze příklad. Musíte zkopírovat svůj vlastní unikátní kód pro vložení z vašeho Dashboardu, protože obsahuje vaše osobní ID widgetu.

Krok 2: Přidejte kód pomocí komponenty stránky (doporučeno)

Doporučenou metodou je přidat kód chatbota do sekce head komponenty stránky AEM pro instalaci na celém webu:

Přihlaste se ke své instanci AEM Author
Přejděte na CRXDE Lite (obvykle na http://your-aem-instance:4502/crx/de)
Najděte šablonu komponenty stránky (obvykle pod /apps/your-project/components/page)
Najděte nebo vytvořte soubor head.html nebo headerlibs.html
Přidejte svůj vkládací kód Asyntai do tohoto souboru
Klikněte na "Save All" v horním menu
Replikujte změny na vaši publikační instanci

Tip: Umístění kódu do souboru head.html zajistí, že se chatbot zobrazí na všech stránkách používajících tuto šablonu. Jedná se o nejčistší přístup pro instalaci na celém webu.

Alternativní metoda 1: Klientské knihovny (ClientLibs)

Pro strukturovanější přístup můžete použít systém klientských knihoven AEM:

Vytvořte novou složku klientské knihovny pod /apps/your-project/clientlibs
Nastavte typ uzlu cq:clientLibraryFolder
Vytvořte soubor js.txt se seznamem vašich JavaScript souborů
Přidejte svůj vkládací kód Asyntai do JavaScript souboru v této složce
Zahrňte klientskou knihovnu do komponenty stránky pomocí:

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

Poznámka: Tato metoda je doporučena pro projekty s existující strukturou ClientLib a poskytuje lepší organizaci pro rozsáhlejší implementace.

Alternativní metoda 2: Správa značek (Adobe Launch)

Pokud používáte Adobe Launch (dříve DTM) nebo jiný správce značek:

Přihlaste se do Adobe Experience Platform Launch
Přejděte ke své vlastnosti
Přejděte na Rules a vytvořte nové pravidlo
Nastavte událost na "Page Bottom" nebo "DOM Ready"
Přidejte akci: Custom Code
Vložte svůj vkládací kód Asyntai
Uložte a publikujte knihovnu

Tip: Použití Adobe Launch je společností Adobe doporučený přístup pro přidávání skriptů třetích stran. Poskytuje lepší kontrolu, možnosti testování a nevyžaduje nasazení kódu.

Alternativní metoda 3: Experience Fragment

Pro flexibilní implementaci přátelskou k autorům:

Přejděte na Experience Fragments v AEM
Vytvořte nový Experience Fragment
Přidejte komponentu Text nebo HTML
Přepněte do režimu zdrojového kódu HTML
Vložte svůj vkládací kód Asyntai
Zahrňte tento Experience Fragment do patičky šablony stránky

Důležité: Ujistěte se, že máte správná oprávnění AEM pro úpravu šablon a komponent. U AEM as a Cloud Service může být nutné provést změny prostřednictvím vašeho CI/CD pipeline.

Krok 3: Ověřte instalaci

Po nasazení změn vymažte mezipaměť prohlížeče a navštivte svůj web. Měli byste vidět tlačítko chatovacího widgetu v pravém dolním rohu. Klikněte na něj a ověřte, že se správně otevírá a funguje.

Nevidíte widget? Zkontrolujte konzoli prohlížeče (F12), zda neobsahuje chyby JavaScriptu. Ověřte, že kód byl správně nasazen na vaši publikační instanci. Pro AEM as a Cloud Service se ujistěte, že vaše změny úspěšně prošly procesem nasazení.