Chat in Squarespace einbinden: Code Injection, Tarife und Test

Um einen Chat in Squarespace einzubinden, fügst du das Widget-Skript im Bereich Code Injection in das Feld Footer ein. Squarespace setzt es dann auf jeder Seite der Website ein, und das Meetlead-Widget lädt als eigenes Skript im Browser der Besucher. Prüfe vorher eine Sache: Nicht jeder Squarespace-Tarif enthält Code Injection. Dieser Leitfaden zeigt, wie du das klärst, wohin der Code gehört und wie du das erste Gespräch testest.

Hier geht es um die Technik: Tarif, Code, Domains, ausgeschlossene Seiten und Smartphone. Wenn du noch entscheidest, ob du überhaupt einen Chat brauchst und wer antwortet, beginne mit dem Leitfaden dazu, wie du einen Website-Chat auswählst und einführst. Für Shopify-Shops und WordPress-Websites gibt es eigene Anleitungen.

Wohin der Chat-Code in Squarespace gehört

Den Chat-Code fügst du im Bereich Code Injection in das Feld Footer ein. Squarespace setzt den Inhalt dieses Felds auf jeder Seite vor das schließende body-Tag, ein Eintrag deckt also die ganze Website ab. Das Feld Header funktioniert ebenfalls, weil das Meetlead-Skript das Attribut async hat und die Darstellung der Seite nicht aufhält. Der Footer ist trotzdem der natürliche Ort für ein Tool, das nicht vor dem Rest der Seite starten muss. Die Squarespace-Hilfe nennt keinen festen Menüpfad, sondern verlinkt direkt auf den Bereich. Orientiere dich daher am Namen Code Injection und nicht an einem Screenshot aus einer fremden Anleitung.

Die Squarespace-Hilfe beschreibt die Felder Header und Footer, Code auf einzelnen Seiten und den Umstand, dass Checkout-Seiten keinen eigenen Code unterstützen. Sie stellt außerdem klar, dass der Support beim Einfügen und bei der Fehlersuche in eigenem Code nicht hilft. Ein bestimmtes Chat-Tool beschreibt die Seite nicht. Squarespace Help: Using code injection.

Welcher Squarespace-Tarif eigenen Code erlaubt

Das prüfst du zuerst, denn ohne Code Injection kannst du kein Skript einfügen, das auf der ganzen Website läuft. Laut Squarespace-Hilfe gibt es die Funktion in den Tarifen Core, Plus und Advanced sowie in einigen älteren Tarifen. Die Preisseite von Squarespace führt sie beim Tarif Basic nicht auf. Namen und Auswahl der Tarife unterscheiden sich je nach Region und Kaufdatum, vergleiche die Tabelle also mit den Abrechnungseinstellungen deiner Website.

↔ Scrolle die Tabelle seitlich, um alle Spalten zu sehen.

Die Preisseite von Squarespace zeigt Code Injection in den Tarifen Core und Advanced, nicht in Basic, und führt Live-Chat-Dienste als Beispiel an. Zu älteren Tarifen und zur Testphase sagt sie nichts, und den Tarif Plus aus der Hilfe führt sie nicht auf. Squarespace: Pricing.

Vor dem Einfügen: Domains, Zugang und der alte Chat

• Du hast Admin-Zugang zur Squarespace-Website oder eine Person mit diesem Zugang ist dabei.
• In Meetlead hast du eine Website mit eigener clientId und den Einbettungscode aus ihren Einstellungen kopiert.
• Alle exakten Hosts stehen auf der Liste erlaubter Domains: die Domain mit und ohne www.
• Testest du vor dem Verbinden deiner Domain, steht auch die integrierte Squarespace-Adresse auf der Liste.
• Du weißt, ob bereits ein anderer Chat auf der Website läuft, und hast einen Plan, ihn abzuschalten.

An der Domainliste scheitert der Start am häufigsten. Meetlead unterstützt keine Platzhalter, deshalb trägst du jeden Host einzeln und ohne Pfade ein, und jeder Eintrag zählt zum Domainlimit deines Tarifs. Füge eine Testadresse für die Einführung hinzu und entferne sie, sobald die Website unter der richtigen Domain läuft. Ein alter Chat in Squarespace kann aus dem Feld Code Injection, aus einem Codeblock auf einer Seite oder aus einer Erweiterung stammen; das Problem doppelter Widgets und die Suche danach beschreiben wir beim Chat in Shopify.

Installation Schritt für Schritt

