Wix Text to Speech — Código personalizado IA Voice

Conversión de texto a voz de Wix: añade narración de voz con IA mediante código personalizado.

Entrega tu Wix blog, sitio web de negocios o Estudio Wix proyectar una experiencia lista para escuchar con GSpeechLos visitantes pueden jugar al aire libre. Voz con IA de Wix narración en publicaciones y páginas mientras el audio se genera y se almacena en caché en el GSpeech Consola de nube - No se requieren claves APIy sin carga de TTS en el alojamiento de Wix.

Esta guía muestra cómo Agregar texto a voz a Wix: pegue el código de conexión con Código personalizado de Wix (o HTML personalizado) antes , coloque reproductores de página completa / botón / círculo con una inserción HTML personalizada, luego mapee Selector de contenido y Elemento de renderizado De esta forma, el jugador lee correctamente las entradas del blog, las páginas de servicio y las páginas "Acerca de".

  • Código personalizado de Wix TTS — Incrustaciones en todo el sitio web a través de Ajustes → Código personalizado, o HTML personalizado por página.
  • Generación de audio en la nube — Sintetizar una vez, almacenar en caché y reproducir en visitas posteriores.
  • No se requieren claves API — Gestiona las voces y los jugadores desde una sola consola.
  • Widgets personalizados ilimitados — Narración independiente para blogs, páginas de servicio y diseños de Studio.

Ideal para: Blogs de Wix, sitios web de negocios locales y páginas de marketing de Wix Studio donde se desea utilizar la voz de la IA en el cuerpo de las publicaciones, las descripciones de servicios y el texto "Acerca de", sin necesidad de crear un sistema backend de síntesis de voz personalizado.

Descripción general del sitio web TTS Demostraciones en vivo Consola de Open Cloud

Conectar GSpeech a Wix

Como conectar GSpeech a Wix

  • Iniciar Sesión - Inicia sesión en tu cuenta de GSpeech. (¿Necesitas uno? cree una cuenta gratis).
  • Crear una página web — si aún no has añadido un sitio, sigue crear una página web.
  • Abre el sitio — ve a tu Afiliados y seleccione el sitio de Wix.
  • Copia el código de Wix - abierto Integraciones → Wix y copie el código de conexión.
  • Pegar antes — inserta el código a través de Código personalizado de Wix (Configuración → Código personalizado) o una inserción HTML personalizada antes del cierre etiquetar y luego publicar.

El código de conexión se carga GSpeech En todas las páginas donde esté presente. Los jugadores aparecen solo donde se colocan monturas/HTML personalizado y solo cuando el widget correspondiente está publicado y configurado.

Código personalizado de Wix, widgets y mapeo de contenido

En Wix, GSpeech No asigna un jugador a un bloque de texto específico. Conectas el código personalizado una sola vez y luego asignas cada widget al texto enriquecido o a la sección que deseas narrar:

1 Código de conexión

Carga el motor mediante Wix Custom Code. Sin él, los montajes HTML personalizados permanecen vacíos.

2 Widget personalizado

Configuración del panel de control: voz, idioma, diseño, configuración de contenido, reglas de URL para páginas de blog frente a páginas de negocios.

3 Montaje / HTML personalizado

Un marcador en la página de Wix (por ejemplo .gsp_full_player) donde aparece la interfaz de usuario del jugador.

4 Mapeo de contenido

Selector de contenido = qué texto de Wix leer. Elemento de renderizado = donde aparece el jugador. Excluir / Título / URLs refinan la coincidencia.

  • Widgets ilimitados — Widgets separados de página completa, botón o círculo para entradas de blog, páginas de servicio y diseños de Studio.
  • Jugadores ilimitados por widget — Un widget publicado puede alimentar cualquier montaje HTML personalizado compatible permitido por las reglas de Render Element + URL.
  • HTML personalizado / incrustar — en Wix el soporte se ve así <div class="gsp_full_player"></div>En WordPress, la misma idea utiliza códigos cortos como [gspeech].
  • Valores predeterminados frente a valores avanzados — Los soportes predeterminados funcionan rápidamente. Las secciones personalizadas de Wix necesitan valores precisos de Selector de contenido / Elemento de renderizado.

