Hoe u de Asyntai AI-chatbot toevoegt aan Adobe Experience Manager

Stapsgewijze handleiding voor AEM-websites

Platform:

Stap 1: Uw insluitcode ophalen

Ga eerst naar uw Asyntai Dashboard en scroll naar het gedeelte "Insluitcode". Kopieer uw unieke insluitcode die er als volgt uitziet:

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

Opmerking: De bovenstaande code is slechts een voorbeeld. U moet uw eigen unieke insluitcode kopiëren vanuit uw Dashboard omdat deze uw persoonlijke widget-ID bevat.

Stap 2: Code toevoegen via paginacomponent (aanbevolen)

De aanbevolen methode is om de chatbotcode toe te voegen aan de head-sectie van uw AEM-paginacomponent voor installatie op de hele site:

Log in op uw AEM Author-instantie
Navigeer naar CRXDE Lite (doorgaans op http://your-aem-instance:4502/crx/de)
Zoek uw paginacomponentsjabloon (meestal onder /apps/your-project/components/page)
Zoek of maak het bestand head.html of headerlibs.html
Voeg uw Asyntai-insluitcode toe aan dit bestand
Klik op "Alles opslaan" in het bovenste menu
Repliceer de wijzigingen naar uw publicatie-instantie

Tip: Door de code in het bestand head.html te plaatsen, zorgt u ervoor dat de chatbot op alle pagina's verschijnt die dat sjabloon gebruiken. Dit is de schoonste aanpak voor installatie op de hele site.

Alternatieve methode 1: Clientbibliotheken (ClientLibs)

Voor een meer gestructureerde aanpak kunt u het clientbibliotheeksysteem van AEM gebruiken:

Maak een nieuwe clientbibliotheekmap aan onder /apps/your-project/clientlibs
Stel het knooppunttype cq:clientLibraryFolder in
Maak een js.txt-bestand aan met een lijst van uw JavaScript-bestanden
Voeg uw Asyntai-insluitcode toe aan een JavaScript-bestand in deze map
Neem de clientbibliotheek op in uw paginacomponent met:

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

Opmerking: Deze methode wordt aanbevolen voor projecten met een bestaande ClientLib-structuur en biedt betere organisatie voor grotere implementaties.

Alternatieve methode 2: Tagbeheer (Adobe Launch)

Als u Adobe Launch (voorheen DTM) of een andere tagmanager gebruikt:

Log in op Adobe Experience Platform Launch
Navigeer naar uw eigenschap
Ga naar Regels en maak een nieuwe regel aan
Stel het evenement in op "Page Bottom" of "DOM Ready"
Voeg een actie toe: Aangepaste code
Plak uw Asyntai-insluitcode
Sla op en publiceer de bibliotheek

Tip: Het gebruik van Adobe Launch is de door Adobe aanbevolen aanpak voor het toevoegen van scripts van derden. Het biedt betere controle, testmogelijkheden en vereist geen code-implementaties.

Alternatieve methode 3: Experience Fragment

Voor een flexibele, auteursvriendelijke implementatie:

Navigeer naar Experience Fragments in AEM
Maak een nieuw Experience Fragment aan
Voeg een Tekstcomponent of HTML-component toe
Schakel over naar HTML-bronmodus
Plak uw Asyntai-insluitcode
Neem dit Experience Fragment op in de voettekst van uw paginasjabloon

Belangrijk: Zorg ervoor dat u de juiste AEM-rechten heeft om sjablonen en componenten te wijzigen. Voor AEM as a Cloud Service moeten wijzigingen mogelijk via uw CI/CD-pipeline verlopen.

Stap 3: Installatie verifiëren

Na het implementeren van uw wijzigingen wist u de browsercache en bezoekt u uw website. U zou de chatwidgetknop in de rechteronderhoek moeten zien. Klik erop om te controleren of deze correct opent en functioneert.

Ziet u de widget niet? Controleer uw browserconsole (F12) op JavaScript-fouten. Controleer of de code correct is geïmplementeerd op uw publicatie-instantie. Voor AEM as a Cloud Service controleert u of uw wijzigingen de implementatiepipeline succesvol hebben doorlopen.