Widgets
Cómo embeberlos
Trozos de Beartrack que corren dentro de tu sitio: seguimiento de envíos y altas de comercios y repartidores. Se integran con un <iframe> y comparten el mismo contrato.
Qué son
Cada widget es una página que sirve tracking-widget.beartrackapp.com y que tu sitio carga en un iframe. No hay script que instalar ni paquete que actualizar: el widget se despliega de nuestro lado y tu sitio siempre carga la versión vigente.
Aislado
Tu CSS y tu JS no se cruzan con los del widget. Da igual que uses Tailwind, Bootstrap o nada.
Con dominio autorizado
Se carga en los dominios que autorizamos. Pídenos el tuyo y queda habilitado.
Con altura variable
Te avisa su altura por postMessage para que el iframe crezca con el contenido.
Widgets disponibles
Seguimiento de envíos
/embed/trackingEl buscador de seguimiento de Beartrack, embebido en tu sitio con su propio dominio.
Alta de comercios
/embed/registro/ecommerceEl formulario de alta de comercios, co-brandeado con tu operación.
Alta de repartidores
/embed/registro/driversEl formulario de alta de repartidores, co-brandeado con tu operación.
Autorizar tu dominio
El primer paso, y lo hacemos nosotros.
El widget sólo se carga en los dominios de su lista de consumidores. Pídenos que agreguemos el tuyo y queda listo para embeber.
Cómo pedir la autorización
Escríbenos a [email protected] con el host exacto desde el que vas a embeber.Atributos del iframe
Cópialos tal cual en tu snippet.
referrerpolicyno-referrer-when-downgradeLos tres widgetsDeja 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.
allowidentity-credentials-getWidgets de altaHabilita el botón "Continuar con Google" dentro del iframe. Si tu página anida iframes, ponlo en todos.
listener de postMessagebeartrack:tracking:resizeWidgets de altaAjusta el alto del iframe a cada paso del asistente. En seguimiento también conviene: el bloque de ETA aparece después del render inicial.
Auto-resize
Para que el iframe crezca con el contenido.
El widget te avisa su altura con un postMessage cada vez que cambia. Escúchalo y ajusta el alto del 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>El mensaje tiene esta forma:
{
"type": "beartrack:tracking:resize",
"height": 742
}event.origin antes de usar el mensaje. Cualquier página puede mandar postMessage a tu ventana.