Run this in the browser console on https://track.bpost.cloud ; don’t forget to update the first 3 lines.

bpost-tracking.js

const trackingCode = '324567890'
const postCode = 1000
const language = 'EN' // 'FR', 'NL', 'EN'

let intervalId = null
let status = null
let deliveryWindow = null

const deliveredPicApi = 'https://track.bpost.cloud/track/asset'

intervalId = setInterval(() => {
  fetch('https://track.bpost.cloud/track/items?itemIdentifier=' + trackingCode + '&postalCode=' + postCode)
    .then(res => {
      res.json().then(async data => {
        const item = data.items[0]
        status = item.events

        // Stop polling when the item is delivered
        if(item.activeStep?.name == 'delivered') {
          clearInterval(intervalId)
          intervalId = null
        }

        let innerHtml = ''

        const deliveredPicId = item?.actualDeliveryInformation?.safeplacePicture?.refId

        // Sender
        const sender = item.senderCommercialName ?? item.sender?.name
        innerHtml += `<small>📦 ${sender}</small>`

        // Status time
        innerHtml += `<span id="last-status">${status[0].time}`

        // Status message
        if (!deliveredPicId) {
          innerHtml += `<br>${status[0].key[language].description}`
        }

        // Stops left
        if (!deliveredPicId && 'expectedDeliveryTimeRange' in item) {
          const res = await fetch(`https://track.bpost.cloud/track/itemonroundstatus?itemIdentifier=${trackingCode}&postalCode=${postCode}`)
          const data = await res.json()
          if ('itemOnRoundStatus' in data) {
            const stopsLeft = data.itemOnRoundStatus.nrOfStopsUntilTarget[0]
            innerHtml += `<strong> – ${stopsLeft} stops left</strong>`
          }
        }
  
        innerHtml += `</span>`

        if(deliveredPicId) {
          innerHtml += `<div id="delivered-pic"></div>`
        }

        // Delivery window
        if (!deliveredPicId && 'expectedDeliveryTimeRange' in item) {
          const deliveryWindow = item.expectedDeliveryTimeRange
          innerHtml += `
            <div id="time">
                <div>
                        Now<br>
                    <span>${(new Date()).toTimeString().substring(0,5)}</span>
                </div>
                <span id="delivery-window">
                        Delivery range<br>
                    <span class="time">${deliveryWindow.time1} - ${deliveryWindow.time2}</span>
                </span>
            </div>
          `
        }

        // Update HTML
        DOM.innerHTML = innerHtml

        // Delievered pic
        if (deliveredPicId) {
          const res = await fetch(`${deliveredPicApi}?refId=${deliveredPicId}`)
          const base64Img = await res.text()

          const img = new Image()
          img.setAttribute('src', `data:image/jpeg;base64,${base64Img}`)
          const deliveredPicEl = document.getElementById('delivered-pic')
          deliveredPicEl?.append(img)
        }
      })
    })
}, 3000)

document.body.innerHTML = `
    <style>
      #app {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0.5em;
        text-align: center;
        font-size: 7vmin;
        height: 100vh;
        background-color: #232323;
        color: #c1c1c1
      }

      #output {
        margin: 0.5em 0;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }

      #time {
        display: flex;
        justify-content; space-evenly;
      }

      #delivery-window {
        margin-left: 1em;
        border: 1vmin solid orange;
        border-radius: 0.25em;
      }

      img {
        max-width: 100%;
        height: auto;
        max-height: 70vh;
      }

      .time {
        margin: 0 .5em;
        padding-bottom: 5vmin;
        font-size: 9vmin;
      }
    </style>

    <div id="app">
        <p id="output"></p>
    </div>
`

const DOM = document.getElementById('output')

Updated to include sender and the current hour in addition to the delivery timeframe.

Fixed sender name being undefined when it has no commercial name.

Now they provide real-time geo for their delivery truck, with a pin on a map (using <canvas>) refreshed every 30 sec. using the following endpoint: https://track.bpost.cloud/track/itemonroundstatus?itemIdentifier=1234567890&postalCode=1234

endpoint sample (anonymized)

{
    "xmlns": [
        "http://schema.post.be/dis/item-on-round-status"
    ],
    "estimatedDeliveryTimeWindow": [
        ""
    ],
    "lastKnownLocation": [
        {
            "long": [
                "1.23456"
            ],
            "lat": [
                "1.23456"
            ]
        }
    ],
    "targetLocation": [
        {
            "long": [
                "1.23456"
            ],
            "lat": [
                "1.23456"
            ]
        }
    ],
    "nrOfStopsUntilTarget": [
        "18"
    ],
    "progressUntilTarget": [
        "-6.738544474393531E-4"
    ]
}

Now updated to add stops left when it’s out for delivery:

Update: can now show basic data when the number of stops left is not know, yet. Before, it was showing an empty screen until the stops left appears.

Update:

• stop polling once the item is delivered
• delivered items may now have a pic attached when the parcel has been left in a “safe place”: in that case, the scripts shows the picture using the https://track.bpost.cloud/track/asset endpoint (returns a base64 picture)

Layout with the “left in a safe place” picture: