So fügen Sie den Asyntai AI Chatbot zu Squarespace hinzu

Schritt-für-Schritt-Anleitung für Squarespace-Websites

Plattform:

Schritt 1: Ihren Einbettungscode erhalten

Gehen Sie zuerst zu Ihrem Asyntai-Dashboard und scrollen Sie nach unten zum Abschnitt „Embed Code“. Kopieren Sie Ihren eindeutigen Einbettungscode, der so aussieht:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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 Code Injection hinzufügen

Wenn Ihre Website einen Squarespace-Plan Core, Plus oder Advanced (oder einen älteren Business- oder Commerce-Plan) hat, können Sie den Chatbot mit Code Injection auf allen Seiten gleichzeitig hinzufügen:

Melden Sie sich bei Ihrem Squarespace-Konto an und öffnen Sie Ihre Website
Klicken Sie im linken Bereich auf Pages
Klicken Sie unten im Bereich auf Custom Code
Klicken Sie auf Code Injection
Scrollen Sie zum Abschnitt Footer
Fügen Sie Ihren Asyntai-Einbettungscode in das Footer-Textfeld ein
Klicken Sie auf "Save"

Hinweis: In Squarespace 7.0 finden Sie Code Injection unter Pages → Website Tools.

Tipp: Das Hinzufügen des Codes im Footer-Bereich platziert ihn direkt vor dem schließenden </body>-Tag. Dies ist die empfohlene Platzierung für Chat-Widgets und verlangsamt das Laden Ihrer Seite nicht.

Alternative: Code-Blöcke verwenden

Um den Chatbot nur auf bestimmten Seiten hinzuzufügen, können Sie Code-Blöcke (Code Blocks) verwenden. Ein Code-Block führt JavaScript nur mit einem Core-, Plus- oder Advanced-Plan (oder einem älteren Business- oder Commerce-Plan) aus.

Öffnen Sie Ihre Website im Squarespace-Editor
Navigieren Sie zu der Seite, auf der Sie den Chatbot hinzufügen möchten
Klicken Sie auf der Seite auf "Edit"
Bewegen Sie den Mauszeiger über einen Abschnitt und klicken Sie auf "+ Block hinzufügen"
Scrollen Sie nach unten und wählen Sie "Code"
Klicken Sie auf das Stiftsymbol, um den Codeblock zu bearbeiten
Fügen Sie Ihren Asyntai-Einbettungscode ein
Stellen Sie sicher, dass das Mode-Menü des Blocks auf HTML eingestellt ist
Klicken Sie außerhalb des Blocks, um den Editor zu schließen
Klicken Sie auf "Save"

Wichtig: Bei Code-Blöcken müssen Sie den Code auf jeder Seite hinzufügen, auf der der Chatbot erscheinen soll. Für die Installation auf der gesamten Website verwenden Sie die oben beschriebene Code-Injection-Methode.

Schritt 3: Installation überprüfen

Nachdem Sie Ihre Änderungen gespeichert haben, öffnen Sie Ihre Website in einem neuen Browser-Tab oder Inkognito-Fenster. Sie sollten den Chat-Widget-Button in der unteren rechten Ecke sehen. Klicken Sie darauf, um sicherzustellen, dass er sich öffnet und korrekt funktioniert.

Widget nicht sichtbar? Stellen Sie sicher, dass Sie Ihre Änderungen gespeichert und veröffentlicht haben. Versuchen Sie, Ihren Browser-Cache zu leeren oder Ihre Website in einem Inkognito-Fenster anzuzeigen. Squarespace kann einige Minuten benötigen, um Code-Änderungen zu übernehmen. Code wird manchmal nicht ausgeführt, während Sie bei Squarespace angemeldet sind. Prüfen Sie die Website daher in einem privaten Fenster.

Die KI-Suchleiste hinzufügen

Die KI-Suchleiste ist ein eigenes Widget mit eigenem Code. Fügen Sie sie zusätzlich zum Chat hinzu oder allein. Sie erfordert den Standard-Tarif oder höher: in einem niedrigeren Tarif erscheint die Leiste, liefert aber keine Ergebnisse.

Fügen Sie dem Script-Tag das Attribut data-replace hinzu, dann ersetzt die Leiste die Suchleiste, die Ihr Theme bereits hat. Fügen Sie es unter Pages, Custom Code, Code Injection, Footer hinzu, an derselben Stelle wie den Chat-Code. Squarespace bietet Code Injection nur mit einem Core-, Plus- oder Advanced-Plan (oder einem älteren Business- oder Commerce-Plan) an, daher benötigen Sie einen davon für die Installation.

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