AsterlioAsterlio Widget Docs Demo

Events (listen to messages)

Listen for messages posted by the widget iframes. Always validate the origin.

Subscribe

const WIDGET_ORIGIN = 'https://DOMAIN'
window.addEventListener('message', (event) => {
  if (event.origin !== WIDGET_ORIGIN) return
  const { type, payload } = event.data || {}
  switch (type) {
    case 'HAS_UNREAD_MESSAGES':
      // payload: { count }
      break
    case 'SET_CHAT_ROOM_ID':
      // payload: { chatRoomId }
      break
    case 'SHOW_ERROR_MESSAGE':
      // payload: { message, code? }
      break
  }
})

Event types

  • HAS_UNREAD_MESSAGES — { count: number }
  • SET_CHAT_ROOM_ID — { chatRoomId: string }
  • SHOW_ERROR_MESSAGE — { message: string, code?: string }

SHOW_ERROR_MESSAGE codes

The widget shows the message itself; the code is there if the host page wants to react.

  • email_not_recognised — the email submitted on the intake form is not registered with the identity provider.
  • verification_unavailable — the identity provider could not be reached, timed out, or rejected the gateway's key. The visitor can retry.
  • chat_first_rejected — the intake form was rejected for a reason this widget build does not recognise.
  • FILE_UPLOAD_PENDING — a send was blocked while files were still uploading.

Example UI updates

const WIDGET_ORIGIN = 'https://DOMAIN'
const badge = document.querySelector('#unread-badge')
window.addEventListener('message', (event) => {
  if (event.origin !== WIDGET_ORIGIN) return
  const { type, payload } = event.data || {}
  if (type === 'HAS_UNREAD_MESSAGES') {
    const count = Number(payload?.count || 0)
    badge.textContent = String(count)
    badge.style.display = count > 0 ? 'inline-flex' : 'none'
  }
})