Squarespace Text-to-Speech – KI-Sprachausgabe per Code-Injection
Kreative, Coaches und Portfolioinhaber können Füge Squarespace eine KI-Sprachausgabe hinzu und GSpeech. Erzeugen Sie natürliche Sprachaufnahmen auf Blogs, Kursseiten und Fallstudien, während der Ton in der Software generiert wird. GSpeech Cloud-Konsole - Keine API-Schlüssel erforderlichund keine TTS-Last auf dem Squarespace-Hosting.
Dieser Leitfaden zeigt Squarespace Code Injection TTSFügen Sie den Einbettungscode vor dem Footer-Code-Injection ein. Platzieren Sie Spieler mit ganzseitigem / Button- / Kreis-Elementen mit einem Codeblockdann Karte Inhaltsauswahl und Render-Element damit der Spieler den richtigen Blog- oder Portfolio-Text liest.
Code-Injection + Code-Block — Einbettung der Fußzeile für die gesamte Website sowie benutzerdefinierte HTML-Einbindungen pro Seite.
Cloud-Audio-Generierung — Einmal synthetisieren, zwischenspeichern und bei späteren Besuchen wiedergeben.
Keine API-Schlüssel erforderlich — Stimmen und Spieler von einer Konsole.
Entwicklerfertige Widgets — Blogs, Kurse und Portfolio-Fallstudien mit jeweils eigenem Design.
Bestens geeignet für: Squarespace-Blogs, Coaching- und Kursseiten sowie Portfolio-Fallstudien, bei denen Besucher längere Texte anhören sollen, ohne die Seite zu verlassen.
Eine Website erstellen — Falls Sie noch keine Website hinzugefügt haben, folgen Sie diesen Anweisungen. erstellen Sie eine Website.
Website öffnen — geh zu deinem Dashboard und wählen Sie die Squarespace-Website aus.
Kopieren Sie den Verbindungscode - offen Integrationen → Squarespace / HTML-Website und kopieren Sie den Verbindungscode.
Einfügen vor — Fügen Sie den Code ein über Einstellungen → Erweitert → Code-Injektion (Fußzeile) vor dem Schluss Taggen, dann speichern und veröffentlichen.
Der Verbindungscode wird geladen GSpeech Spieler werden auf jeder Seite angezeigt, auf der sie vorhanden sind. Sie erscheinen nur dort, wo Sie Halterungen mit einem Codeblock/Einbettungscode/benutzerdefiniertem HTML-Code platzieren und nur dann, wenn das entsprechende Widget veröffentlicht und konfiguriert ist.
Kartierungsmodell
Code-Injection, Codeblöcke und Inhaltszuordnung
Bei Squarespace lädt Footer Code Injection die Engine einmalig. Jedes Widget ordnet dann Blogblöcke, Kursabschnitte oder Portfoliotexte einem Codeblock zu – ohne Audio in jedes Seitenlayout einzubetten:
1Anschlusscode
Lädt den Motor über die Footer-Code-Einspeisung. Ohne diese Funktion bleiben die Code-Block-Einträge leer.
2Benutzerdefiniertes Widget
Dashboard-Konfiguration: Stimme, Sprache, Design, Inhaltseinstellungen, URL-Regeln für Blogs vs. Portfolios.
3Montage-/Codeblock
Eine Markierung auf der Seite (zum Beispiel .gsp_full_player) wo die Spieler-Benutzeroberfläche erscheint.
4Inhaltszuordnung
Inhaltsauswahl = welcher Squarespace-Text vorgelesen werden soll. Render-Element = Ort, an dem der Spieler erscheint. Ausschließen / Titel / URLs verfeinern die Übereinstimmung.
Unbegrenzte Widgets — separate Full Page-, Button- oder Circle-Widgets für Blog-, Kurs- und Portfolio-Layouts.
Unbegrenzte Spieleranzahl pro Widget — Ein veröffentlichtes Widget kann jede passende Code Block-Einbindung ermöglichen, die durch die Regeln für Render Element + URL zulässig ist.
Codeblock / Benutzerdefiniertes HTML — auf Squarespace sieht die Halterung so aus: <div class="gsp_full_player"></div>Auf WordPress werden für dasselbe Prinzip Shortcodes verwendet, wie zum Beispiel: [gspeech].
Standardeinstellungen vs. Erweiterte Einstellungen Standardmäßige Mounts funktionieren schnell. Benutzerdefinierte Abschnitte benötigen präzise Werte für Inhaltsselektor/Renderelement.
Spieler
Spieler mit Codeblock / benutzerdefiniertem HTML hinzufügen
Platzieren Sie eine dieser Halterungen an der Stelle auf der Seite, an der der Spieler erscheinen soll (Codeblock / Einbetten / Benutzerdefiniertes HTML). Klicken Sie auf eine Karte, um sie zu kopieren. Legen Sie anschließend das Widget fest. Render-Element in dieselbe Klasse.
Weisen Sie dem Spieler Squarespace-Blöcke und Blog-Text zu.
Im Widget Inhalt Tabulatoren, Punktauswahlen bei Squarespace-Blogartikeln, Blockinhalten und Portfolio-Abschnitten, die Besucher hören sollen – dann platzieren Sie den Player mit einer Code Block-Halterung.
id → # / Klasse → . — Aus Inspect kopieren; in der Konsole mit einem Hash oder einem Punkt eingeben.
Teile sammeln — Der Inhaltsselektor akzeptiert mehrere, durch Kommas getrennte Ziele.
Stücke zuschneiden — Die Ausschlussliste verwendet die gleichen Präfixe + Kommas.
Definiert Welcher Text wird gesprochen?Verwenden Sie CSS-Selektoren, durch Kommas getrennt. Beispiele:
Artikel, .sqs-block-content, .blog-item-content, #Seite — Lesen Sie diese Elemente.
Artikel,Abschnitt,#meine_ID,.meine_Klasse — mehrere Ziele in einem Feld.
übergeordnete_klasse — Lies den übergeordneten Wrapper des Mounts (nützlich für einen Codeblock, der sich innerhalb eines Textabschnitts befindet).
selbst_klasse — Lesen Sie die gleiche Verpackung, in der die Halterung verpackt ist.
Lassen Sie dieses Feld leer, wenn Sie es verwenden. Inhaltstext stattdessen (fester Text, nicht DOM-Inhalt).
RE
Render-Element
Definiert wo die Spieler-UI eingefügt wirdEs muss einem realen Element auf der Seite entsprechen.
Bei benutzerdefinierten HTML-Mounts legen Sie die Mount-Klasse fest: .gsp_full_player, .gsp_button_playerden .gsp_circle_player.
Sie können auch Layout-Container wie z. B. ansprechen Körper, #Seiteden .blog-item-content wenn Sie keine spezielle Halterung verwenden.
Wenn der Inhaltsselektor korrekt ist, aber nichts angezeigt wird, ist das Render-Element auf dieser Seite in der Regel falsch oder fehlt.
RP
Renderposition
Platziert den Spieler Vorher or Nach Der Inhalt des Render-Elements. Bei einem dedizierten Mount-Div funktioniert After/Before in der Regel weiterhin relativ zu diesem Knoten – lassen Sie das Mount leer und lassen Sie das Widget es füllen.
EX
Ausschlussliste
Selektoren, die müssen kein Frontalunterricht. Sie können gesprochen werden, auch wenn sie sich im Inhaltsselektor befinden. Dasselbe # / . Regeln, durch Kommas getrennt. Beispiel: #comments,.sidebar,.ads,.no-speech.
TT
Titelauswahl / Titeltext
Titelauswahl — dynamischer Titel von der Seite (Beispiel: h1).
Titeltext — Fester Titel, der im Player angezeigt wird. Lassen Sie die Titelauswahl leer, wenn Sie Titeltext verwenden.
CT
Inhaltstext
Optionaler, fester Sprechertext. Bei Verwendung kann der Inhaltsselektor leer bleiben. Nützlich für kurze Kurseinführungen oder Portfoliozusammenfassungen, wenn der DOM-Inhalt nicht die Audioausgabe steuern soll.
Faustregel für Squarespace: Content Selector-Ziele .blog-item-content or .sqs-block-content, Render Element zielt auf die Code Block-Einbindung ab, und Exclude List überspringt Kommentare und Share-Strips.
Beispiele
Praktische Mapping-Beispiele für Squarespace-Blogs und -Portfolios
Beispiel A
Portfolio-Fallstudie mit Full Page Player
Eine Fallstudienseite mit Fließtext und einem Code-Block unterhalb des Hero-Bereichs:
Kursseite — Codeblock innerhalb des Inhalts (parent_class)
Befindet sich die Codeblock-Einbindung innerhalb eines Kurslektionsabschnitts, kann der Inhaltsselektor relativ sein:
Inhaltsauswahl - parent_class (liest das übergeordnete Mount-Element)
Render-Element - .gsp_full_player
Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen, self_class wenn der Mount-Wrapper selbst den Text enthält, der vorgelesen werden soll.
Beispiel C
Blogbeiträge von Kreativen mit einem Button-Widget
Ort .gsp_button_player in vielen Blogbeiträgen. Ein-Knopf-Player-Widget mit Render-Element .gsp_button_player Sie können alle diese Elemente steuern. Fügen Sie weitere Widgets nur dann hinzu, wenn sich Sprach-, Design- oder URL-Regeln für Kursseiten im Vergleich zu Portfolioseiten unterscheiden müssen.
Widgets
Erstellen Sie Audio-Widgets für Squarespace-Ersteller.
Inhalte konfigurieren — Inhaltsselektor, Render-Element, Ausschlussliste und Titel für Blogs oder Portfolios festlegen.
Player konfigurieren / Design — Stimme, Panels, Thema, Breite, Ränder.
Veröffentlichen und zuhören — Status auf „Veröffentlicht“ setzen, Squarespace-Live-Seite aktualisieren, Wiedergabe testen.
Wenn sich der Text im Blog oder Portfolio ändert, kann Smart Audio Sync die Sprachausgabe im Hintergrund neu generieren. Die Zuordnungsfelder entscheiden weiterhin. welche Text und woher Der Spieler überlebt.
FAQ
Häufig gestellte Fragen: Squarespace-Text-zu-Sprache- und Code-Injection-Funktionen
Unterstützt Squarespace Text-to-Speech und KI-Stimmen mit GSpeech?
Ja. GSpeech fügt Squarespace-Text-zu-Sprache-Funktion Mit natürlichen KI-Stimmen für Blogs, Kursseiten und Portfolios. Die Verbindung erfolgt über Code Injection, Spieler werden mit einem Code Block platziert und alles wird in der Cloud Console verwaltet – API-Schlüssel sind nicht erforderlich.
Wie füge ich den Spieler mithilfe von Code-Injection und einem Code-Block hinzu?
Kopieren Sie den Verbindungscode unter Integrationen → Squarespace / HTML-Website. Fügen Sie ihn ein in Einstellungen → Erweitert → Code-Injektion (Fußzeile) vor Fügen Sie auf jeder Seite, die Audio benötigt, ein Codeblock mit einer Halterung wie z. B. <div class="gsp_full_player"></div> und das Render-Element auf diese Klasse setzen.
Was ist der Unterschied zwischen Content Selector und Render Element auf Squarespace?
Inhaltsauswahl wählt aus, welcher Squarespace-HTML-Code vorgelesen werden soll – zum Beispiel .blog-item-content or .sqs-block-content. Render-Element Legt fest, wo der Spieler angezeigt wird – üblicherweise in der Mount-Klasse Ihres Codeblocks. Falscher Text bedeutet, dass der Inhaltsselektor korrigiert werden muss; ein fehlender Spieler muss das Renderelement korrigieren.
Wird GSpeech-Audio meine Squarespace-Website verlangsamen?
Nein. Audio wird generiert und im Cache gespeichert. GSpeech Cloud, nicht Squarespace. Das Footer-Code-Injection-Skript ist ressourcenschonend, und die Player werden nur dort geladen, wo Sie Codeblöcke hinzufügen. Blogs und Portfolio-Seiten behalten ihre normale Performance, während Besucher Inhalte auf Abruf anhören.
Benötige ich API-Schlüssel, um KI-Sprachsteuerung zu Squarespace hinzuzufügen?
Nein. GSpeech is Keine API-Schlüssel erforderlich Für Squarespace. Melden Sie sich in der Cloud Console an, fügen Sie Code Injection hinzu, konfigurieren Sie Widgets und veröffentlichen Sie die Anwendung. Stimmen und Sprecher bleiben in einem Konto, ohne dass TTS-Schlüssel von Drittanbietern auf Ihrer Website benötigt werden.
Hilfe
Benötigen Sie Hilfe beim Auffinden von Selektoren für ein Squarespace-Layout oder eine Code-Injection-Einbettung?
Wenden Sie sich an den GSpeech-Support.Senden Sie uns eine Seiten-URL, und wir helfen Ihnen bei der Zuordnung von Inhaltsselektoren und Renderelementen.
