# 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);
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hello-lisa.com/developers/guides/integration-guide/web-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.