# Player — Pass Visual Viewport

In certain situations, the LiSA Player sends a message to [request the visual viewport](/developers/guides/player-communication/message-api-reference/player/player-request-visual-viewport.md) from the host app or environment. In response to this message, the host app / environment should pass essential properties of the current Visual Viewport back to the LiSA Player.

This message is sent by the host app / environment to the LiSA Player.

### Visual Viewport Properties

```typescript
const visualViewport = {
  viewportHeight: window.visualViewport.height ?? window.innerHeight,
  viewportScrollX: window.visualViewport.pageLeft ?? window.scrollX,
  viewportScrollY: window.visualViewport.pageTop ?? window.scrollY,
  viewportWidth: window.visualViewport.width ?? window.innerWidth,
};
```

### Properties

Along with all standard [Message properties](/developers/guides/player-communication/message-api-reference.md#properties), a **Pass Visual Viewport** message includes the following additional properties:

<table><thead><tr><th width="226.91015625" valign="top">Name</th><th width="192" valign="top">Type</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top"><code>messageType</code></td><td valign="top"><pre><code>Literal    
</code></pre><p>Required.</p></td><td valign="top"><code>lsc:player:viewport:pass</code></td></tr><tr><td valign="top"><code>viewportHeight</code></td><td valign="top"><pre><code>Number
</code></pre><p>Required.</p></td><td valign="top">The <code>viewportHeight</code> property represents the current height of the host app / environment's host app's visual viewport.</td></tr><tr><td valign="top"><code>viewportScrollX</code></td><td valign="top"><pre><code>Number
</code></pre><p>Required.</p></td><td valign="top">The <code>viewportScrollX</code> property represents the current horizontal scroll offset of the host app / environment's host app's visual viewport.</td></tr><tr><td valign="top"><code>viewportScrollY</code></td><td valign="top"><pre><code>Number
</code></pre><p>Required.</p></td><td valign="top">The <code>viewportScrollY</code> property represents the current vertical scroll offset of the host app / environment's host app's visual viewport.</td></tr><tr><td valign="top"><code>viewportWidth</code></td><td valign="top"><pre><code>Number
</code></pre><p>Required.</p></td><td valign="top">The <code>viewportWidth</code> property represents the current width of the host app / environment's host app's visual viewport.</td></tr></tbody></table>

***

### Type Definition

```typescript
interface PlayerPassVisualViewportMessage extends Omit<
  Message,
  'clockDriftInMs' | 'messageType' | 'recipient'
> {
  messageType: 'lsc:player:viewport:pass';
  recipient: 'LiSA';
  viewportHeight: number;
  viewportScrollX: number;
  viewportScrollY: number;
  viewportWidth: number;
}
```

***

### Examples

```json
{
  "messageType": "lsc:player:viewport:pass",
  "recipient": "LiSA",
  "sender": "Sender",
  "viewportHeight": 854,
  "viewportScrollX": 0,
  "viewportScrollY": 0,
  "viewportWidth": 480
}
```


---

# 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/player-communication/message-api-reference/player/player-pass-visual-viewport.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.