Agrega jugadores con Wix Custom HTML

Coloca cualquiera de estas monturas donde el jugador deba aparecer en la página (HTML personalizado / incrustar). Haz clic en una tarjeta para copiarla. Luego configura el widget. Elemento de renderizado a la misma clase.

  • Reproductor de página completa
    <div class="gsp_full_player"></div>
  • Reproductor de botones
    <div class="gsp_button_player"></div>
  • Jugador del círculo
    <div class="gsp_circle_player"></div>

Documentación completa del reproductor Documentación del reproductor de botones Documentación de Circle Player

Mapa de texto de la página de Wix al jugador

En el widget Contenido Las pestañas permiten seleccionar los selectores en los contenedores de texto enriquecido y secciones de Wix que los visitantes deberían ver, normalmente el cuerpo de las entradas del blog, la descripción del servicio y las secciones "Acerca de".

  • id → # / clase → . - p.ej id="main" → #main; class="wix-rich-text" → .wix-rich-text.
  • Reúne las piezas — El selector de contenido acepta varios destinos, separados por comas.
  • Recortar piezas — La lista de exclusión utiliza los mismos prefijos + comas.
  • guía para principiantes - Cómo escribir valores HTML (# / .).

Selector de contenido

Define ¿Qué texto se pronuncia?Utilice selectores CSS separados por comas. Ejemplos de marcado tipo Wix:

  • .wix-rich-text, .blog-post-content, [datos-testid="richTextElement"] — Envoltorios de texto comunes de Wix.
  • .wix-rich-text,.blog-post-content,#my_id — Múltiples objetivos en un mismo campo.
  • clase_padre — leer el contenedor principal del montaje (útil cuando el HTML personalizado se encuentra dentro de un bloque de texto).
  • auto_clase — lee el mismo contenedor en el que se encuentra el soporte.
  • Déjelo vacío si usa Texto de contenido en su lugar (texto fijo, no contenido DOM).

Elemento de renderizado

Define donde se inyecta la interfaz de usuario del jugadorDebe coincidir con un elemento real de la página de Wix.

  • Para montajes HTML personalizados, configúrelo en la clase de montaje: .gsp_full_player, .gsp_button_player, o .gsp_circle_player.
  • También puede seleccionar contenedores de diseño como cuerpo, una clase de sección de Wix o un contenedor de contenido de blog cuando no se utiliza un montaje dedicado.
  • Si el selector de contenido es correcto pero no aparece nada, normalmente el elemento de renderizado es incorrecto o falta en esa página.

Posición de renderizado

Coloca al jugador Antes or Después el contenido del elemento de renderizado. Para un div de montaje dedicado, After/Before generalmente sigue funcionando en relación con ese nodo: mantenga el montaje vacío y deje que el widget lo llene.

Lista de exclusión

Selectores que deben No ser hablado, incluso si se encuentran dentro del Selector de contenido. Lo mismo # / . reglas, separadas por comas. Ejemplo: .share-buttons,.related-posts,.wix-comments,.no-speech.

Selector de título / Texto del título

  • Selector de título — título dinámico de la página (ejemplo: h1 o un contenedor de encabezado de Wix).
  • Texto del título — Título fijo que se muestra en el reproductor. Deje el selector de título vacío cuando utilice el texto del título.

Texto de contenido

Texto de narración fijo opcional. Cuando se utiliza, el selector de contenido puede quedar vacío. Útil para secciones promocionales cortas en páginas de negocios de Wix cuando el texto del DOM no debe controlar el audio.

Regla general para Wix: El selector de contenido apunta al texto enriquecido que desea narrar, el elemento de renderizado apunta al montaje HTML personalizado y la lista de exclusión omite los comentarios, las barras para compartir y las franjas de publicaciones relacionadas.

Ejemplos prácticos de mapeo para blogs y páginas de negocios de Wix

Entrada de blog de Wix con reproductor de página completa

El cuerpo de una entrada de blog y un montaje HTML personalizado debajo del título:

  • Marcado de página
    <div class="wix-rich-text blog-post-content">...</div> <div class="gsp_full_player"></div>
  • Selector de contenido - .wix-rich-text.blog-post-content
  • Elemento de renderizado - .gsp_full_player
  • Lista de exclusión - .share-buttons,.related-posts (opcional)
  • Selector de título - h1 (opcional)

Página de servicio: montaje dentro de texto enriquecido (clase principal)

Si el HTML personalizado se encuentra dentro de una sección de texto de Wix en una página de servicio, el selector de contenido puede ser relativo:

  • Selector de contenido - parent_class (lee el padre del soporte)
  • Elemento de renderizado - .gsp_full_player

Usar self_class cuando el propio contenedor de montaje contiene el texto que debe ser narrado.

Páginas Acerca de y Estudio con un widget de botón

Especial .gsp_button_player en páginas de información y diseños repetitivos de Studio. Widget de reproductor de un botón con elemento de renderizado .gsp_button_player Puede alimentarlos a todos. Añada más widgets solo cuando la voz, los selectores o las reglas de URL deban ser diferentes.

Crea widgets de narración en Wix

  • Abrir panel de control — ve a tu Panel de control de GSpeech.
  • Seleccione el sitio web — abre el sitio de Wix al que te conectaste.
  • Agregar nuevo widget — Widgets → Agregar nuevo widget → elegir tipo (Reproductor completo, Botón, Círculo, …) → Crear.
  • Configurar contenido — Configurar el selector de contenido, el elemento de renderizado, la lista de exclusión y los títulos para las páginas del blog o de negocios.
  • Configurar reproductor / Diseño — voz, paneles, tema, ancho, márgenes.
  • Publicar y escuchar — Establezca el estado en Publicado, actualice la página de Wix en vivo y pruebe la reproducción.

Cuando cambia el texto de un blog o página de Wix, Smart Audio Sync puede regenerar la narración en segundo plano. Los campos de mapeo aún deciden lo cual texto y dónde El jugador vive.

Preguntas frecuentes: Conversión de texto a voz y código personalizado de Wix

  • ¿Wix es compatible con la conversión de texto a voz y las voces de IA mediante GSpeech?

    Sí. GSpeech añade Conversión de texto a voz de Wix Con voces de IA naturales para blogs, sitios web empresariales y páginas de Wix Studio. Conéctate mediante código personalizado, coloca los soportes del reproductor con HTML personalizado y gestiona las voces en la consola en la nube; sin claves API ni procesamiento de TTS en los servidores de Wix.
  • ¿Cómo puedo añadir el reproductor GSpeech con código personalizado de Wix?

    Copia el código de conexión de Wix desde Integraciones → Wix en tu panel de control. Pégalo en Configuración → Código personalizado (o HTML personalizado) para que se cargue antes , luego publique. Agregue un montaje como <div class="gsp_full_player"></div> en las páginas del blog o del servicio y configure Render Element con la misma clase.
  • ¿Qué diferencia hay entre Content Selector y Render Element en Wix?

    Selector de contenido decirles GSpeech qué texto de Wix narrar — por ejemplo .wix-rich-text o el cuerpo de una entrada de blog. Elemento de renderizado Indica dónde mostrar el reproductor (normalmente, la clase de montaje HTML personalizada). Si el texto del audio es incorrecto, corrige el selector de contenido. Si falta el reproductor, corrige el elemento de renderizado.
  • ¿El audio de GSpeech ralentizará mi sitio web de Wix?

    No. El audio se genera y se almacena en caché en el GSpeech En la nube, no en el alojamiento de Wix. El script de conexión es ligero y los reproductores se cargan solo donde colocas las monturas. Las entradas del blog y las páginas de negocios mantienen el rendimiento normal de Wix mientras los visitantes escuchan bajo demanda.
  • ¿Necesito claves API para la narración de voz con IA de Wix?

    No. GSpeech is No se requieren claves API Para Wix. Inicia sesión en la consola en la nube, pega el código personalizado, configura los widgets y publica. Las voces, los idiomas y los reproductores se gestionan en un solo lugar, sin necesidad de claves de síntesis de voz de terceros en tu sitio Wix.

¿Necesitas ayuda para encontrar selectores para un diseño de Wix o para insertar código personalizado? Contacta con el soporte de GSpeechEnvíanos la URL de la página y te ayudaremos a asignar el selector de contenido/elemento de renderizado.