Integración con Wix / Squarespace

Information

Wix y Squarespace son constructores de sitios web populares utilizados por más de 250 millones de sitios web en todo el mundo. Ambas plataformas facilitan la integración de temporizadores de gettickr.app sin necesidad de conocimientos de programación.

Wix y Squarespace son conocidos por sus editores visuales fáciles de usar que hacen que la creación de sitios web sea accesible para todos. Ambas plataformas admiten la integración de temporizadores de gettickr.app, aunque cada una tiene su propio enfoque. Esta guía cubre ambas plataformas en detalle.

Comparación de plataformas

Característica	Wix	Squarespace	Notas
Método de integración	Elemento HTML iFrame	Bloque de código	Ambos usan HTML
Dificultad	Fácil	Fácil	No se necesita programación
Posicionamiento	Absoluto (arrastrar)	Basado en bloques (lineal)	Wix más flexible
Responsive	Automático	Automático	Ambos manejan móvil bien
Vista previa	Tiempo real	Tiempo real	Ver cambios inmediatamente
Múltiples temporizadores	✅ Ilimitados	✅ Ilimitados	Añade tantos como necesites
CSS personalizado	✅ Sí	✅ Sí	Soporte para estilos avanzados
Edición móvil	Editor separado	Editor unificado	Enfoques diferentes
Curva de aprendizaje	Baja	Baja	Fácil de usar

Tip

Ambas plataformas son excelentes para la integración de temporizadores. Elige según la plataforma que ya uses o prefieras para la creación general de sitios web.

Integración con Wix

Wix utiliza un editor de arrastrar y soltar que hace que la creación de sitios web sea intuitiva y visual.

Guía paso a paso para Wix

Paso 1: Crea tu temporizador

Ve al Editor
Diseña y configura tu temporizador
Ajusta colores y tipografías para que coincidan con tu sitio de Wix
Copia la URL del temporizador de la sección Renderer

Paso 2: Abre el editor de Wix

Inicia sesión en tu cuenta de Wix
Ve a Mis sitios
Haz clic en "Editar sitio" en el sitio donde quieres añadir el temporizador
Navega a la página donde debe aparecer el temporizador

Paso 3: Añade el elemento HTML iFrame

Haz clic en el botón "+" (Añadir elementos) en la barra lateral izquierda
Desplázate hacia abajo o busca la sección "Integrar"
Haz clic en "Integrar"
Selecciona "HTML iframe" de las opciones
Wix coloca un elemento de marcador de posición en tu página

Information

El elemento HTML iFrame está diseñado específicamente para integrar contenido externo como temporizadores, vídeos y mapas. Es la misma tecnología utilizada para integraciones de YouTube.

Paso 4: Configura el iFrame

Haz clic en el elemento iFrame para seleccionarlo
Haz clic en "Introducir código" o en el icono de Configuración
En la sección "Código", selecciona la pestaña "Código" (no URL)
Pega tu código iFrame:

<iframe
  src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none;"
  title="Temporizador de cuenta atrás"
>
</iframe>

Haz clic en "Actualizar"

Paso 5: Posiciona y redimensiona

Arrastra el elemento a la posición deseada
Redimensiona arrastrando los controles de las esquinas
Usa las guías de alineación de Wix (líneas azules) para alinear con otros elementos
Mantén presionado Shift mientras arrastras para mantener las proporciones

Paso 6: Optimización móvil

Haz clic en el icono móvil en la barra de herramientas superior
Cambia al Editor móvil
Reposiciona y redimensiona el temporizador para pantallas móviles
Los diseños móvil y escritorio son independientes en Wix

Tip

Wix permite posicionamiento separado para móvil y escritorio. Aprovecha esto para crear diseños óptimos para cada tipo de dispositivo.

Paso 7: Publica

Haz clic en "Vista previa" para ver cómo se ve antes de publicar
Prueba en vistas de escritorio y móvil
Haz clic en "Publicar" cuando estés satisfecho
Tu temporizador ya está en vivo

Configuración de elementos de Wix

