Cómo incrustar una cuenta atrás en tu sitio web
Si usas software de gestión de contenidos o blogs como Blogger, WordPress, Drupal o similar, debes asegurarte de editar tu contenido en modo HTML cuando pegues el código de incrustación.
Incrustar una cuenta atrás de CountingDownTo.com es muy parecido a incrustar un vídeo de un sitio web como YouTube.com.
- Abre tu cuenta atrás. Para crear una nueva, haz clic en Cuentas regresivas para sitios web en el menú de la parte superior de la página. Para encontrar una que creaste antes, haz clic en el icono de cuenta (el icono de persona) en la esquina superior derecha y luego en Mis cuentas regresivas.
- Haz clic en Insertar debajo de la cuenta atrás.
- Copia el código que aparece debajo del botón. Si hay un botón Copy junto al código, puedes hacer clic en él.
- Pega el código en tu sitio web o blog, en el lugar donde quieras que aparezca la cuenta atrás.
Notion y Google Sites necesitan un enlace en lugar de código. El editor muestra ese enlace debajo del código. Canva necesita el enlace para compartir de tu cuenta atrás: en el editor original, haz clic primero en Compartir para obtenerlo. El nuevo editor lo muestra debajo del enlace para Notion y Google Sites.
Si has seguido las instrucciones de esta página pero aún no puedes incrustar tu cuenta atrás, por favor contáctanos para obtener ayuda.
¿Qué plataformas pueden incrustar una cuenta atrás en vivo?
La mayoría de los sitios que permiten pegar HTML personalizado o una URL de iframe mostrarán tu cuenta atrás en vivo y en funcionamiento. Algunos constructores de páginas y herramientas de diseño bloquean los iframes por completo. Esto es lo que hemos verificado nosotros mismos. Las filas de Canvas y Schoology se basan en nuestros registros, que muestran cuentas atrás cargándose en muchos sitios de cursos de esas plataformas, y en el caso de Canvas en su propia guía:
| Plataforma | ¿Cuenta atrás en vivo? | Notas |
|---|---|---|
| WordPress (autoalojado) | Sí | Añade un bloque de HTML personalizado en el editor de bloques y pega el código de incrustación. |
| WordPress.com | Depende del plan | Los planes gratuitos eliminan los iframes. Los planes de pago necesitan activar las "funciones de alojamiento" antes de que el HTML personalizado funcione. Más información. |
| Squarespace | Sí (plan Core o superior) | Añade un bloque de Código y pega el código de incrustación. Requiere un plan Core o superior, o un plan Business o Commerce antiguo. |
| Wix | Sí | Usa Agregar elementos → Embed Code → Popular Embeds → Embed HTML. Ajusta el ancho y el alto del iframe a tu cuenta atrás para que no se corte ni muestre barras de desplazamiento. |
| Google Sites | Sí |
Usa Insertar → Incrustar. Pega el código de incrustación en la pestaña Código de incrustación, o pega la dirección que aparece en
src="..."
de tu código de incrustación en la pestaña Por URL. Si la dirección termina en .js, quita el .js.
|
| Shopify | Sí (con matiz) | Usa una sección Custom Liquid del tema. El editor de descripciones de productos no conserva el código de incrustación en todos los temas, así que usa también una sección Custom Liquid en las páginas de producto. |
| Notion | Sí |
Escribe /embed
y pega la dirección que aparece en src="..."
de tu código de incrustación, no el enlace de compartir. Si la dirección termina en .js, quita el .js.
|
| Canva | Sí, al verlo en línea | Añade la aplicación Embed y pega el enlace de compartir de tu cuenta atrás. Las imágenes, los PDF y los vídeos descargados no pueden mostrar una cuenta atrás en marcha. |
| Canvas | Sí | En el Rich Content Editor, elige Insert → Embed, pega el código de incrustación, haz clic en Submit y luego guarda la página. Estos pasos son de la guía de Canvas para instructores. |
| Schoology | Sí (pasos sin probar) | Las cuentas atrás se muestran en sitios de Schoology, pero no hemos probado los pasos nosotros mismos. Pega el código de incrustación en la vista HTML del editor. |
| Blogger, Drupal, Weebly, Joomla! | Sí | Pega el código de incrustación como HTML personalizado/bruto — consulta las instrucciones específicas de cada plataforma más abajo. |
| Facebook, WhatsApp, YouTube | No | Estas plataformas no permiten incrustaciones de iframe de terceros. Comparte un enlace a la página publicada de tu cuenta atrás. |
| Clientes de correo | No (usa GIF) | Los clientes de correo bloquean los iframes. Usa nuestra cuenta atrás GIF para correo en su lugar. |
Incrustar una cuenta atrás en WordPress
WordPress autoalojado: En el editor de bloques, añade un bloque de HTML personalizado (+ → busca "Custom HTML") y pega el código de incrustación que te dimos. Si la cuenta atrás no aparece en la vista previa del bloque, revisa la página publicada.
WordPress.com: Los sitios gratuitos de WordPress.com no admiten iframes (más información). En los planes de pago debes activar las funciones de alojamiento antes de que el bloque HTML personalizado renderice iframes.
Usuarios del editor clásico: Si aún usas el antiguo editor Visual/Texto, selecciona Texto (no Visual) antes de pegar.
Incrustar una cuenta atrás en Squarespace
Squarespace requiere un plan Core o superior, o un plan Business o Commerce antiguo para incrustar código personalizado. Edita tu página, haz clic en + para añadir un bloque, busca Código y pega el código de incrustación en el bloque Código. Guarda y previsualiza. La cuenta atrás debería funcionar en vivo en tu página publicada.
Incrustar una cuenta atrás en Wix
En el editor de Wix, haz clic en Agregar elementos → Embed Code → Popular Embeds → Embed HTML. Haz clic en Enter Code, pega el código de incrustación y haz clic en Apply.
Importante — tamaño del iframe:
Si la cuenta atrás se recorta o muestra barras de desplazamiento, abre la configuración del elemento de incrustación y ajusta el ancho y la altura para que coincidan con las dimensiones de tu código de incrustación (normalmente el mismo ancho y alto que la
etiqueta <iframe>). Wix no siempre redimensiona automáticamente los iframes incrustados.
Mira un vídeo corto que muestra cómo añadir una cuenta atrás a Wix.
Incrustar una cuenta atrás en Google Sites
Mientras editas tu sitio, haz clic en Insertar
→ Incrustar. En la pestaña Código de incrustación, pega el código de incrustación que te proporcionamos. O bien, en la pestaña Por URL, pega el enlace de incrustación de tu cuenta atrás: la dirección que aparece en
src="..."
de tu código de incrustación. Si la dirección termina en .js, quita el .js.
Después ajusta el tamaño del cuadro de incrustación en la página para que se vea la cuenta atrás completa.
Incrustar una cuenta atrás en Shopify
Añade el código de incrustación a una sección Custom Liquid de tu tema (Tienda online → Temas → Personalizar → Añadir sección). La cuenta atrás se mostrará en vivo en las páginas donde la coloques.
Descripciones de productos: el editor de descripciones de productos no conserva el código de incrustación en todos los temas. Añade en su lugar una sección Custom Liquid a la plantilla de la página de producto.
Incrustar una cuenta atrás en Notion
En cualquier página de Notion, escribe /embed
y pulsa Enter. Pega el enlace de incrustación de tu cuenta atrás y confirma. Notion muestra solo la cuenta atrás, y funciona en vivo.
Tu enlace de incrustación es la dirección que aparece en src="..."
de tu código de incrustación, por ejemplo
https://countingdownto.com/w4/abc123
o https://w2.countingdownto.com/1234567. Si tu código es una etiqueta script, quita el
.js
del final. No pegues el enlace de compartir ni el código de incrustación completo. Arrastra los bordes del bloque para cambiar su tamaño.
Incrustar una cuenta atrás en Canva
Canva puede mostrar una cuenta atrás en vivo en diseños y sitios web de Canva que se ven en línea. En el editor de Canva, abre Aplicaciones, elige Embed y pega el enlace de compartir de tu cuenta atrás.
Si Canva muestra una imagen fija en lugar de una cuenta atrás hecha con el editor nuevo, pega en su lugar su enlace de incrustación: la dirección que está dentro de
src="..."
en tu código de incrustación. Para las cuentas atrás hechas con el editor anterior, usa el enlace para compartir; sus enlaces de incrustación (w2.countingdownto.com) no funcionan en Canva. Una imagen, PDF o vídeo descargado no puede mostrar una cuenta atrás en marcha.
Incrustar una cuenta atrás en Blogger
En el editor de entradas, cambia de Vista de redacción a Vista HTML antes de pegar el código de incrustación. La cuenta atrás no aparecerá mientras editas tu entrada. Solo aparecerá cuando publiques o previsualices tu entrada.
Incrustar una cuenta atrás en Drupal
Elige Full HTML en la lista Formato de texto debajo del campo del cuerpo y luego pega el código de incrustación. La cuenta atrás no aparecerá mientras editas tu página. Solo aparecerá cuando guardes o previsualices tu página.
Incrustar una cuenta atrás en Weebly
Arrastra el elemento Insertar código a tu página, haz clic en él y pega el código de incrustación. Publica tu sitio para ver la cuenta atrás.
Incrustar una cuenta atrás en Joomla!
Haz clic en Alternar editor debajo del editor del artículo para editar el HTML directamente, luego pega el código de incrustación y guarda.
El editor TinyMCE predeterminado de Joomla puede eliminar las etiquetas iframe al guardar. Si la cuenta atrás no aparece, pega el código de incrustación en un módulo Personalizado con el editor desactivado, o pide al administrador de tu sitio que permita los iframes en la configuración del plugin TinyMCE.
Plataformas que no admiten incrustaciones de iframe
Las siguientes plataformas no pueden mostrar una cuenta atrás de iframe en vivo, sin importar qué código de incrustación uses:
- Facebook — comparte un enlace a la página publicada de tu cuenta atrás.
- WhatsApp — comparte un enlace; WhatsApp no renderiza HTML incrustado.
- YouTube — las páginas de canal y descripciones de vídeo de YouTube no admiten iframes de terceros.
- Clientes de correo: Gmail, Outlook, Mailchimp y otras aplicaciones de correo bloquean los iframes por seguridad. Usa nuestra cuenta atrás para correo en su lugar. Crea una imagen animada que la mayoría de las aplicaciones de correo muestran.
Incrustar cuentas atrás en correo electrónico
Las aplicaciones de correo bloquean los iframes, así que las cuentas atrás para correo son imágenes GIF animadas. Crea una en la página de cuentas atrás para correo y haz clic en Agregar a mi correo para obtener el código. En herramientas de email marketing como Mailchimp, Constant Contact, AWeber y Kit (ConvertKit), pega el código en un bloque HTML o de código. Para enviar la cuenta atrás desde Gmail u otra cuenta de correo personal, usa Envíame esta cuenta regresiva por correo en la misma página y reenvía el correo que recibas.
¿Usas Kajabi? Sigue nuestra guía del temporizador de cuenta atrás para Kajabi.
La imagen muestra el tiempo restante cuando se carga. Algunas aplicaciones de correo cargan las imágenes por adelantado, así que puede mostrar un tiempo anterior. Escribe también la fecha en el texto de tu correo.