LogoLogo
WherebyStatusCommunity
  • 📹Whereby 101
    • Create Your Video Experience
      • Get started in 3 steps
      • Embedding Whereby in a web app
        • Using Whereby's Web Component & Pre-built UI
          • Script Tags
          • With Low Code
            • Embedding in Squarespace or Wordpress
            • No code video conferencing in Bubble
        • Using Whereby's Browser SDK with React Hooks for a fully custom UI
      • Embedding Whereby in a mobile app
        • Embedding Whereby in iOS
          • Using Whereby's Native iOS SDK
        • Embedding Whereby in Android
          • Using Whereby's Native SDK
        • Using Flutter
        • Using React Native
      • Github SDK Examples
      • Meeting scheduling with Cronofy
    • Generating Room URLs
      • Name prefixes
      • Using “Create a room”
      • Using Postman
    • Customize Your Video Experience
      • During room creation
      • Using Attributes/URL Params
      • Global preferences
      • Branding elements
      • Dial-In
      • File sharing
      • Breakout Groups with Embedded
      • Waiting Rooms
    • User roles & Meeting Permissions
    • FAQ
      • Accessibility
      • Whereby Words
      • Firewall & Security
      • HIPAA compliant setup
      • Allowed Domains & Localhost
      • Whereby Embedded Feature Comparison
  • 🔍Meeting Content & Quality
    • Recording
      • Cloud Recording
      • Local Recording
    • Transcribing
      • Session Transcription
      • Recording Transcription
    • Live Captions
    • Session summaries
    • Live streaming RTMP
    • Quality Insights
      • Real-time troubleshooting
      • Using the Insights dashboard
      • Improving call quality
      • Tracking room events with Webhooks
  • 🤷End User
    • End User Support Guides
      • Supported Browsers & Devices
      • Screen Sharing Setup & Usage
      • Using Breakout Groups
      • Troubleshooting & Basics
  • 🚚Developer Guides
    • Quickly deploy Whereby to your domain
    • Tracking Customer Usage
    • Migrating from Twilio
      • Twilio JS SDK Quick Migration
      • Twilio JS SDK Direct Migration
  • 🖥️Reference
    • REST API Reference
      • /meetings
      • /insights
      • /recordings
      • /transcriptions
      • /summaries
      • /rooms
    • Web Component Reference
    • React Hooks Reference
      • Quick Start
        • Getting started with the Browser SDK
      • Guides & Tutorials
        • Migrate from version 2.x to 3
        • Grid logic
        • Custom Video Tiles with React
        • Usage with Next.js
        • How to customize the toolbar
      • API Reference
        • WherebyProvider
        • VideoView
        • VideoGrid
        • useLocalMedia
        • useRoomConnection
      • Types
    • React Native Reference
      • Quick Start
      • WherebyEmbed
    • Webhooks Reference
Powered by GitBook
On this page
  • Attributes
  • Event listeners
  • Commands

Was this helpful?

Edit on GitHub
  1. Reference
  2. React Native Reference

WherebyEmbed

Last updated 8 months ago

Was this helpful?

The WherebyEmbed renders a , with some added custom Whereby properties. It accepts a room property, various , and , as well as all other .

<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.

Attributes that accept on/off values in the list, can be used as normal boolean props in the react-native-sdk.

Event listeners

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

Property
Parameters
Description

onWherebyMessage

(data: WherebyEvent) => void

Catch-all listener, that triggers on all the below events.

onReady

() => void

Basic dependencies have loaded and the room is ready to be used

onKnock

() => void

The local user knocks to get into the room

onParticipantUpdate

({ count: number }) => void

A new participant join/leave

onJoin

() => void

The local user joins

onLeave

({ removed: boolean }) => void

The local user leaves

onParticipantJoin

{ participant: { metadata: string | null; externalId: string | null } }) => void

A new participant joins the room

onParticipantLeave

{ participant: { metadata: string | null; externalId: string | null } }) => void

A participant leaves the room

onMeetingEnd

() => void

A host has ended the meeting via "end meeting for all"

onMicrophoneToggle

({ enabled: boolean }) => void

The local user toggles the microphone

onCameraToggle

({ enabled: boolean }) => void

The local user toggles the camera

onChatToggle

({ open: boolean }) => void

The local user toggles the chat

onPeopleToggle

({ open: boolean }) => void

The local user toggles the people pane

onPipToggle

({ open: boolean }) => void

The local user toggles Picture-in-Picture mode

onGrantDevicePermission

({ granted: boolean }) => void

The local user grants permission to camera and microphone in the pre-call screen

onDenyDevicePermission

({ denied: boolean }) => void

The local user denies permission to camera and microphone in the pre-call screen

onScreenshareToggle

({ enabled: boolean }) => void

The local user toggles the screenshare

onStreamingStatusChange

({ status: string }) => void

Streaming status changes.

Possible values: " | requested | starting | streaming | stopping | stopped"

onConnectionStatusChange

({ status: string }) => void

User connection status changes.

Possible values: "stable | unstable"

onPrecallCheckSkipped

() => void

The local user skipped the presented pre-call check steps

onPrecallCheckCompleted

The local user completed the presented pre-call check steps.

Possible values for all status properties: "passed | failed".

Commands

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

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

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

Full list of available commands:

🖥️
(status: String,
steps: {
camera: { status: String; },
speaker: { status: String; },
microphone: { status: String; },
bandwidth: { status: String; },
}
}) => void
react-native-webview
WebView props
attributes
event listeners
commands
Attributes of the component
Sending commands