Block Client API

When using Blocks API, Block Client is a client-size callback API that allows you to handle certain events related to blocks.

This API operates cross-origin via postMessage, and identifies blocks by their instance parameters that you specify.

Your client-side code implementing Block Client API could be as simple as:

const Callbacks = {
  Resize1: function({ instance, height, title, sourceWindow }) {
    let iframe = document.getElementById(instance)
    if (iframe && sourceWindow === iframe.contentWindow) {
      iframe.style.height = height + 'px'
      if (!iframe.title && title) {
        iframe.title = title
      }
    }
  },
  ApplyDiscountCode1: function({ code }) {
    ...
  },
}
window.addEventListener('message', function(ev) {
  if (ev.data.bubblehouseBlockClientCall) {
    Callbacks[ev.data.bubblehouseBlockClientCall]({
      ...ev.data,
      sourceWindow: ev.source,
      sourceOrigin: ev.origin,
    })
  }
}, false)

Returning values

This is a one-way API: currently there’s no provision to return a response.

Authentication & Security

None; this is all happening within a page, so the customer is already authenticated.

Note, however, that any iframe on your page can fake a Block Client API call, including untrusted code like ads. Treat messages as untrusted: for callbacks that mutate an iframe, first resolve the instance to an iframe you own and verify sourceWindow === iframe.contentWindow, as shown for Resize1 above. Current built-in calls don’t expose customer money movement or privileged server-side changes; if such calls are added, they’ll need explicit authentication.