So fügen Sie den Asyntai KI-Chatbot zu Adobe Experience Manager hinzu

Schritt-für-Schritt-Anleitung für AEM-Websites

Plattform:

Schritt 1: Ihren Einbettungscode erhalten

Gehen Sie zunächst zu Ihrem Asyntai Dashboard und scrollen Sie zum Abschnitt "Einbettungscode". Kopieren Sie Ihren einzigartigen Einbettungscode, der so aussieht:

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

Hinweis: Der obige Code ist nur ein Beispiel. Sie müssen Ihren eigenen einzigartigen Einbettungscode von Ihrem Dashboard kopieren, da er Ihre persönliche Widget-ID enthält.

Schritt 2: Code über Seitenkomponente hinzufügen (empfohlen)

Die empfohlene Methode ist, den Chatbot-Code zum Head-Bereich Ihrer AEM-Seitenkomponente für eine websiteweite Installation hinzuzufügen:

Melden Sie sich bei Ihrer AEM-Autoreninstanz an
Navigieren Sie zu CRXDE Lite (typischerweise unter http://your-aem-instance:4502/crx/de)
Finden Sie Ihre Seitenkomponenten-Vorlage (normalerweise unter /apps/your-project/components/page)
Finden oder erstellen Sie die Datei head.html oder headerlibs.html
Fügen Sie Ihren Asyntai-Einbettungscode zu dieser Datei hinzu
Klicken Sie im oberen Menü auf "Alle speichern"
Replizieren Sie die Änderungen auf Ihre Veröffentlichungsinstanz

Tipp: Das Platzieren des Codes in der head.html-Datei stellt sicher, dass der Chatbot auf allen Seiten erscheint, die diese Vorlage verwenden. Dies ist der sauberste Ansatz für eine websiteweite Installation.

Alternative Methode 1: Client-Bibliotheken (ClientLibs)

Für einen strukturierteren Ansatz können Sie das Client-Bibliothekssystem von AEM verwenden:

Erstellen Sie einen neuen Client-Bibliotheksordner unter /apps/your-project/clientlibs
Setzen Sie den Knotentyp cq:clientLibraryFolder
Erstellen Sie eine js.txt-Datei mit einer Auflistung Ihrer JavaScript-Dateien
Fügen Sie Ihren Asyntai-Einbettungscode zu einer JavaScript-Datei in diesem Ordner hinzu
Binden Sie die Client-Bibliothek in Ihre Seitenkomponente ein mit:

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

Hinweis: Diese Methode wird für Projekte mit bestehender ClientLib-Struktur empfohlen und bietet eine bessere Organisation für größere Implementierungen.

Alternative Methode 2: Tag-Management (Adobe Launch)

Wenn Sie Adobe Launch (ehemals DTM) oder einen anderen Tag-Manager verwenden:

Melden Sie sich bei Adobe Experience Platform Launch an
Navigieren Sie zu Ihrer Property
Gehen Sie zu Regeln und erstellen Sie eine neue Regel
Setzen Sie das Ereignis auf "Page Bottom" oder "DOM Ready"
Fügen Sie eine Aktion hinzu: Benutzerdefinierter Code
Fügen Sie Ihren Asyntai-Einbettungscode ein
Speichern und veröffentlichen Sie die Bibliothek

Tipp: Die Verwendung von Adobe Launch ist der von Adobe empfohlene Ansatz zum Hinzufügen von Drittanbieter-Skripten. Er bietet bessere Kontrolle, Testmöglichkeiten und erfordert keine Code-Deployments.

Alternative Methode 3: Experience Fragment

Für eine flexible, autorenfreundliche Implementierung:

Navigieren Sie zu Experience Fragments in AEM
Erstellen Sie ein neues Experience Fragment
Fügen Sie eine Textkomponente oder HTML-Komponente hinzu
Wechseln Sie in den HTML-Quellmodus
Fügen Sie Ihren Asyntai-Einbettungscode ein
Binden Sie dieses Experience Fragment in die Fußzeile Ihres Seitentemplates ein

Wichtig: Stellen Sie sicher, dass Sie die entsprechenden AEM-Berechtigungen zum Ändern von Vorlagen und Komponenten haben. Für AEM as a Cloud Service müssen Änderungen möglicherweise über Ihre CI/CD-Pipeline erfolgen.

Schritt 3: Installation überprüfen

Nachdem Sie Ihre Änderungen bereitgestellt haben, leeren Sie Ihren Browser-Cache und besuchen Sie Ihre Website. Sie sollten die Chat-Widget-Schaltfläche in der unteren rechten Ecke sehen. Klicken Sie darauf, um sicherzustellen, dass es sich öffnet und korrekt funktioniert.

Widget nicht sichtbar? Überprüfen Sie Ihre Browserkonsole (F12) auf JavaScript-Fehler. Vergewissern Sie sich, dass der Code ordnungsgemäß auf Ihrer Veröffentlichungsinstanz bereitgestellt wurde. Für AEM as a Cloud Service stellen Sie sicher, dass Ihre Änderungen die Deployment-Pipeline erfolgreich durchlaufen haben.