Skip to main content

Default Pre-call UI

Dyte provides a default pre-call UI, also known as setup screen, as part of dyte-meeting component.

Previously, In the setup page, We used the following component.

<DyteMeeting meeting={meeting} showSetupScreen={true} />

DyteMeeting component is the all-encompassing parent component. It does the following behind the scenes.

  1. Show setup screen
  2. Join meeting on Click of Join on the setup screen
  3. Show meeting components & hide the setup screen components once inside a DyteMeeting
  4. Include all crucial components such as DyteDialogManager, DyteNotifications and DyteParticipantsAudio.
  5. Maintaing linking of these components with Core SDK.

This makes the integration one-liner without any pain but makes it extremely difficult to customise more than what our No Code Preset Editor gives.

However, There are cases when our clients need more customization. Few cases are most commonly asked.

  1. Skip setup screen
  2. Way to separate out this setup screen so it can be shown way earlier before starting a meeting
  3. Just a part of setup screen is needed.
  4. Add more custom features to the setup screen.

We will be discussing how you can skip setup screen on this page and then move on to building a custom setup screen on the next pages.

To disable a setup screen, all you need to do is to pass the showSetupScreen prop as false.

<DyteMeeting meeting={meeting} showSetupScreen={false} />

If you don't pass showSetupScreen prop, we infer the default value as true, therefore it is required to pass it as false.

In case, if you already have a custom Meeting UI and just want to add the default setup screen, feel free to use the following component.

<DyteSetupScreen meeting={meeting}/>

If you want to build a custom pre-call UI, let's go to the next page to start building one.