> For the complete documentation index, see [llms.txt](https://docs.hello-lisa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hello-lisa.com/developers/guides/integration-guide/web-integration.md).

# 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:

```html
<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:

```javascript
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:

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

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