myzPAX Messaging Utility

This utility facilitates structured communication between an embedded app and the myzPAX container via the postMessage API.

It includes:

Secure origin-filtered communication
Support for interaction tracking, locking, authentication
TypeScript + JavaScript versions
Examples in Vue and React

Project Structure

myzpax-messaging/
├── js/                    # JavaScript implementation
├── ts/                    # TypeScript implementation
├── examples/
│   ├── vue/               # Vue example
│   └── react-ts/          # React + TS example
└── README.md              # Project readme

Getting Started

Installation

GitHub Project - myzPAX Messaging Utility

Unzip and use:

import {
  setTargets,
  sendZpaxMessage,
  addZpaxMessageListener
} from './js/myzpax-messaging.js';

Configuration

`setTargets(origins: string[])`

Sets allowed domains for myzPAX message exchange.

setTargets(['https://myzpax.com', 'https://sandbox.myzpax.com']);

Messaging API

`sendZpaxMessage<T>(type: T, data?: RequestMessage[T])`

Sends a message from your app to the myzPAX container.

Examples:

sendZpaxMessage('interaction');

sendZpaxMessage('lock_app', {
  lockType: 'manual',
  afterReAuthAction: 'reload'
});

`addZpaxMessageListener<T>(type: T, handler: (data) => void)`

Listens for a message from myzPAX.

const unsubscribe = addZpaxMessageListener('re_authenticated', () => {
  console.log('User re-authenticated');
});

Message Types

Request Messages (from App → myzPAX)

Message	Description
`interaction`	To notify of user activity.
`last_interaction`	To request last interaction timestamp.
`lock_app`	To lock app manually or via timeout.
`login_status`	To check user authentication status.
`open_contact_form`	To show contact form with app metadata.
`open_full_view`	To open full-screen mode.
`open_mini_player`	To show a mini video player within myzPAX.
`open_signin_signup_popup`	To open a sign-in or sign-up popup.
`unsaved_changes_confirmation`	To enable/disable a browser confirmation dialog before unloading the app

Response Messages (from myzPAX → App)

Message	Description
`last_interaction`	Timestamp of last interaction.
`lock_app`	myzPAX requests app lock.
`login_status`	User's authentication status.
`mini_player_closed`	Final playback state when the mini player is closed
`mini_player_fullscreen`	Sent when the user clicks the full screen icon in the mini player.
`open_full_view`	Notifies that myzPAX wants to open the app in full view mode.
`re_authenticated`	User has logged in again.
`state_change`	Sent when the browser back/forward navigation is detected

Message Data Types

`LockAppMessageData`

{
  lockType: 'manual' | 'timeout';
  afterReAuthAction?: 'reload' | 'none';
  removeIframe?: boolean;
}

`OpenContactFormMessageData`

{
  appName: string;
  toEmail: string;
}

`OpenFullViewMessageData`

export type OpenFullViewMessageData = {
  state?: string;
};

Examples

Vue

<template>
  <div>
    <button @click="sendInteraction">Send Interaction</button>
    <button @click="lockManually">Manual Lock</button>
  </div>
</template>

<script>
import {
  setTargets,
  sendZpaxMessage,
  addZpaxMessageListener,
} from '../../js/myzpax-messaging.js';

export default {
  mounted() {
    setTargets(['https://myzpax.com']);
    addZpaxMessageListener('lock_app', () => {
      sendZpaxMessage('lock_app', { lockType: 'manual' });
    });
  },
  methods: {
    sendInteraction() {
      sendZpaxMessage('interaction');
    },
    lockManually() {
      sendZpaxMessage('lock_app', { lockType: 'manual' });
    },
  },
};
</script>

React

import { useEffect } from 'react';
import {
  setTargets,
  sendZpaxMessage,
  addZpaxMessageListener
} from '../../ts/myzpax-messaging';

function App() {
  useEffect(() => {
    setTargets(['https://myzpax.com']);
    addZpaxMessageListener('re_authenticated', () => {
      console.log('Authenticated!');
    });
  }, []);

  return (
    <div>
      <button onClick={() => sendZpaxMessage('interaction')}>Ping</button>
    </div>
  );
}

More Information

Please refer to the TypeScript (.ts) and JavaScript (.js) files in the project for more information and examples.

Security Notes

Always use setTargets() to define allowed origins.
myzPAX will reject messages from unauthorized sources.
Never include user secrets in messages.