G

Wix Text to Speech — IA vocale personnalisée

Wix : synthèse vocale — ajoutez une narration vocale IA avec du code personnalisé

Donne ton Wix blog, site d'entreprise ou Wix Studio projetez une expérience prête à écouter avec GSpeechLes visiteurs peuvent jouer au naturel Voix de l'IA Wix la narration sur les articles et les pages pendant que l'audio est généré et mis en cache dans le GSpeech Cloud Console - Aucune clé API requiseet aucune charge TTS sur l'hébergement Wix.

Ce guide montre comment Ajouter la synthèse vocale à Wix: collez le code de connexion avec Code personnalisé Wix (ou HTML personnalisé) avant Placez les lecteurs Pleine page / Bouton / Cercle avec une intégration HTML personnalisée, puis mappez Sélecteur de contenu et Élément de rendu Le lecteur lit donc correctement les articles de blog, les pages de service et les pages « À propos ».

  • Code personnalisé Wix TTS — Intégration à l'échelle du site via Paramètres → Code personnalisé, ou HTML personnalisé 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 — Gérer les voix et les joueurs depuis une seule console.
  • Widgets personnalisés illimités — Une narration distincte pour les blogs, les pages de service et les mises en page du Studio.

Idéal pour : Blogs Wix, sites d'entreprises locales et pages marketing Wix Studio où vous souhaitez une synthèse vocale IA pour les articles, les descriptions de services et les textes « À propos » — sans avoir à créer un backend TTS personnalisé.

Aperçu du site Web TTS Démos en direct Console Open Cloud

Connexion GSpeech à Wix

Comment se connecter GSpeech à Wix

  • Connexion - Connectez-vous à votre compte GSpeech (Vous en avez besoin ?) créer un compte gratuitement).
  • 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 Wix.
  • Copiez le code Wix - ouvrir Intégrations → Wix et copiez le code de connexion.
  • Coller avant — insérer le code via Code personnalisé Wix (Paramètres → Code personnalisé) ou un code HTML personnalisé intégré avant la fermeture Étiquetez, puis 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/du code HTML personnalisé et seulement lorsque le widget correspondant est publié et configuré.

Code personnalisé Wix, widgets et mappage de contenu

Sur Wix, GSpeech N'associe pas systématiquement un lecteur à un bloc de texte. Vous connectez le code personnalisé une seule fois, puis vous associez chaque widget au texte enrichi ou à la section que vous souhaitez narrer :

1 Code de connexion

Charge le moteur via le code personnalisé Wix. Sans cela, les éléments HTML personnalisés restent vides.

2 Widget personnalisé

Configuration du tableau de bord : voix, langue, design, paramètres de contenu, règles d’URL pour les pages de blog et les pages professionnelles.

3 Monter / HTML personnalisé

Un marqueur sur la page Wix (par exemple .gsp_full_player) où apparaît l'interface utilisateur du joueur.

4 Cartographie du contenu

Sélecteur de contenu = Quel texte Wix doit 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 articles de blog, les pages de service et les mises en page Studio.
  • Nombre illimité de joueurs par widget — Un seul widget publié peut alimenter tous les points de montage HTML personnalisés correspondants autorisés par les règles Render Element + URL.
  • HTML personnalisé / intégration — sur Wix, 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 éléments de montage par défaut fonctionnent rapidement. Les sections Wix personnalisées nécessitent des valeurs précises pour le sélecteur de contenu et l'élément de rendu.

Ajoutez des joueurs avec du HTML personnalisé Wix

Placez l'une de ces montures à l'endroit où le joueur doit apparaître sur la page (HTML personnalisé / intégration). Cliquez sur une carte pour la copier. Ensuite, configurez le widget. Élément de rendu à la même classe.

  • Lecteur pleine page
    <div class="gsp_full_player"></div>
  • Joueur de boutons
    <div class="gsp_button_player"></div>
  • Joueur de cercle
    <div class="gsp_circle_player"></div>

Documentation complète du lecteur Documentation du lecteur de boutons Documentation de Circle Player

Texte de la page Wix de la carte au joueur

Dans le widget Contenu Dans l'onglet, pointez les sélecteurs sur les éléments de texte enrichi et les sections Wix que les visiteurs devraient entendre — généralement les corps de blog, les descriptions de service et les sections « À propos ».

Sélecteur de contenu

Définit Quel texte est parlé ?Utilisez des sélecteurs CSS, séparés par des virgules. Exemples de balisage de type Wix :

  • .wix-rich-text, .blog-post-content, [data-testid="richTextElement"] — conteneurs de texte Wix courants.
  • .wix-rich-text,.blog-post-content,#my_id — plusieurs cibles dans un même champ.
  • classe_parent — lire le conteneur parent du montage (utile lorsque du HTML personnalisé se trouve à l'intérieur d'un bloc 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).

É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 Wix.

  • 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, une classe de section Wix, ou un conteneur de contenu de blog lorsque vous n'utilisez pas de montage 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.

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.

Exclure la liste

Sélecteurs qui doivent pas peuvent être prononcés, même s'ils se trouvent à l'intérieur du sélecteur de contenu. Séparés par des virgules. Exemple : .share-buttons,.related-posts,.wix-comments,.no-speech.