Configuración	Ubicación	Propósito	Recomendación
Ancho	Controles de tamaño	Ancho del elemento	Usar ancho completo
Alto	Controles de tamaño	Alto del elemento	300-500px
Posición	Arrastrar elemento	Coordenadas X/Y	Centro/parte superior
Alineación	Menú clic derecho	Alinear con otros elementos	Usar guías
Bloquear	Menú clic derecho	Prevenir movimiento accidental	Después de finalizar
Duplicar	Menú clic derecho	Copiar para múltiples temporizadores	Ahorra tiempo
Ocultar en móvil	Configuración elem.	Mostrar solo en escritorio	Opcional
Animaciones	Configuración elem.	Efectos de entrada	Solo sutiles

Consejos de posicionamiento en Wix

Ventajas del posicionamiento absoluto:

Control pixel perfecto
Superposición en imágenes/secciones
Diseños creativos
Diseños profesionales

Consideraciones del posicionamiento absoluto:

Probar móvil cuidadosamente
Puede superponerse en pantallas pequeñas
Requiere ajuste manual para móvil

Warning

Cuando uses el posicionamiento libre de Wix, siempre prueba cómo se reorganizan los elementos en dispositivos móviles. Lo que se ve perfecto en escritorio podría superponerse o crear espacios en móvil.

Ejemplo de fragmento de código para Wix

Temporizador hero de ancho completo:

<div
  style="width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 20px;"
>
  <h2 style="text-align: center; font-size: 36px; margin-bottom: 20px;">
    ¡Oferta por tiempo limitado!
  </h2>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; display: block;"
    title="Temporizador de oferta"
  >
  </iframe>
</div>

Temporizador compacto para barra lateral:

<div
  style="background: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center;"
>
  <h3 style="margin-top: 0; font-size: 20px;">Cuenta atrás del evento</h3>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="250"
    frameborder="0"
    style="border: none;"
    title="Temporizador del evento"
  >
  </iframe>
  <p style="margin-bottom: 0; font-size: 14px;">¡No te lo pierdas!</p>
</div>

Integración con Squarespace

Squarespace utiliza un sistema de edición basado en bloques con un enfoque limpio y moderno.

Guía paso a paso para Squarespace

Paso 1: Crea tu temporizador

Ve al Editor
Diseña un temporizador que coincida con la estética de tu sitio de Squarespace
Los sitios de Squarespace suelen tener diseños minimalistas. Considera estilos de temporizador simples
Copia la URL del temporizador

Paso 2: Abre el editor de Squarespace

Inicia sesión en tu cuenta de Squarespace
Ve a Páginas en el menú izquierdo
Navega a la página donde quieres el temporizador
Haz clic en "Editar" para abrir el editor de páginas

Paso 3: Añade bloque de código

Pasa el cursor sobre donde quieres el temporizador (entre bloques existentes)
Haz clic en el "+" (Punto de inserción) que aparece
Busca o desplázate hasta "Código"
Haz clic en "Código" para añadir un bloque de código
Aparece un editor de código con el marcador de posición <h1>HELLO</h1>

Paso 4: Introduce el código del temporizador

Elimina el código del marcador de posición
Pega tu código iFrame:

<iframe
  src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none; max-width: 100%;"
  title="Temporizador de cuenta atrás"
>
</iframe>

Haz clic en "Aplicar" en la parte inferior derecha
El temporizador aparece en el flujo de tu página

Information

El bloque de código de Squarespace admite HTML, CSS y JavaScript. Para la integración básica de temporizadores, solo necesitas el modo HTML (el predeterminado).

Paso 5: Ajusta la posición del bloque

Arrastra el bloque de código hacia arriba o hacia abajo para reordenar
Usa el menú del bloque (pasar cursor → hacer clic en seis puntos) para más opciones
Posiciones comunes:
- Encima del contenido de la página - Máxima visibilidad
- Debajo del encabezado - Posicionamiento contextual
- Antes del pie de página - Prominente pero no intrusivo

Paso 6: Personaliza la configuración del bloque

Pasa el cursor sobre el bloque de código
Haz clic en "Editar" para modificar el código
Haz clic en "Duplicar" para copiar para múltiples temporizadores
Haz clic en "Eliminar" para borrar

Paso 7: Guarda y publica

Haz clic en "Guardar" en la parte superior izquierda
Haz clic en "Vista previa" para probar antes de publicar
Usa los iconos de vista previa de dispositivos para probar vistas móvil/tablet
Haz clic en "Publicar" o "Actualizar" cuando esté listo

Tipos de bloques de Squarespace

