Koru Countdown Bar

Barra de urgencia con cuenta regresiva. Aumenta conversiones con timers de fecha fija, evergreen o diario — configurable sin código.

La Koru Countdown Bar es una barra de urgencia con cuenta regresiva. Sirve para empujar conversiones en campañas, ofertas por tiempo limitado o promociones diarias.

Todo el contenido —mensaje, timer, colores, botón— se configura desde el panel de Koru, sin tocar el código del sitio. En el sitio solo pegás el código de integración (o instalás la app de VTEX) una sola vez.

Vas a necesitar tu Website ID required y tu App ID required. Los dos salen del panel de Koru, en la ficha de la app → botón Copiar Código / sección Info de Integración.

Instalación

Elegí la pestaña según tu tienda: si corrés en VTEX IO, instalá la app; para cualquier otra plataforma (Tiendanube, Shopify, WordPress, HTML propio, etc.) usá el código de integración.

El widget se instala como una app del theme y se renderiza con el bloque countdown-bar. El contenido lo decide Koru; en el theme solo van las credenciales.

Agregá la app como dependencia del theme

En el manifest.json de tu theme:

"dependencies": {
  "{vendor}.koru-countdown-bar": "0.x"
}

Reemplazá {vendor} por el nombre de tu cuenta VTEX. El nombre completo de la app publicada para tu cuenta te lo da Koru.

Declará el bloque donde quieras mostrarlo

En el bloque del theme correspondiente (header, footer, ficha de producto…) declarás el bloque countdown-bar con tus credenciales de Koru:

"countdown-bar": {
  "props": {
    "websiteId": "TU-WEBSITE-ID",
    "appId": "TU-APP-ID"
  }
}

Y lo agregás como hijo del bloque donde lo querés ver. Por ejemplo, arriba de todo en el header:

"header-layout.desktop": {
  "children": [
    "countdown-bar",
    "header-row#1-desktop",
    "header-row#2-desktop"
  ]
}

¿En varios lugares a la vez? Usá un `#id` por instancia

Si querés la barra en más de un lugar (ej: header y ficha de producto), declarás cada instancia con su propio #id y un blockClass para poder estilarla aparte:

"countdown-bar#pdp": {
  "props": {
    "websiteId": "TU-WEBSITE-ID",
    "appId": "TU-APP-ID",
    "blockClass": "koru-pdp"
  }
}

Ese blockClass genera el handle countdownBar--koru-pdp, que es lo que usás para el CSS del paso siguiente.

Koru tiene una sola posición por app. Para tenerlo en varios lugares a la vez, poné la posición en inline y resolvé cada ubicación por CSS con el blockClass de cada instancia.

(Opcional) Ajustá la forma por CSS

La barra hereda colores y tipografía de la tienda automáticamente. Lo que tiene que ver con la forma (radius, ancho, fijado) se hace por CSS en el theme, apuntando al handle de la instancia. En el archivo de override de la app (styles/css/<vendor>.koru-countdown-bar.css):

/* Tarjeta compacta y redondeada para la instancia del PDP */
.countdownBar--koru-pdp {
  max-width: 350px;
  margin: 0 auto 20px;
  border-radius: 15px;
  overflow: hidden;
}
 
/* Barra del header pegada al tope al scrollear */
.countdownBar--koru-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

Estilá con los handles directos (.countdownBar--…) en el archivo de override de la app. No uses :global() apuntando a la app desde otro archivo: el build de VTEX lo rechaza.

Configuración (cómo usar)

Una vez instalada, todo se maneja desde el panel de Koru → Configurar Apps → Koru Countdown Bar. No hace falta volver a tocar el sitio.

Tipo de timer

Es lo primero que definís: cómo se cuenta el tiempo.

Tipo (`timer_type`)	Qué hace	Campos que usa
Fecha fija (`to-date`)	Cuenta hasta una fecha y hora exactas. Ideal para un evento puntual (Black Friday, fin de promo).	`end_date`
Diario (`daily`)	Se reinicia todos los días y cuenta hasta una hora fija. Ideal para "la oferta termina hoy a las 23:59".	`daily_end_time`
Evergreen (`evergreen`)	Cuenta una duración fija desde que cada visitante entra (persistida por usuario). Ideal para urgencia personalizada.	`duration_min`

Posición

Posición (`position`)	Comportamiento	¿Necesita CSS?
`top-sticky`	Barra fija arriba, todo el ancho, en todas las páginas. Empuja el header de la tienda para no taparlo.	No
`bottom-sticky`	Barra fija abajo, todo el ancho.	No
`inline`	Se inserta donde la coloques (ej: dentro del PDP).	Sí, para darle forma

Contenido y botón

Campo	Descripción
`message_text`	Mensaje principal de la barra (ej: "¡Oferta Limitada!").
`button_text`	Texto del botón / call to action. Si lo dejás vacío, no se muestra el botón.
`button_link`	A dónde lleva el botón al hacer click (ej: la categoría en promo).
`show_days`	Mostrar u ocultar el bloque de Días en el reloj.
`close_button`	Permitir al visitante cerrar la barra (se recuerda en su sesión).
`font_size`	Tamaño del texto del mensaje, en px.

Comportamiento al finalizar

Qué pasa cuando el contador llega a cero (on_finish):

Ocultar (`hide`)

La barra desaparece. Es el comportamiento por defecto.

Mostrar mensaje (`message`)

La barra queda visible con el texto de finish_message (ej: "Oferta Terminada").

Redirigir (`redirect`)

Manda al visitante a la URL de finish_url.

Colores

Los colores son opcionales a propósito. Si no los definís en Koru, la barra hereda el look de la tienda (fondo, texto y tipografía del style.json en VTEX, o los estilos heredados en otras plataformas). Si querés colores propios, configurás: bg_color, text_color, timer_bg, timer_text, button_bg_color y button_text_color.

El botón tiene un acento de urgencia (rojo) por defecto para que resalte sobre la barra. Podés cambiarlo con button_bg_color / button_text_color.