PStack Debugger - Integration Demo

This page demonstrates how customers can embed and communicate with the avatar system

Integration Code Example

<!-- HTML: Embed the avatar in your page -->
<iframe
  id="avatarEmbed"
  src="https://your-domain.com/embed"
  width="750"
  height="500"
></iframe>

<script>
// Wait for the avatar to be ready
window.addEventListener('message', (event) => {
  if (event.data?.type === 'AVATAR_READY') {
    console.log('Avatar is ready!');
  }
});

// Send events to the avatar
function sendAvatarEvent(eventType, payload) {
  const iframe = document.getElementById('avatarEmbed');
  iframe.contentWindow.postMessage({
    type: 'AVATAR_EVENT',
    eventType: eventType,
    payload: payload
  }, '*');
}

// Example: Notify avatar when a card is played
sendAvatarEvent('CARD_PLAYED', {
  cardId: 'ace_spades',
  playerId: 'player1',
  position: { x: 100, y: 200 }
});

// Or access the API directly (same-origin only)
const avatar = iframe.contentWindow.AvatarAPI;
avatar.cardPlayed('ace_spades', 'player1');
avatar.avatarEmote('player1', 'victory');
</script>