Añadir bloques de Código personalizado e incrustaciones (Embed)

Cuando necesitas mostrar una herramienta externa justo en medio de una sección de tu página —como un mapa interactivo de Google Maps, un reproductor de Spotify o un widget de reservas de otra plataforma—, puedes usar el bloque Código personalizado (Embed). Este componente te permite insertar fragmentos de HTML, CSS (<style>) y JavaScript (<script>) o etiquetas <iframe> controlando exactamente su posición y tamaño en el lienzo.

Insertar el bloque Código personalizado (Embed) en una sección de tu página

Para colocar una incrustación dentro del diseño de cualquier página:

1. Abre tu sitio en el editor visual y sitúate en la página y sección donde quieras añadir el widget.
2. En la barra de herramientas de la izquierda, haz clic en Insertar (+).
3. Dentro de los componentes disponibles, selecciona Código personalizado (Embed) y arrástralo hacia el contenedor o columna deseada en el lienzo.
4. Con el bloque seleccionado, mira el panel inspector de la derecha y haz clic en Editar código dentro del grupo Código personalizado para abrir el editor de código.
5. Pega el fragmento HTML o <iframe> proporcionado por el servicio externo y aplica los cambios.
6. Ajusta el Ancho y el Alto del bloque desde el grupo Tamaño del inspector para que el widget tenga espacio suficiente sin cortar su contenido ni generar barras de desplazamiento innecesarias.

Si estás diseñando una Página de cada ficha del CMS (por ejemplo, una colección de Sucursales donde cada sede tiene su propio mapa, o una colección de Episodios donde cada ficha tiene un reproductor distinto), también puedes usar la opción Conectar código del CMS en el inspector para que el bloque tome el código directamente desde un campo de texto de esa colección.

Incrustar widgets externos (mapas de Google Maps, calendarios externos, reproductores de audio, formularios de terceros)

Casi cualquier plataforma digital ofrece una opción llamada Compartir → Insertar (Embed) que entrega un código listo para copiar y pegar. Estos son los casos más comunes y cómo aprovecharlos mejor:

• Mapas interactivos (Google Maps): busca tu negocio en Google Maps, pulsa Compartir → Incorporar un mapa, copia el código <iframe src="https://www.google.com/maps/embed?..."></iframe> y pégalo en tu bloque Código personalizado. Si cambias el atributo width="600" del código por width="100%", el mapa se adaptará automáticamente al ancho de la columna en computadoras y celulares.
• Reproductores de audio y pódcast (Spotify, SoundCloud, Apple Podcasts): copia el código de inserción del episodio, álbum o lista de reproducción para que los visitantes escuchen un adelanto sin salir de tu página.
• Calendarios y agendas externas (Calendly, Cal.com, Google Calendar): aunque véltica cuenta con su propio sistema integrado de reservas y pagos en el Catálogo, si ya utilizas un calendario externo puedes pegar su fragmento de inserción dentro de un bloque Embed para mostrarlo en tu sección de contacto.
• Formularios, encuestas o calculadoras de terceros (Typeform, Tally, widgets financieros): pega el código HTML y <script> del proveedor para que el formulario interactivo se renderice dentro de la caja asignada en tu diseño.

Por seguridad y para que puedas mover, redimensionar y seleccionar el bloque con comodidad mientras diseñas, algunos scripts interactivos pueden mostrarse en modo estático dentro del editor. Usa el botón de Vista previa en la barra superior o visita tu sitio publicado para interactuar con el widget tal como lo harán tus visitantes.

Diferencia entre un bloque Embed dentro del lienzo y el código personalizado en los ajustes de la página

En véltica existen dos lugares distintos donde puedes pegar código HTML o scripts, y cada uno cumple una función diferente:

Característica	Bloque Código personalizado (Embed) en el lienzo	Código en la cabecera en Ajustes de página
Dónde se configura	Desde el panel Insertar → Código personalizado dentro de una sección visual.	Desde Páginas → Ajustes de página (⋯) → Avanzado → Código en la cabecera.
En qué parte del HTML se inyecta	Dentro del cuerpo visible de la página (<body>), exactamente en la fila y columna donde coloques el bloque.	Dentro de la etiqueta invisible <head> de esa página antes de que cargue el contenido visual.
Para qué debe usarse	Elementos visuales que ocupan un lugar en el diseño: mapas, reproductores, tablas externas, iframes o botones de pago de terceros.	Etiquetas <meta> de verificación de dominio, píxeles de conversión en páginas de agradecimiento, hojas de estilo globales o scripts de seguimiento sin interfaz visual.

Si lo que necesitas es instalar una herramienta de analítica o un píxel de publicidad en todo tu sitio web a la vez sin ir página por página, recuerda que puedes configurarlo directamente desde el panel principal en Configuración → Analítica y seguimiento.