Tipo de bloque	Caso de uso	Soporte temporizador	Notas
Código	Integrar temporizadores	✅ Perfecto	Método recomendado
Markdown	Texto con HTML	⚠️ Limitado	No ideal para iFrames
Integrar	Integraciones basadas en URL	❌ No	Requiere proveedores específicos
HTML	Legacy (versiones antiguas)	✅ Sí	Usar bloque Código en 7.1
CSS personalizado	Estilos a nivel del sitio	⬜ Indirecto	Para estilizar temporizadores existentes

Tip

Siempre usa el bloque de código para la integración de temporizadores en Squarespace 7.1 (la versión actual). Está diseñado específicamente para HTML personalizado como iFrames.

Ejemplos de código para Squarespace

Temporizador de sección hero:

<section
  style="text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;"
>
  <h1 style="font-size: 48px; margin: 0 0 10px 0;">Rebajas de verano</h1>
  <p style="font-size: 24px; margin: 0 0 30px 0;">¡Termina pronto!</p>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; max-width: 1000px;"
    title="Temporizador de oferta"
  >
  </iframe>
</section>

Temporizador de contenido en línea:

<div style="margin: 40px auto; max-width: 800px;">
  <h3 style="text-align: center; margin-bottom: 20px;">
    El evento comienza en:
  </h3>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="300"
    frameborder="0"
    style="border: none; display: block;"
    title="Temporizador del evento"
  >
  </iframe>
</div>

Temporizador de lanzamiento de producto:

<div
  style="background: #f5f5f5; padding: 40px; border-radius: 8px; margin: 20px 0;"
>
  <h2 style="text-align: center; margin-top: 0; color: #333;">
    🚀 Lanzamiento de nuevo producto
  </h2>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="350"
    frameborder="0"
    style="border: none;"
    title="Temporizador de lanzamiento"
  >
  </iframe>
  <p style="text-align: center; margin-bottom: 0;">
    <a
      href="/shop"
      style="display: inline-block; padding: 12px 30px; background: #000; color: #fff; text-decoration: none; border-radius: 4px; margin-top: 20px;"
    >
      Recibir notificación
    </a>
  </p>
</div>

Estilos avanzados (ambas plataformas)

CSS personalizado para Wix

Ubicación: Configuración del sitio → Código personalizado → Añadir código personalizado (en <head>)

<style>
  /* Estilizar todos los iFrames del sitio */
  iframe {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }

  /* Estilos específicos para móvil */
  @media (max-width: 768px) {
    iframe {
      height: 300px !important;
    }
  }
</style>

CSS personalizado para Squarespace

Ubicación: Diseño → CSS personalizado

