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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<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 per Code-Injection hinzufügen (Business- & Commerce-Pläne)

Wenn Sie einen Squarespace Business- oder Commerce-Plan haben, können Sie den Chatbot auf einmal zu allen Seiten hinzufügen, indem Sie Code-Injection verwenden:

Melden Sie sich bei Ihrem Squarespace-Konto an und öffnen Sie Ihre Website
Klicken Sie in der linken Seitenleiste auf Settings
Klicken Sie auf Advanced
Klicken Sie auf Code Injection
Scrollen Sie zum Abschnitt Footer
Fügen Sie Ihren Asyntai-Einbettungscode in das Footer-Textfeld ein
Klicken Sie oben links auf "Save"

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 (alle Tarife)

Wenn Sie einen Personal-Plan haben oder den Chatbot nur auf bestimmten Seiten hinzufügen möchten, können Sie Code-Blöcke verwenden:

Ö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
Klicken Sie außerhalb des Blocks, um den Editor zu schließen
Klicken Sie in der oberen linken Ecke auf "Save"

Wichtig: Bei der Verwendung von Code-Blöcken müssen Sie den Code auf jeder Seite hinzufügen, auf der der Chatbot erscheinen soll. Für eine websiteweite Installation verwenden Sie die oben beschriebene Code-Injection-Methode (erfordert einen Business- oder Commerce-Plan).

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.

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 tritt die Leiste an die Stelle der vorhandenen. Fügen Sie es unter Settings, Code Injection, Footer hinzu, an derselben Stelle wie den Chat-Code. Squarespace bietet Code Injection nur im Business- oder Commerce-Tarif, den brauchen Sie also 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>