# WherebyEmbed

The `WherebyEmbed` renders a [react-native-webview](https://github.com/react-native-webview/react-native-webview), with some added custom Whereby properties. It accepts a room property, various [attributes](#attributes), [event listeners](#event-listeners) and [commands](#commands), as well as all other [WebView props](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md).

```tsx
<WherebyEmbed
    // Room URL. (required)
    room={"https://subdomain.whereby.com/your_room"}
    // Removes some UI elements. Useful for small screens. (optional)
    minimal
    // Skips the media permission prompt. (optional)
    skipMediaPermissionPrompt
    // Catch-all for any Whereby event (optional)
    onWherebyMessage={(event) => {
        console.log(event);
    }}
    // Specific callbacks for each Whereby event (optional)
    onReady={() => {
        console.log("ready");
    }}
/>
```

## Attributes

The `WherebyEmbed` component accepts attributes that you can use to customize the room and user experience. Every one of these attributes can be passed in as props.

{% hint style="info" %}
Attributes that accept `on/off` values in the list must be used as normal boolean props in the react-native-sdk.
{% endhint %}

[Web Component Reference](/reference/using-the-whereby-embed-element.md#attributes-of-the-component)

## Event listeners

These are optional props, that will trigger the callback on the corresponding event.

<table><thead><tr><th>Property</th><th>Parameters</th><th>Description</th></tr></thead><tbody><tr><td><code>onWherebyMessage</code></td><td><code>(data: WherebyEvent) => void</code></td><td>Catch-all listener, that triggers on all the below events.</td></tr><tr><td><code>onReady</code></td><td><code>() => void</code></td><td>Basic dependencies have loaded and the room is ready to be used</td></tr><tr><td><code>onKnock</code></td><td><code>() => void</code></td><td>The local user knocks to get into the room</td></tr><tr><td><code>onParticipantUpdate</code></td><td><code>({ count: number }) => void</code></td><td>A new participant join/leave</td></tr><tr><td><code>onJoin</code></td><td><code>() => void</code></td><td>The local user joins</td></tr><tr><td><code>onLeave</code></td><td><code>({ removed: boolean }) => void</code></td><td>The local user leaves</td></tr><tr><td><code>onParticipantJoin</code></td><td><code>{ participant: { metadata: string | null; externalId: string | null } }) => void</code></td><td>A new participant joins the room</td></tr><tr><td><code>onParticipantLeave</code></td><td><code>{ participant: { metadata: string | null; externalId: string | null } }) => void</code></td><td>A participant leaves the room</td></tr><tr><td><code>onMeetingEnd</code></td><td><code>() => void</code></td><td>A host has ended the meeting via "end meeting for all"</td></tr><tr><td><code>onMicrophoneToggle</code></td><td><code>({ enabled: boolean }) => void</code></td><td>The local user toggles the microphone</td></tr><tr><td><code>onCameraToggle</code></td><td><code>({ enabled: boolean }) => void</code></td><td>The local user toggles the camera</td></tr><tr><td><code>onChatToggle</code></td><td><code>({ open: boolean }) => void</code></td><td>The local user toggles the chat</td></tr><tr><td><code>onPeopleToggle</code></td><td><code>({ open: boolean }) => void</code></td><td>The local user toggles the people pane</td></tr><tr><td><code>onPipToggle</code></td><td><code>({ open: boolean }) => void</code></td><td>The local user toggles Picture-in-Picture mode</td></tr><tr><td><code>onGrantDevicePermission</code></td><td><code>({ granted: boolean }) => void</code></td><td>The local user grants permission to camera and microphone in the pre-call screen</td></tr><tr><td><code>onDenyDevicePermission</code></td><td><code>({ denied: boolean }) => void</code></td><td>The local user denies permission to camera and microphone in the pre-call screen</td></tr><tr><td><code>onScreenshareToggle</code></td><td><code>({ enabled: boolean }) => void</code></td><td>The local user toggles the screenshare</td></tr><tr><td><code>onStreamingStatusChange</code></td><td><code>({ status: string }) => void</code></td><td><p>Streaming status changes.</p><p>Possible values: " | requested | starting | streaming | stopping | stopped"</p></td></tr><tr><td><code>onConnectionStatusChange</code></td><td><code>({ status: string }) => void</code></td><td><p>User connection status changes.</p><p>Possible values: "stable | unstable"</p></td></tr><tr><td><code>onPrecallCheckSkipped</code></td><td><code>() => void</code></td><td>The local user skipped the presented pre-call check steps</td></tr><tr><td><code>onPrecallCheckCompleted</code></td><td><pre><code>(status: String,
steps: {
camera: { status: String; },
speaker: { status: String; },
microphone: { status: String; },
bandwidth: { status: String; },
}
}) => void
</code></pre></td><td><p>The local user completed the presented pre-call check steps.</p><p>Possible values for all status properties: "passed | failed".</p></td></tr></tbody></table>

## Commands

Commands can be triggered by assigning a `React.useRef` to the `WherebyEmbed` component. Then use that to call the specific function:

```tsx
const wherebyRoomRef = React.useRef<WherebyWebView>(null);

// Call this from a button in your app, for example.
wherebyRoomRef.current.endMeeting()
```

Full list of available commands:

[Web Component Reference](/reference/using-the-whereby-embed-element.md#sending-commands)


---

# 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.whereby.com/reference/react-native-reference/wherebyembed.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.