/* Estilizar iFrames de bloques de código */
.sqs-block-code iframe {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.sqs-block-code iframe:hover {
  transform: scale(1.02);
}

/* Optimización móvil */
@media screen and (max-width: 767px) {
  .sqs-block-code iframe {
    height: 250px !important;
  }
}

Tip

Usa CSS personalizado para añadir estilos consistentes en todos los temporizadores de tu sitio sin editar cada código de integración individualmente.

Solución de problemas

Solución de problemas en Wix

Problema	Causa	Solución
El temporizador no se muestra	Tipo de elemento incorrecto	Usar HTML iFrame, no otra integración
El código aparece como texto	Usando cuadro de texto	Usar elemento HTML iFrame
Temporizador demasiado pequeño	Tamaño de elemento muy pequeño	Redimensionar controles del elemento
Superposición en móvil	Posicionamiento absoluto	Ajustar en Editor móvil
No encuentro HTML iFrame	Buscando en lugar incorrecto	Añadir elementos → Integrar → HTML iframe
Temporizador congelado	Error de sintaxis en código	Verificar código iFrame por errores tipográficos

Warning

Wix actualiza automáticamente su interfaz de editor. Si no encuentras "HTML iFrame", busca "Código de integración" o "Elemento personalizado". La función permanece pero los nombres pueden cambiar.

Solución de problemas en Squarespace

Problema	Causa	Solución
El temporizador no aparece	Tipo de bloque incorrecto	Usar bloque de código, no Markdown
Pantalla negra	URL incorrecta	Verificar que la URL del temporizador es correcta
Temporizador muy ancho	Sin max-width	Añadir `max-width: 100%` al estilo
No puedo editar código	Bloque no seleccionado	Hacer clic en Editar en el bloque de código
Altura incorrecta	Px fijo no establecido	Especificar altura en píxeles
Se ve mal en móvil	Solo prueba escritorio	Vista previa en móvil antes de publicar

Information

Squarespace 7.1 (versión actual) usa bloques de código. Los sitios más antiguos de Squarespace 7.0 usan métodos de integración diferentes. Esta guía cubre la versión 7.1.

Consideraciones de rendimiento

Ambas plataformas optimizan el rendimiento automáticamente, pero considera:

Consideración	Recomendación	Por qué
Cantidad de temporizadores	1-3 por página máx.	Evitar tiempos de carga lentos
Tamaño del temporizador	Apropiado para la ubicación	No cargar iFrames enormes
Móvil primero	Diseñar para móvil	La mayor parte del tráfico es móvil
Calidad de imagen	Optimizar otras imágenes de página	No agravar problemas
Terceros	Limitar otras integraciones	Cada integración añade latencia

Tip

Si tu página carga lentamente después de añadir temporizadores, verifica el tamaño total de la página usando las herramientas de desarrollador del navegador (F12 → pestaña Red).

Consideraciones específicas de plantillas

Plantillas de Wix

Tipo de plantilla	Mejor ubicación del temporizador	Notas
Plantilla en blanco	En cualquier lugar (control total)	Máxima flexibilidad
Tienda	Páginas de producto, inicio	Enfoque en conversión
Eventos	Sección hero, barras laterales	Cuenta atrás de eventos encaja naturalmente
Portafolio	Páginas de proyecto	Temporizadores de lanzamiento/plazo
Blog	Encabezado de publicación, barra lateral	Temporizadores específicos del contenido

Plantillas de Squarespace

Familia de plantilla	Mejor ubicación del temporizador	Notas
Avenue	Páginas índice, hero	Funcionan temporizadores de ancho completo
Familia Brine	Secciones de contenido	Sistema de bloques flexible
Bedford	Debajo de encabezados	Diseño clásico
Five	Páginas de destino	Enfoque de página única
Seven	Páginas de producto	Optimizado para e-commerce

Information

Cada familia de plantillas de Squarespace tiene diferentes anchos máximos y diseños. Diseña temporizadores que funcionen dentro de las restricciones de tu plantilla.

Próximos pasos

Integración iFrame - Guía detallada de personalización de iFrame
Personalizar diseño del temporizador - Haz coincidir con la estética de tu sitio
Integración con WordPress - Si también usas WordPress
Integración con Shopify - Para tiendas de comercio electrónico

Tip

Tanto Wix como Squarespace hacen que la integración de temporizadores sea simple. Elige la plataforma que se ajuste a tus necesidades generales del sitio web, y los temporizadores funcionarán genial en cualquiera de las dos.

Integración con Wix / Squarespace

Information

Comparación de plataformas

Característica	Wix	Squarespace	Notas
Método de integración	Elemento HTML iFrame	Bloque de código	Ambos usan HTML
Dificultad	Fácil	Fácil	No se necesita programación
Posicionamiento	Absoluto (arrastrar)	Basado en bloques (lineal)	Wix más flexible
Responsive	Automático	Automático	Ambos manejan móvil bien
Vista previa	Tiempo real	Tiempo real	Ver cambios inmediatamente
Múltiples temporizadores	✅ Ilimitados	✅ Ilimitados	Añade tantos como necesites
CSS personalizado	✅ Sí	✅ Sí	Soporte para estilos avanzados
Edición móvil	Editor separado	Editor unificado	Enfoques diferentes
Curva de aprendizaje	Baja	Baja	Fácil de usar

Tip

Ambas plataformas son excelentes para la integración de temporizadores. Elige según la plataforma que ya uses o prefieras para la creación general de sitios web.

Integración con Wix

Wix utiliza un editor de arrastrar y soltar que hace que la creación de sitios web sea intuitiva y visual.

Guía paso a paso para Wix

Paso 1: Crea tu temporizador

Ve al Editor
Diseña y configura tu temporizador
Ajusta colores y tipografías para que coincidan con tu sitio de Wix
Copia la URL del temporizador de la sección Renderer

Paso 2: Abre el editor de Wix

Inicia sesión en tu cuenta de Wix
Ve a Mis sitios
Haz clic en "Editar sitio" en el sitio donde quieres añadir el temporizador
Navega a la página donde debe aparecer el temporizador

Paso 3: Añade el elemento HTML iFrame

Haz clic en el botón "+" (Añadir elementos) en la barra lateral izquierda
Desplázate hacia abajo o busca la sección "Integrar"
Haz clic en "Integrar"
Selecciona "HTML iframe" de las opciones
Wix coloca un elemento de marcador de posición en tu página

Information

El elemento HTML iFrame está diseñado específicamente para integrar contenido externo como temporizadores, vídeos y mapas. Es la misma tecnología utilizada para integraciones de YouTube.

Paso 4: Configura el iFrame

Haz clic en el elemento iFrame para seleccionarlo
Haz clic en "Introducir código" o en el icono de Configuración
En la sección "Código", selecciona la pestaña "Código" (no URL)
Pega tu código iFrame:

<iframe
  src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none;"
  title="Temporizador de cuenta atrás"
>
</iframe>

Haz clic en "Actualizar"

Paso 5: Posiciona y redimensiona

Arrastra el elemento a la posición deseada
Redimensiona arrastrando los controles de las esquinas
Usa las guías de alineación de Wix (líneas azules) para alinear con otros elementos
Mantén presionado Shift mientras arrastras para mantener las proporciones

Paso 6: Optimización móvil

Haz clic en el icono móvil en la barra de herramientas superior
Cambia al Editor móvil
Reposiciona y redimensiona el temporizador para pantallas móviles
Los diseños móvil y escritorio son independientes en Wix

Tip

Wix permite posicionamiento separado para móvil y escritorio. Aprovecha esto para crear diseños óptimos para cada tipo de dispositivo.

Paso 7: Publica

Haz clic en "Vista previa" para ver cómo se ve antes de publicar
Prueba en vistas de escritorio y móvil
Haz clic en "Publicar" cuando estés satisfecho
Tu temporizador ya está en vivo

Configuración de elementos de Wix

Configuración	Ubicación	Propósito	Recomendación
Ancho	Controles de tamaño	Ancho del elemento	Usar ancho completo
Alto	Controles de tamaño	Alto del elemento	300-500px
Posición	Arrastrar elemento	Coordenadas X/Y	Centro/parte superior
Alineación	Menú clic derecho	Alinear con otros elementos	Usar guías
Bloquear	Menú clic derecho	Prevenir movimiento accidental	Después de finalizar
Duplicar	Menú clic derecho	Copiar para múltiples temporizadores	Ahorra tiempo
Ocultar en móvil	Configuración elem.	Mostrar solo en escritorio	Opcional
Animaciones	Configuración elem.	Efectos de entrada	Solo sutiles

Consejos de posicionamiento en Wix

Ventajas del posicionamiento absoluto:

Control pixel perfecto
Superposición en imágenes/secciones
Diseños creativos
Diseños profesionales

Consideraciones del posicionamiento absoluto:

Probar móvil cuidadosamente
Puede superponerse en pantallas pequeñas
Requiere ajuste manual para móvil

Warning

Ejemplo de fragmento de código para Wix

Temporizador hero de ancho completo:

<div
  style="width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 20px;"
>
  <h2 style="text-align: center; font-size: 36px; margin-bottom: 20px;">
    ¡Oferta por tiempo limitado!
  </h2>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; display: block;"
    title="Temporizador de oferta"
  >
  </iframe>
</div>

Temporizador compacto para barra lateral:

<div
  style="background: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center;"
>
  <h3 style="margin-top: 0; font-size: 20px;">Cuenta atrás del evento</h3>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="250"
    frameborder="0"
    style="border: none;"
    title="Temporizador del evento"
  >
  </iframe>
  <p style="margin-bottom: 0; font-size: 14px;">¡No te lo pierdas!</p>
</div>

Integración con Squarespace

Squarespace utiliza un sistema de edición basado en bloques con un enfoque limpio y moderno.

Guía paso a paso para Squarespace

Paso 1: Crea tu temporizador

Ve al Editor
Diseña un temporizador que coincida con la estética de tu sitio de Squarespace
Los sitios de Squarespace suelen tener diseños minimalistas. Considera estilos de temporizador simples
Copia la URL del temporizador

Paso 2: Abre el editor de Squarespace

Inicia sesión en tu cuenta de Squarespace
Ve a Páginas en el menú izquierdo
Navega a la página donde quieres el temporizador
Haz clic en "Editar" para abrir el editor de páginas

Paso 3: Añade bloque de código

Pasa el cursor sobre donde quieres el temporizador (entre bloques existentes)
Haz clic en el "+" (Punto de inserción) que aparece
Busca o desplázate hasta "Código"
Haz clic en "Código" para añadir un bloque de código
Aparece un editor de código con el marcador de posición <h1>HELLO</h1>

Paso 4: Introduce el código del temporizador

Elimina el código del marcador de posición
Pega tu código iFrame:

<iframe
  src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none; max-width: 100%;"
  title="Temporizador de cuenta atrás"
>
</iframe>

Haz clic en "Aplicar" en la parte inferior derecha
El temporizador aparece en el flujo de tu página

Information

El bloque de código de Squarespace admite HTML, CSS y JavaScript. Para la integración básica de temporizadores, solo necesitas el modo HTML (el predeterminado).

Paso 5: Ajusta la posición del bloque

Arrastra el bloque de código hacia arriba o hacia abajo para reordenar
Usa el menú del bloque (pasar cursor → hacer clic en seis puntos) para más opciones
Posiciones comunes:
- Encima del contenido de la página - Máxima visibilidad
- Debajo del encabezado - Posicionamiento contextual
- Antes del pie de página - Prominente pero no intrusivo

Paso 6: Personaliza la configuración del bloque

Pasa el cursor sobre el bloque de código
Haz clic en "Editar" para modificar el código
Haz clic en "Duplicar" para copiar para múltiples temporizadores
Haz clic en "Eliminar" para borrar

Paso 7: Guarda y publica

Haz clic en "Guardar" en la parte superior izquierda
Haz clic en "Vista previa" para probar antes de publicar
Usa los iconos de vista previa de dispositivos para probar vistas móvil/tablet
Haz clic en "Publicar" o "Actualizar" cuando esté listo

Tipos de bloques de Squarespace

Tipo de bloque	Caso de uso	Soporte temporizador	Notas
Código	Integrar temporizadores	✅ Perfecto	Método recomendado
Markdown	Texto con HTML	⚠️ Limitado	No ideal para iFrames
Integrar	Integraciones basadas en URL	❌ No	Requiere proveedores específicos
HTML	Legacy (versiones antiguas)	✅ Sí	Usar bloque Código en 7.1
CSS personalizado	Estilos a nivel del sitio	⬜ Indirecto	Para estilizar temporizadores existentes

Tip

Siempre usa el bloque de código para la integración de temporizadores en Squarespace 7.1 (la versión actual). Está diseñado específicamente para HTML personalizado como iFrames.

Ejemplos de código para Squarespace

Temporizador de sección hero:

<section
  style="text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;"
>
  <h1 style="font-size: 48px; margin: 0 0 10px 0;">Rebajas de verano</h1>
  <p style="font-size: 24px; margin: 0 0 30px 0;">¡Termina pronto!</p>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; max-width: 1000px;"
    title="Temporizador de oferta"
  >
  </iframe>
</section>

Temporizador de contenido en línea:

<div style="margin: 40px auto; max-width: 800px;">
  <h3 style="text-align: center; margin-bottom: 20px;">
    El evento comienza en:
  </h3>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="300"
    frameborder="0"
    style="border: none; display: block;"
    title="Temporizador del evento"
  >
  </iframe>
</div>

Temporizador de lanzamiento de producto:

<div
  style="background: #f5f5f5; padding: 40px; border-radius: 8px; margin: 20px 0;"
>
  <h2 style="text-align: center; margin-top: 0; color: #333;">
    🚀 Lanzamiento de nuevo producto
  </h2>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="350"
    frameborder="0"
    style="border: none;"
    title="Temporizador de lanzamiento"
  >
  </iframe>
  <p style="text-align: center; margin-bottom: 0;">
    <a
      href="/shop"
      style="display: inline-block; padding: 12px 30px; background: #000; color: #fff; text-decoration: none; border-radius: 4px; margin-top: 20px;"
    >
      Recibir notificación
    </a>
  </p>
</div>

Estilos avanzados (ambas plataformas)

CSS personalizado para Wix

Ubicación: Configuración del sitio → Código personalizado → Añadir código personalizado (en <head>)

<style>
  /* Estilizar todos los iFrames del sitio */
  iframe {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }

  /* Estilos específicos para móvil */
  @media (max-width: 768px) {
    iframe {
      height: 300px !important;
    }
  }
</style>

CSS personalizado para Squarespace

Ubicación: Diseño → CSS personalizado

/* Estilizar iFrames de bloques de código */
.sqs-block-code iframe {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.sqs-block-code iframe:hover {
  transform: scale(1.02);
}

/* Optimización móvil */
@media screen and (max-width: 767px) {
  .sqs-block-code iframe {
    height: 250px !important;
  }
}

Tip

Usa CSS personalizado para añadir estilos consistentes en todos los temporizadores de tu sitio sin editar cada código de integración individualmente.

Solución de problemas

Solución de problemas en Wix

Problema	Causa	Solución
El temporizador no se muestra	Tipo de elemento incorrecto	Usar HTML iFrame, no otra integración
El código aparece como texto	Usando cuadro de texto	Usar elemento HTML iFrame
Temporizador demasiado pequeño	Tamaño de elemento muy pequeño	Redimensionar controles del elemento
Superposición en móvil	Posicionamiento absoluto	Ajustar en Editor móvil
No encuentro HTML iFrame	Buscando en lugar incorrecto	Añadir elementos → Integrar → HTML iframe
Temporizador congelado	Error de sintaxis en código	Verificar código iFrame por errores tipográficos

Warning

Solución de problemas en Squarespace

Problema	Causa	Solución
El temporizador no aparece	Tipo de bloque incorrecto	Usar bloque de código, no Markdown
Pantalla negra	URL incorrecta	Verificar que la URL del temporizador es correcta
Temporizador muy ancho	Sin max-width	Añadir `max-width: 100%` al estilo
No puedo editar código	Bloque no seleccionado	Hacer clic en Editar en el bloque de código
Altura incorrecta	Px fijo no establecido	Especificar altura en píxeles
Se ve mal en móvil	Solo prueba escritorio	Vista previa en móvil antes de publicar

Information

Squarespace 7.1 (versión actual) usa bloques de código. Los sitios más antiguos de Squarespace 7.0 usan métodos de integración diferentes. Esta guía cubre la versión 7.1.

Consideraciones de rendimiento

Ambas plataformas optimizan el rendimiento automáticamente, pero considera:

Consideración	Recomendación	Por qué
Cantidad de temporizadores	1-3 por página máx.	Evitar tiempos de carga lentos
Tamaño del temporizador	Apropiado para la ubicación	No cargar iFrames enormes
Móvil primero	Diseñar para móvil	La mayor parte del tráfico es móvil
Calidad de imagen	Optimizar otras imágenes de página	No agravar problemas
Terceros	Limitar otras integraciones	Cada integración añade latencia

Tip

Si tu página carga lentamente después de añadir temporizadores, verifica el tamaño total de la página usando las herramientas de desarrollador del navegador (F12 → pestaña Red).

Consideraciones específicas de plantillas

Plantillas de Wix

Tipo de plantilla	Mejor ubicación del temporizador	Notas
Plantilla en blanco	En cualquier lugar (control total)	Máxima flexibilidad
Tienda	Páginas de producto, inicio	Enfoque en conversión
Eventos	Sección hero, barras laterales	Cuenta atrás de eventos encaja naturalmente
Portafolio	Páginas de proyecto	Temporizadores de lanzamiento/plazo
Blog	Encabezado de publicación, barra lateral	Temporizadores específicos del contenido

Plantillas de Squarespace

Familia de plantilla	Mejor ubicación del temporizador	Notas
Avenue	Páginas índice, hero	Funcionan temporizadores de ancho completo
Familia Brine	Secciones de contenido	Sistema de bloques flexible
Bedford	Debajo de encabezados	Diseño clásico
Five	Páginas de destino	Enfoque de página única
Seven	Páginas de producto	Optimizado para e-commerce

Information

Cada familia de plantillas de Squarespace tiene diferentes anchos máximos y diseños. Diseña temporizadores que funcionen dentro de las restricciones de tu plantilla.

Próximos pasos

Integración iFrame - Guía detallada de personalización de iFrame
Personalizar diseño del temporizador - Haz coincidir con la estética de tu sitio
Integración con WordPress - Si también usas WordPress
Integración con Shopify - Para tiendas de comercio electrónico

Tip