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

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