In Squarespace einbinden

So binden Sie Ihr botts.ai Chat-Widget mit «Code einfügen» auf jeder Seite einer Squarespace-Website ein, in fünf Schritten und ohne Ihr Design zu ändern.

Mit dieser Anleitung binden Sie das Chat-Widget eines botts.ai Website-Deployments in eine Squarespace-Website ein. Sie nutzen dafür das Squarespace-Menü Code einfügen (englisch Code Injection): Code im Feld Fusszeile wird auf jeder Seite Ihrer Website geladen (ausser auf den Kassen-Seiten), egal welches Template Sie verwenden.

Das brauchen Sie

• Die Rolle Inhaber oder Administrator auf der Squarespace-Website. Andere Bearbeiterrollen können «Code einfügen» nicht verwenden.
• Ein Squarespace-Abo mit «Code einfügen»: Core oder höher. Das Abo Basic enthält die Funktion nicht. Bei den älteren Abos, die nicht mehr angeboten werden, ist sie in den Abos Business und E-Commerce enthalten, im Abo Persönlich nicht. In der kostenlosen Testphase stehen Ihnen die meisten Optionen für benutzerdefinierten Code bereits zur Verfügung. Sie können das Widget also vor dem Upgrade einrichten; wählen Sie dann Core oder höher.
• Den Einbettungscode Ihres Website-Deployments. Öffnen Sie in botts.ai Agenten, wählen Sie Ihren Agenten, wechseln Sie in den Tab Bereitstellen und öffnen Sie das Website-Deployment. Im Abschnitt Einbinden ganz unten im Editor steht der Code, mit einer Schaltfläche zum Kopieren. Noch kein Website-Deployment? Siehe Deployments.

Der Einbettungscode sieht so aus, mit dem Schlüssel Ihres Deployments anstelle von IHR_API_KEY:

<script async src="https://api.botts.ai/widget/chat-widget.js?key=IHR_API_KEY"></script>

Schritt 1: Website in Squarespace öffnen

Melden Sie sich auf squarespace.com an. Klicken Sie im Konto-Dashboard bei Ihrer Website auf Website, oder bewegen Sie den Mauszeiger über das Bild und klicken Sie auf Zur Website gehen. Der Website-Editor öffnet sich mit dem Hauptmenü auf der linken Seite.

Schritt 2: «Code einfügen» öffnen

Klicken Sie im Hauptmenü auf Website und dann auf Seiten. Scrollen Sie im Seiten-Menü ganz nach unten und klicken Sie auf Benutzerdefinierter Code (englisch Custom Code). Der Abschnitt klappt direkt im Menü auf: Klicken Sie darin auf Code einfügen.

Nutzt Ihre Website Version 7.0, klicken Sie stattdessen unten im Seiten-Menü auf Website-Tools und dann auf Code einfügen. Welche Version Ihre Website nutzt, steht ganz unten im Seiten-Menü.

Schritt 3: Code ins Feld Fusszeile einfügen

Fügen Sie den Einbettungscode ins Feld Fusszeile (englisch Footer) ein. Steht dort bereits Code, setzen Sie den botts.ai Code in eine neue Zeile darunter und lassen den Rest unverändert. Übernehmen Sie den Code genau so, wie Sie ihn kopiert haben: Adresse und Schlüssel dürfen sich nicht ändern.

Ist Ihre Website noch in der Testphase, steht im Bereich «Code einfügen» über dem Titel ein Upgrade-Hinweis mit Schloss-Symbol, wie im Screenshot. Die Felder nehmen trotzdem Code an und die Schaltfläche Speichern erscheint. Sie können das Widget also schon vor dem Upgrade einrichten.

Squarespace fügt das Feld Fusszeile direkt vor dem schliessenden </body>-Tag jeder Seite ein, und genau dorthin gehört das Script des Widgets. Verwenden Sie dieses Feld für die ganze Website, damit das Widget auf allen Seiten erscheint. Nicht geeignet sind «Code einfügen» in den Einstellungen einer einzelnen Seite und die Felder für die Bestellbestätigungs- und die Bestellstatusseite weiter unten im Bereich.

Schritt 4: Speichern

Klicken Sie oben links im Bereich auf Speichern. Die Schaltfläche erscheint erst, wenn Sie Code eingegeben haben. Damit ist der Code auf jeder Seite Ihrer Website eingebunden.

Schritt 5: Widget auf der Website prüfen

Öffnen Sie Ihre öffentliche Website in einem privaten Fenster, laden Sie die Seite neu und warten Sie einen Moment. Das Chat-Symbol erscheint unten rechts oder dort, wo Sie es im Widget-Editor platziert haben. Öffnen Sie das Widget und senden Sie eine Testfrage. Prüfen Sie auch eine Unterseite und die Ansicht auf dem Smartphone.

Falls das Widget nicht erscheint

1. Prüfen Sie, ob der vollständige Code im Feld Fusszeile unter Code einfügen steht und ob Sie auf Speichern geklickt haben.
2. Prüfen Sie Ihr Abo. Mit Basic ist «Code einfügen» nicht verfügbar und das Widget lädt nicht. Sie brauchen Core oder höher.
3. Prüfen Sie, ob Ihre Website noch in der Testphase ist oder ein Website-Passwort hat. Websites in der Testphase sind privat: Besuchende können sie nicht öffnen, und Sie selbst in einem privaten Fenster auch nicht. Um vor dem Upgrade zu testen, öffnen Sie das Menü Website-Sichtbarkeit, wählen Passwortgeschützt und legen ein Passwort fest. Öffnen Sie die Website dann in einem privaten Fenster und geben Sie das Passwort auf dem Sperrbildschirm ein, oder prüfen Sie erneut, sobald die Website öffentlich ist.
4. Prüfen Sie ausserhalb des Editors. Zeigt Squarespace unten im Editor «Skripts wurden in deiner Website-Vorschau deaktiviert», ist benutzerdefinierter Code nur in Ihrer Vorschau deaktiviert, Besuchende erhalten ihn trotzdem. Ein privates Fenster zeigt die echte Website.
5. Bei einer Website mit Version 7.0 kann Ajax Loading laut Squarespace mit benutzerdefiniertem Code kollidieren. Öffnen Sie das Menü Website-Stile, deaktivieren Sie Ajax Loading aktivieren und testen Sie erneut.
6. Testen Sie in einem privaten Fenster ohne Werbeblocker. Blockiert Ihr Cookie-Banner oder Ihr Consent-Tool Scripts, prüfen Sie dessen Konfiguration.
7. Prüfen Sie, ob der Schlüssel zum richtigen Deployment gehört und ob das Deployment im Tab Bereitstellen eingeschaltet ist.

Widget ändern oder entfernen

Farben, Texte, den Launcher und alle anderen Einstellungen des Widgets ändern Sie im botts.ai Editor. Ihre Website übernimmt sie, ohne dass Sie in Squarespace etwas ändern. Ersetzen müssen Sie den Code nur, wenn sich der Schlüssel des Deployments ändert.

Um das Widget zu entfernen, löschen Sie nur die botts.ai Script-Zeile aus dem Feld Fusszeile unter Code einfügen und klicken erneut auf Speichern.

Weitere Hilfe

• Squarespace: Teile deiner Website mit «Code einfügen» anpassen
• Squarespace: Passendes Squarespace Abo auswählen
• Die allgemeinen Schritte für jede Website: Einbettungscode

Zuletzt aktualisiert am 4. Oktober 2026