Sélecteur de titre / Texte du titre

  • Sélecteur de titre — titre dynamique de la page (exemple : h1 ou un conteneur d'en-tête Wix).
  • Titre Texte — Titre fixe affiché dans le lecteur. Laissez le sélecteur de titre vide si vous utilisez du texte de titre.

Texte du contenu

Texte de narration fixe optionnel. Le sélecteur de contenu peut rester vide lorsqu'il est utilisé. Utile pour les courtes sections promotionnelles sur les pages Wix Business, lorsque le texte DOM ne doit pas déclencher la lecture audio.

Règle générale pour Wix : Le sélecteur de contenu pointe vers le texte enrichi que vous souhaitez faire narrer, l'élément de rendu pointe vers le montage HTML personnalisé et la liste d'exclusion ignore les commentaires, les barres de partage et les bandes de publications connexes.

Exemples pratiques de cartographie pour les blogs et les pages professionnelles Wix

Article de blog Wix avec lecteur plein écran

Le corps d'un article de blog et un élément HTML personnalisé sous le titre :

  • Marquage de page
    <div class="wix-rich-text blog-post-content">...</div> <div class="gsp_full_player"></div>
  • Sélecteur de contenu - .wix-rich-text.blog-post-content
  • Élément de rendu - .gsp_full_player
  • Exclure la liste - .share-buttons,.related-posts (Optionnel)
  • Sélecteur de titre - h1 (Optionnel)

Page de service — montage dans du texte enrichi (classe_parente)

Si du code HTML personnalisé se trouve à l'intérieur d'une section de texte Wix sur une page de service, 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é.

Pages À propos et Studio avec un widget Bouton

Le salon .gsp_button_player Sur les pages « À propos » et les mises en page Studio répétitives. Widget One Button Player avec élément de rendu .gsp_button_player Ils peuvent tous les gérer. N'ajoutez d'autres widgets que lorsque la voix, les sélecteurs ou les règles d'URL doivent différer.

Créer des widgets de narration Wix

  • Ouvrir le tableau de bord — allez à votre Tableau de bord GSpeech.
  • Sélectionnez le site web — Ouvrez le site Wix auquel vous vous êtes connecté.
  • Ajouter un nouveau widget — Widgets → Ajouter un nouveau widget → choisir le type (Full Player, Button, Circle, …) → Créer.
  • Configurer le contenu — Définir le sélecteur de contenu, l'élément de rendu, la liste d'exclusion et les titres des pages de blog ou d'entreprise.
  • Configurer le lecteur / Design — voix, panneaux, thème, largeur, marges.
  • Publier et écouter — Définissez le statut sur Publié, actualisez la page Wix en ligne, testez la lecture.

Lorsque le texte d'un blog ou d'une page Wix change, Smart Audio Sync peut régénérer la narration en arrière-plan. Le mappage des champs reste déterminant. qui texte et Le joueur est en vie.

FAQ : Synthèse vocale Wix et code personnalisé

  • Est-ce que Wix prend en charge la synthèse vocale et les voix d'IA avec GSpeech ?

    Oui. GSpeech ajoute Synthèse vocale Wix Profitez de voix IA naturelles pour vos blogs, sites d'entreprise et pages Wix Studio. Connectez-vous via du code personnalisé, placez les lecteurs avec du HTML personnalisé et gérez les voix dans la console cloud : aucune clé API ni traitement TTS sur les serveurs Wix ne sont nécessaires.
  • Comment ajouter le lecteur GSpeech avec le code personnalisé Wix ?

    Copiez le code de connexion Wix depuis Intégrations → Wix dans votre tableau de bord. Collez-le dans Paramètres → Code personnalisé (ou HTML personnalisé) pour qu'il se charge avant , puis publiez. Ajoutez un point de montage tel que <div class="gsp_full_player"></div> sur les pages de blog ou de service et définissez l'élément de rendu sur la même classe.
  • Quelle est la différence entre un sélecteur de contenu et un élément de rendu sur Wix ?

    Sélecteur de contenu raconte GSpeech quel texte Wix commenter — par exemple .wix-rich-text ou le corps d'un article de blog. Élément de rendu Indique où afficher le lecteur (généralement votre classe de montage HTML personnalisée). Si le texte audio est incorrect, corrigez le sélecteur de contenu. Si le lecteur est absent, corrigez l'élément de rendu.
  • Est-ce que l'audio GSpeech ralentira mon site Wix ?

    Non. L'audio est généré et mis en cache dans le GSpeech Le service est hébergé dans le cloud, et non sur Wix. Le script de connexion est léger et les lecteurs ne se chargent que là où vous placez les supports. Les articles de blog et les pages professionnelles conservent les performances Wix habituelles, tandis que les visiteurs peuvent écouter l'audio à la demande.
  • Ai-je besoin de clés API pour la narration vocale Wix AI ?

    Non. GSpeech is Aucune clé API requise Pour Wix. Connectez-vous à la console cloud, collez le code personnalisé, configurez les widgets et publiez. Les voix, les langues et les lecteurs sont gérés au même endroit, sans avoir besoin de clés TTS tierces sur votre site Wix.

Besoin d'aide pour trouver des sélecteurs pour une mise en page Wix ou un code personnalisé intégré ? 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.