Synthèse vocale Squarespace — Voix IA via injection de code
Les créateurs, les coachs et les gestionnaires de portefeuille peuvent Ajouter la voix de l'IA à Squarespace au GSpeech. Diffuser une narration naturelle sur les blogs, les pages de cours et les études de cas, tandis que l'audio est généré dans le GSpeech Cloud Console - Aucune clé API requiseet aucune charge TTS sur l'hébergement Squarespace.
Ce guide montre Injection de code Squarespace TTS: collez le code intégré dans l'injection de code du pied de page avant , placez les joueurs Pleine page / Bouton / Cercle avec un Bloc de code, puis carte Sélecteur de contenu et Élément de rendu Le joueur lit donc le bon article de blog ou le bon portfolio.
Injection de code + Bloc de code — Intégration du pied de page à l'échelle du site et éléments HTML personnalisés par page.
Génération audio dans le cloud — synthétiser une seule fois, mettre en cache et rejouer lors des visites successives.
Aucune clé API requise — voix et joueurs sur une seule console.
Widgets prêts à l'emploi pour les créateurs — blogs, cours et études de cas de portfolio avec des designs distincts.
Idéal pour : Blogs Squarespace, pages de coaching et de cours, et études de cas de portfolio où les visiteurs devraient écouter des textes longs sans quitter la page.
Créer un site web — Si vous n'avez pas encore ajouté de site, suivez-nous créer un site Web.
Ouvrir le site — allez à votre tableau de bord et sélectionnez le site Squarespace.
Copiez le code de connexion - ouvrir Intégrations → Squarespace / Site web HTML et copiez le code de connexion.
Coller avant — insérer le code via Paramètres → Avancé → Injection de code (Pied de page) avant la fermeture Étiquetez, puis enregistrez et publiez.
Le code de connexion se charge GSpeech Sur chaque page où il est présent. Les joueurs apparaissent uniquement là où vous placez des montures avec un bloc de code / intégration / HTML personnalisé et seulement lorsque le widget correspondant est publié et configuré.
Modèle de cartographie
Injection de code, blocs de code et mappage de contenu
Sur Squarespace, l'injection de code dans le pied de page charge le moteur une seule fois. Chaque widget associe ensuite des blocs de blog, des sections de cours ou du contenu de portfolio à un emplacement de bloc de code, sans avoir à intégrer l'audio dans chaque mise en page.
1Code de connexion
Charge le moteur à partir de l'injection de code de pied de page. Sans cela, les emplacements des blocs de code restent vides.
2Widget personnalisé
Configuration du tableau de bord : voix, langue, design, paramètres de contenu, règles d’URL pour les blogs et les portfolios.
3Bloc de montage/code
Un marqueur sur la page (par exemple .gsp_full_player) où apparaît l'interface utilisateur du joueur.
4Cartographie du contenu
Sélecteur de contenu = Quel texte Squarespace lire. Élément de rendu = emplacement où le joueur apparaît. Exclure / Titre / URL affinent la recherche.
Widgets illimités — Des widgets distincts de type Pleine page, Bouton ou Cercle pour les blogs, les cours et les mises en page de portfolio.
Nombre illimité de joueurs par widget — Un seul widget publié peut alimenter chaque montage de bloc de code correspondant autorisé par les règles Render Element + URL.
Bloc de code / HTML personnalisé — sur Squarespace, le support ressemble à <div class="gsp_full_player"></div>Sur WordPress, le même principe utilise des codes courts tels que : [gspeech].
Options par défaut vs options avancées — Les montages par défaut fonctionnent rapidement. Les sections personnalisées nécessitent des valeurs précises pour le sélecteur de contenu et l'élément de rendu.
joueurs
Ajouter des joueurs avec un bloc de code / HTML personnalisé
Placez l'une de ces montures à l'endroit où le joueur doit apparaître sur la page (Bloc de code / Intégration / HTML personnalisé). Cliquez sur une carte pour la copier. Ensuite, configurez le widget. Élément de rendu à la même classe.
Associer les blocs Squarespace et le texte du blog au lecteur
Dans le widget Contenu Dans l'onglet, pointez les sélecteurs sur les éléments du blog Squarespace, le contenu des blocs et les sections du portfolio que les visiteurs devraient entendre, puis placez le lecteur avec un support de bloc de code.
id → # / classe → . — Copiez-les depuis Inspect ; écrivez-les avec un dièse ou un point dans la console.
Rassemblez les pièces — Le sélecteur de contenu accepte plusieurs cibles, séparées par des virgules.
Pièces de garniture — La liste d'exclusion utilise les mêmes préfixes + virgules.
Définit Quel texte est parlé ?Utilisez des sélecteurs CSS, séparés par des virgules. Exemples :
article, .sqs-block-content, .blog-item-content, #page — lisez ces éléments.
article,section,#mon_id,.ma_classe — plusieurs cibles dans un même champ.
classe_parent — lire le conteneur parent du montage (utile pour un bloc de code placé dans une section de texte).
auto_classe — lire le même emballage que celui dans lequel se trouve le support.
Laisser vide si nécessaire Texte du contenu au lieu de cela (texte fixe, et non contenu DOM).
RE
Élément de rendu
Définit où l'interface utilisateur du joueur est injectéeIl doit correspondre à un élément réel de la page.
Pour les montages HTML personnalisés, définissez-le sur la classe de montage : .gsp_full_player, .gsp_button_player, .gsp_circle_player.
Vous pouvez également cibler des conteneurs de mise en page tels que corps, #page, .blog-item-content lorsque vous n'utilisez pas de support dédié.
Si le sélecteur de contenu est correct mais que rien ne s'affiche, l'élément de rendu est généralement incorrect ou manquant sur cette page.
RP
Position du rendu
Place le joueur Avant or Après Le contenu de l'élément de rendu. Pour une div de montage dédiée, After/Before fonctionne généralement toujours par rapport à ce nœud : laissez le montage vide et laissez le widget le remplir.
EX
Exclure la liste
Sélecteurs qui doivent pas être mentionné, même s'ils se trouvent à l'intérieur du sélecteur de contenu. Idem # / . règles, séparées par des virgules. Exemple : #comments,.sidebar,.ads,.no-speech.
TT
Sélecteur de titre / Texte du titre
Sélecteur de titre — titre dynamique de la page (exemple : h1).
Titre Texte — Titre fixe affiché dans le lecteur. Laissez le sélecteur de titre vide si vous utilisez du texte de titre.
CT
Texte du contenu
Texte de narration fixe optionnel. Le sélecteur de contenu peut rester vide lorsqu'il est utilisé. Utile pour les introductions de cours courts ou les résumés de portfolio lorsque le contenu DOM ne doit pas déclencher la lecture audio.
Règle générale pour Squarespace : Cibles du sélecteur de contenu .blog-item-content or .sqs-block-contentL'élément de rendu cible le montage du bloc de code, et la liste d'exclusion ignore les commentaires et les bandes de partage.
Exemples
Exemples pratiques de cartographie pour les blogs et portfolios Squarespace
Exemple A
Étude de cas de portefeuille avec Full Page Player
Une page d'étude de cas avec un contenu principal et un bloc de code intégré sous l'élément principal :
Sélecteur de contenu - .blog-item-content (ou le cadre de texte de votre étude de cas)
Élément de rendu - .gsp_full_player
Exclure la liste - .share-buttons,.related-posts (Optionnel)
Sélecteur de titre - h1 (Optionnel)
Exemple B
Page de cours — Bloc de code dans le contenu (classe_parente)
Si le bloc de code est intégré à une section de leçon de cours, le sélecteur de contenu peut être relatif :
Sélecteur de contenu - parent_class (lit le parent du mont)
Élément de rendu - .gsp_full_player
Utilisez le self_class lorsque le contenu du support lui-même contient le texte qui doit être narré.
Exemple C
Articles de blog de créateurs avec un widget de bouton
Le salon .gsp_button_player sur de nombreux articles de blog. Widget One Button Player avec élément de rendu .gsp_button_player Ils peuvent tous les gérer. N'ajoutez d'autres widgets que si les règles vocales, de conception ou d'URL doivent différer entre les pages de cours et les pages de portfolio.
Widgets
Créer des widgets audio pour créateurs Squarespace
Publier et écouter — Définissez le statut sur Publié, actualisez la page Squarespace en ligne, testez la lecture.
Lorsque le texte d'un blog ou d'un portfolio est modifié, Smart Audio Sync peut régénérer la narration en arrière-plan. Le mappage des champs reste déterminant. qui texte et où Le joueur est en vie.
QFP
FAQ : Synthèse vocale et injection de code dans Squarespace
Squarespace prend-il en charge la synthèse vocale et les voix d'IA avec GSpeech ?
Oui. GSpeech ajoute Squarespace : synthèse vocale Des voix naturelles d'IA pour vos blogs, pages de cours et portfolios. Connectez-vous via l'injection de code, intégrez des lecteurs avec un bloc de code et gérez le tout depuis la console cloud — aucune clé API n'est requise.
Comment ajouter le joueur avec l'injection de code et un bloc de code ?
Copiez le code de connexion depuis Intégrations → Squarespace / Site Web HTML. Collez-le dans Paramètres → Avancé → Injection de code (Pied de page) avant Sur chaque page nécessitant du son, ajoutez un Bloc de code avec un support tel que <div class="gsp_full_player"></div> et définissez l'élément de rendu sur cette classe.
Quelle est la différence entre un sélecteur de contenu et un élément de rendu sur Squarespace ?
Sélecteur de contenu choisit le code HTML Squarespace à commenter, par exemple .blog-item-content or .sqs-block-content. Élément de rendu Détermine l'emplacement d'affichage du lecteur (généralement la classe de montage de votre bloc de code). Un texte incorrect indique une correction du sélecteur de contenu ; un lecteur absent indique une correction de l'élément de rendu.
Est-ce que GSpeech audio va ralentir mon site Squarespace ?
Non. L'audio est généré et mis en cache dans le GSpeech Le cloud n'est pas hébergé sur Squarespace. Le script d'injection de code du pied de page est léger et les lecteurs ne se chargent que là où vous ajoutez des blocs de code. Les blogs et les pages de portfolio conservent des performances normales, permettant aux visiteurs d'écouter à la demande.
Ai-je besoin de clés API pour ajouter la voix IA à Squarespace ?
Non. GSpeech is Aucune clé API requise Pour Squarespace. Connectez-vous à la console cloud, ajoutez l'injection de code, configurez les widgets et publiez. Les voix et les lecteurs restent sur un seul compte, sans avoir besoin de clés TTS tierces sur votre site.
Aide
Besoin d'aide pour trouver des sélecteurs pour une mise en page Squarespace ou un code intégré par injection ?
Contactez le support GSpeechEnvoyez-nous l'URL de la page et nous vous aiderons à associer le sélecteur de contenu / l'élément de rendu.
