Beartrack

Widgets

Seguimiento de envíos

El buscador de seguimiento de Beartrack, embebido en tu sitio con su propio dominio.

El visitante escribe su número de seguimiento y ve el estado del pedido, la línea de tiempo y —cuando el paquete está en ruta— la hora estimada de llegada con un mini-mapa. Es el mismo flujo de beartrackapp.com/tracking, con el tema del sitio que lo embebe.

Vista previa

https://tracking-widget.beartrackapp.com/embed/tracking
El widget real, embebido en esta página con el mismo snippet que ves más abajo. Se muestra en tema claro porque así está configurado este dominio; el tuyo puedes pedirlo claro u oscuro.

Rutas

/embed/tracking

Buscador. El visitante escribe su número.

/embed/tracking/{followingNumber}

Detalle directo. Úsala si ya conoces el número, por ejemplo desde tu email de despacho.

Snippet

Pégalo donde quieras que aparezca el widget.

<iframe
  src="https://tracking-widget.beartrackapp.com/embed/tracking"
  title="Beartrack Tracking"
  style="width: 100%; min-height: 600px; border: 0; display: block;"
  referrerpolicy="no-referrer-when-downgrade"
  allow="clipboard-write"
  loading="lazy"
></iframe>

<script>
  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://tracking-widget.beartrackapp.com') return
    if (event.data?.type !== 'beartrack:tracking:resize') return

    const iframe = document.querySelector('iframe[title="Beartrack Tracking"]')
    if (iframe && typeof event.data.height === 'number') {
      iframe.style.height = event.data.height + 'px'
    }
  })
</script>

Requisitos

Lo que tiene que llevar tu iframe.

referrerpolicyno-referrer-when-downgrade

Deja que el navegador envíe la cabecera Referer, que es con la que el widget reconoce tu dominio. strict-origin-when-cross-origin también sirve.

listener de postMessagebeartrack:tracking:resize

Ajusta el alto del iframe a cada paso del asistente. En seguimiento también conviene: el bloque de ETA aparece después del render inicial.

El widget se carga en los dominios que autorizamos. Pide el tuyo.

Notas

  • El bloque de ETA y el mini-mapa aparecen cuando el paquete está en ruta, igual que en la página pública.
  • Ese bloque suma entre 350 y 400 px después del render inicial. El listener de postMessage ajusta el iframe para que entre.
  • El mapa muestra el pin del domicilio y la posición del repartidor con unos minutos de retraso. No dibuja su ruta ni sus otras paradas.