Colocar un widget personalizado

Elemento de renderizado vs. Selector de contenido

• Elemento de renderizado = lugar. Ejemplos de montajes: .gsp_full_player, .gsp_button_player, .gsp_circle_player — o un nodo de diseño como #footer-listen.
• Selector de contenido = qué leer. Uno o varios objetivos, separados por comas — p. ej. #main or #intro,.product-description,#specs.
• clase_padre — leer el elemento principal del montaje (útil cuando el montaje se encuentra dentro del bloque de contenido).
• auto_clase — lee el mismo contenedor en el que se encuentra el soporte.
• Lista de exclusión — también separados por comas; omitir navegación, anuncios y comentarios dentro del contenido seleccionado (por ejemplo #comments,.ads,.share-buttons).

Regla de oro: El selector de contenido apunta al texto que usted controla; el elemento de renderizado apunta al soporte (o contenedor) vacío donde debe aparecer el jugador.

Cómo escribir id, clase y comas

No necesitas conocer HTML a fondo; recuerda dos prefijos y luego ensambla o recorta con comas:

• id → # - id="footer-listen" → #footer-listen.
• clase → . - class="gsp_button_player" → .gsp_button_player.
• Solo etiqueta - article, section, h1 (sin prefijo).
• Reúne las piezas — El selector de contenido puede listar varios contenedores: #intro,.body,#cta-note.
• Recortar piezas — La lista de exclusión utiliza el mismo # / . + comas. Ver Lista de exclusión y sin discurso y la guía de llamadas HTML Valores HTML .
• Encuéntralos — Haz clic con el botón derecho en el bloque de la página en vivo → Inspeccionar → Copiar id / class en la consola con el prefijo correcto.

La voz, el idioma y la mayoría de las opciones de Chrome del reproductor siguen siendo las mismas que las del sitio web. Configuración cuando el campo del widget dice Utilice Global — La ubicación no obliga a usar una voz personalizada. Ver Configuración global frente a configuración personalizada.

Cómo colocar un widget personalizado

1. Asegúrese de que el código de conexión del sitio (o la integración con WordPress/CMS) esté activo.
2. Agregue un soporte vacío donde debería aparecer el jugador, por ejemplo <div class="gsp_button_player"></div> En el pie de página o en la barra lateral, HTML personalizado.
3. En la consola de Cloud, abra (o cree) el widget Full / Button / Circle correspondiente y Publicar él.
4. Establecer Elemento de renderizado a la clase de montaje (por ejemplo .gsp_button_player).
5. Establecer Selector de contenido al envoltorio del artículo/producto (o varias piezas con comas, por ejemplo) #intro,.entry-content). Mantener parent_class cuando el soporte se encuentra dentro de ese contenido. Recuerda: id → #, class → ..
6. Opcional: Lista de exclusión (separados por comas, lo mismo) # / . reglas) y URL permitidas/bloqueadas para que el reproductor solo aparezca donde usted desee.
7. Guarda los cambios, vuelve a cargar la página en directo y confirma que el reproductor aparece en la ubicación personalizada mientras lee el contenido correcto.

Diseños comunes

• Botón de escucha en la barra lateral — Elemento de renderizado .gsp_button_player en la barra lateral; Selector de contenido article or .entry-content.
• Franja de pie de página — montaje en la plantilla del pie de página; Content Selector sigue apuntando al artículo principal, por lo que no se menciona el elemento de la página de página.
• Constructor de HTML personalizado — mismos soportes en Wix / Shopify / Squarespace Código personalizado / bloques HTML; clases de mapeo exactamente como en el Guía HTML.