Web Integration

This guide explains how to embed the Player in a web environment using an <iframe>. It also covers communication between the parent page and the iframe.

Basic Embedding

To embed the Player, use the following basic <iframe> setup:

<iframe
  src="https://{clientId}.loveslisa.tech/s/{showId}"
  width="100%"
  height="100%"
  style="border: none;"
  allow="autoplay; clipboard-write"
/>

---

Communication Between LiSA Player and the Web Environment

To enable bi-directional communication between the parent page and the iframe, use the postMessage API.

Sending Messages to the LiSA Player

The parent page can send messages to the iframe using the contentWindow.postMessage method:

const iframe = document.querySelector('iframe');

const message = {
  recipient: 'LiSA',
  sender: 'Me',
};

iframe.contentWindow.postMessage(message, 'https://{clientId}.loveslisa.tech/s/{showId}');

Receiving Messages from the LiSA Player

Listen for messages sent from the LiSA Player on the parent page:

window.addEventListener('message', (event) => {
  // Verify the message origin for security
  if (event.origin !== 'https://{clientId}.loveslisa.tech') {
    return;
  }

  console.log(event.data);
});