1. Code aus Meetlead kopieren.Kopiere in den Website-Einstellungen das Skript mit der richtigen clientId. Die ID ist öffentlich, muss aber zu dieser Website gehören, sonst landen Gespräche am falschen Ort.
2. Code Injection öffnen.Suche im Squarespace-Adminbereich nach Code Injection. Sieht das Menü anders aus als in Anleitungen, nutze die Suche im Adminbereich.
3. Skript in Footer einfügen.Setze es in eine eigene Zeile. Schreibe darüber einen HTML-Kommentar mit Toolname und Datum, damit die nächste Person weiß, woher es stammt.
4. Änderung speichern.Klicke auf Save. Code in diesem Feld gilt für die ganze Website, du musst ihn also nicht auf einzelnen Seiten erneut einfügen.
5. Website im privaten Fenster öffnen.Prüfe Startseite, eine Angebotsseite und die Kontaktseite. Der Launcher sollte erscheinen, ohne dass du bei Squarespace angemeldet bist.
6. Testnachricht senden.Schreibe vom Smartphone und antworte aus dem Meetlead-Panel. Erst eine Antwort, die beim Besucher ankommt, bestätigt die Einführung.

Das private Fenster ist keine Formalie. Die Squarespace-Hilfe erklärt, dass sich eigener Code in der Vorschau des Editors deaktivieren lässt, und empfiehlt ein privates Fenster, um die Live-Website mit laufendem Code zu sehen. Fehlt das Widget im Editor, ist also nicht automatisch etwas kaputt. Aussehen, Sprachen und Begrüßungen änderst du später in Widget Studio; der Code im Footer lädt nur das Widget.

Seiten, auf denen der Chat nicht erscheinen soll

Squarespace erlaubt es, Code über die erweiterten Einstellungen nur auf einer einzelnen Seite einzufügen. Das verleitet dazu, die Sichtbarkeit des Chats Seite für Seite zu steuern, doch bei einem Dutzend Seiten verlierst du schnell den Überblick, wo der Code steckt. Einfacher ist ein einziges Skript im Footer und die Sichtbarkeit in Meetlead. Die Regeln zeigen das Widget auf allen Seiten, nur auf bestimmten Pfadpräfixen oder auf allen außer bestimmten, zusätzlich wählst du die Geräte.

Ein fiktives Yogastudio als Beispiel: Der Chat soll auf den Kurs- und Preisseiten laufen, aber nicht im Mitgliederbereich und nicht auf den AGB-Seiten. Du trägst diese Pfade als Ausnahmen ein und speicherst, ohne Code Injection erneut zu öffnen. Ist das Team ein paar Tage weg, blendet der Hauptschalter das Widget auf der ganzen Website aus. Der Squarespace-Checkout nimmt ohnehin keinen eigenen Code an, beantworte Fragen zur Zahlung also schon auf der Angebotsseite.

Smartphone: Launcher und Squarespace-Buttons

Am Smartphone teilt sich der Chat-Launcher den unteren Bildschirmrand mit Elementen, die du in Squarespace selbst einrichtest. Meist sind das der Cookie-Banner, ein Werbe-Pop-up oder ein fixierter Button im Template. Öffne jede wichtige Seite auf einem echten Gerät, im Hoch- und im Querformat. Verdeckt das Symbol einen Buchungs- oder Einwilligungsbutton, ändere in Meetlead die Bildschirmseite oder den Abstand des Launchers. Wie du solche Kollisionen findest, erklärt der Leitfaden zu Sticky-Elementen, die Buttons verdecken.

• Der Launcher verdeckt keinen Buchungs-, Kauf- oder Formularbutton.
• Cookie-Banner und Widget überlagern sich beim ersten Besuch nicht.
• Das Chatfenster öffnet sich im Vollbild und lässt sich leicht schließen.
• Die Tastatur verdeckt weder das Nachrichtenfeld noch den Senden-Button.
• Eine Nachricht vom Smartphone kommt im Panel an, und die Antwort erreicht den Besucher.

Häufige Fragen

Kann ich einen Chat in einem Tarif ohne Code Injection einbinden? Nicht als Skript, das auf der ganzen Website läuft. Du kannst upgraden oder bis zur Entscheidung einen anderen Kontaktweg anbieten, etwa ein Formular. Ein Codeblock ist kein Umweg: Laut Squarespace-Hilfe läuft JavaScript in Codeblöcken ebenfalls erst ab dem Tarif Core, im Tarif Basic startet das Chat-Skript also nicht. Prüfe vor dem Kauf auf der Preisseite deiner Region, welcher Tarif die Funktion enthält.

Was ist anders als bei WordPress? In WordPress verbindest du die Website mit dem offiziellen Meetlead-Plugin, ohne ein Skript einzufügen, wie der Leitfaden zum Chat auf einer WordPress-Website beschreibt. In Squarespace führt der Weg über Code Injection. Die übrigen Schritte sind gleich: Domainliste, ein einziges Widget, Sichtbarkeitsregeln, Test am Smartphone und ein Gespräch, auf das jemand wirklich antwortet.