Conversión de texto a voz en Squarespace: Inyección de código
Integración de espacio cuadrado
Conversión de texto a voz en Squarespace: voz con IA mediante inyección de código.
Los creadores, entrenadores y propietarios de carteras pueden agregar voz con IA a Squarespace con GSpeech. Ofrecer narración natural en blogs, páginas de cursos y estudios de caso mientras se genera audio en el GSpeech Consola de nube - No se requieren claves APIy sin carga de TTS en el alojamiento de Squarespace.
Esta guía muestra Inyección de código TTS en Squarespace: pegue el código incrustado en la inyección de código del pie de página antes , colocar jugadores de página completa / botón / círculo con un Bloque de código, luego mapea Selector de contenido y Elemento de renderizado para que el jugador lea el texto correcto del blog o del portafolio.
Inyección de código + Bloque de código — Inserción de pie de página en todo el sitio, además de montajes HTML personalizados 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 — voces y jugadores de una misma consola.
Widgets listos para creadores — Blogs, cursos y estudios de caso para portafolios con diseños independientes.
Ideal para: Blogs de Squarespace, páginas de cursos y asesoramiento, y estudios de caso de portafolios donde los visitantes deben escuchar textos extensos sin salir de la página.
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 Squarespace.
Copia el código de conexión - abierto Integraciones → Squarespace / Sitio web HTML y copie el código de conexión.
Pegar antes — inserta el código a través de Configuración → Avanzado → Inyección de código (Pie de página) antes del cierre etiqueta, luego guarda y publica.
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 con un bloque de código, un elemento incrustado o un HTML personalizado, y solo cuando el widget correspondiente está publicado y configurado.
Modelo de mapeo
Inyección de código, bloques de código y mapeo de contenido.
En Squarespace, la inyección de código del pie de página carga el motor una sola vez. Luego, cada widget asigna bloques de blog, secciones de cursos o texto de portafolio a un punto de montaje de bloque de código, sin integrar audio en el diseño de cada página.
1Código de conexión
Carga el motor desde la inyección de código del pie de página. Sin ella, los bloques de código permanecen vacíos.
2Widget personalizado
Configuración del panel de control: voz, idioma, diseño, configuración de contenido, reglas de URL para blogs y portafolios.
3Bloque de montaje/código
Un marcador en la página (por ejemplo .gsp_full_player) donde aparece la interfaz de usuario del jugador.
4Mapeo de contenido
Selector de contenido = qué texto de Squarespace 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 blogs, cursos y diseños de portafolio.
Jugadores ilimitados por widget — Un widget publicado puede alimentar cada montaje de bloque de código coincidente permitido por las reglas de Render Element + URL.
Bloque de código / HTML personalizado — en Squarespace 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 necesitan valores precisos de selector de contenido/elemento de renderizado.
Jugadores
Agregar jugadores con Bloque de código / HTML personalizado
Coloca cualquiera de estas monturas donde el jugador deba aparecer en la página (Bloque de código / Incrustar / HTML personalizado). Haz clic en una tarjeta para copiarla. Luego configura el widget. Elemento de renderizado a la misma clase.
Mapea los bloques de Squarespace y el texto del blog al jugador.
En el widget Contenido Pestaña, apunta los selectores a los elementos del blog de Squarespace, el contenido del bloque y las secciones del portafolio que los visitantes deberían escuchar; luego coloca el reproductor con un soporte de Bloque de código.
id → # / clase → . — copia desde Inspect; escríbelos con un hash o un punto en la consola.
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.
Define ¿Qué texto se pronuncia?Utilice selectores CSS, separados por comas. Ejemplos:
artículo, .contenido-bloque-sqs, .blog-item-content, #página — lee esos elementos.
artículo,sección,#mi_id,.mi_clase — Múltiples objetivos en un mismo campo.
clase_padre — leer el contenedor principal del montaje (útil para un bloque de código colocado dentro de una sección 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).
RE
Elemento de renderizado
Define donde se inyecta la interfaz de usuario del jugadorDebe coincidir con un elemento real de la página.
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, #página, o .blog-item-content cuando no se utiliza un soporte específico.
Si el selector de contenido es correcto pero no aparece nada, normalmente el elemento de renderizado es incorrecto o falta en esa página.
RP
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.
EX
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: #comments,.sidebar,.ads,.no-speech.
TT
Selector de título / Texto del título
Selector de título — título dinámico de la página (ejemplo: h1).
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.
CT
Texto de contenido
Texto de narración fijo opcional. Cuando se utiliza, el selector de contenido puede permanecer vacío. Útil para introducciones de cursos cortos o resúmenes de portafolios cuando el contenido del DOM no debe controlar el audio.
Regla general para Squarespace: Objetivos del selector de contenido .blog-item-content or .sqs-block-contentRender Element apunta al montaje de Code Block, y Exclude List omite los comentarios y las franjas para compartir.
Ejemplos
Ejemplos prácticos de mapas para blogs y portafolios de Squarespace
Ejemplo A
Caso práctico de portafolio con reproductor de página completa
Una página de estudio de caso con contenido principal y un bloque de código montado debajo del elemento principal:
Selector de contenido - .blog-item-content (o el texto que envuelve su estudio de caso)
Elemento de renderizado - .gsp_full_player
Lista de exclusión - .share-buttons,.related-posts (opcional)
Selector de título - h1 (opcional)
Ejemplo B
Página del curso: Bloque de código dentro del contenido (clase principal)
Si el bloque de código se encuentra dentro de una sección de lección del curso, 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.
Ejemplo C
Publicaciones de blog del creador con un widget de botón
Especial .gsp_button_player en muchas publicaciones de blog. 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 las reglas de voz, diseño o URL deban ser diferentes para los cursos y las páginas de portafolio.
Seleccione el sitio web — abre el sitio de Squarespace 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 blogs o portafolios.
Configurar reproductor / Diseño — voz, paneles, tema, ancho, márgenes.
Publicar y escuchar — Establezca el estado en Publicado, actualice la página de Squarespace en vivo y pruebe la reproducción.
Cuando cambia el texto del blog o del portafolio, 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
Preguntas frecuentes: Conversión de texto a voz e inyección de código en Squarespace
¿Squarespace admite la conversión de texto a voz y las voces de IA con GSpeech?
Sí. GSpeech añade Conversión de texto a voz de Squarespace Con voces de IA natural para blogs, páginas de cursos y portafolios. Conéctate mediante inyección de código, coloca jugadores con un bloque de código y gestiona todo en la consola en la nube; no se requieren claves API.
¿Cómo agrego al jugador con inyección de código y un bloque de código?
Copia el código de conexión de Integraciones → Squarespace / Sitio web HTML. Pégalo en Configuración → Avanzado → Inyección de código (Pie de página) antes . En cada página que necesite audio, agregue un Bloque de código con una montura como por ejemplo <div class="gsp_full_player"></div> y establece Render Element a esa clase.
¿Qué diferencia hay entre Content Selector y Render Element en Squarespace?
Selector de contenido elige qué HTML de Squarespace narrar, por ejemplo .blog-item-content or .sqs-block-content. Elemento de renderizado Elige dónde aparece el jugador; normalmente, en la clase de montaje de tu bloque de código. Si el texto es incorrecto, corrige el selector de contenido; si falta el jugador, corrige el elemento de renderizado.
¿El audio de GSpeech ralentizará mi sitio de Squarespace?
No. El audio se genera y se almacena en caché en el GSpeech En la nube, no en Squarespace. El script de inyección de código del pie de página es ligero y los reproductores se cargan solo donde se añaden bloques de código. Los blogs y las páginas de portafolio mantienen un rendimiento normal mientras los visitantes escuchan bajo demanda.
¿Necesito claves API para añadir voz con IA a Squarespace?
No. GSpeech is No se requieren claves API Para Squarespace. Inicia sesión en la consola en la nube, añade la inyección de código, configura los widgets y publica. Las voces y los reproductores permanecen en una sola cuenta sin necesidad de claves de síntesis de voz de terceros en tu sitio web.
Ayuda
¿Necesitas ayuda para encontrar selectores para un diseño de Squarespace o para insertar código mediante inyección?
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.
