Synthèse vocale pour sites web HTML — Intégration de la voix IA

Comment se connecter GSpeech en HTML

• 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.
• Copiez le code HTML - ouvrir Intégrations → Site web HTML et copiez le code de connexion.
• Coller avant — Insérez le code dans votre modèle avant la balise de fermeture étiqueter, puis déployer.

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é.

Intégrez des scripts, des points de montage et des mappages de sélecteurs pour du HTML personnalisé.

Sur un site HTML personnalisé, un seul élément intégré charge le moteur. Chaque widget associe ensuite vos propres classes et identifiants à un point de montage, ce qui vous permet de conserver un contrôle total sur la mise en page tandis que la narration reste dans la console Cloud.

• Widgets illimités — Des widgets distincts de type Pleine page, Bouton ou Cercle pour différentes mises en page, langues ou designs.
• Nombre illimité de joueurs par widget — Un seul widget publié peut alimenter tous les points de montage correspondants autorisés par les règles Render Element + URL.
• supports HTML personnalisés — sur les sites HTML, 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 mises en page personnalisées uniques nécessitent des valeurs précises pour le sélecteur de contenu/l'élément de rendu.

Ajouter des joueurs avec du HTML personnalisé

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

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

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

Associer des mises en page HTML personnalisées au lecteur

Dans le widget Contenu Utilisez la touche Tab pour pointer des sélecteurs vers l'article, le conteneur principal ou les conteneurs personnalisés que vous possédez — n'importe quel sélecteur CSS exposé par votre balisage.

Règle générale pour les sites HTML : Le sélecteur de contenu pointe vers le conteneur que vous contrôlez (par exemple, article.post or #main), Render Element pointe vers le support, et Exclude List ignore la navigation, les publicités et les commentaires.

Exemples pratiques de cartographie pour les mises en page HTML personnalisées

Créer des widgets vocaux IA personnalisés pour votre site

• Ouvrir le tableau de bord — allez à votre Tableau de bord GSpeech.
• Sélectionnez le site web — Ouvrez le site HTML 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éfinissez le sélecteur de contenu, l'élément de rendu, la liste d'exclusion et les titres de votre mise en page.
• Configurer le lecteur / Design — voix, panneaux, thème, largeur, marges.
• Publier et écouter — Définir le statut sur Publié, actualiser la page en direct, tester la lecture.

Lorsque le texte de la page change, la synchronisation audio intelligente 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.