Skip to main content


Before you begin, review and understand the Components Basics.

The following components are critical for the meeting to function, if you are not using DyteMeeting and customizing the UI, you will need to render the following components.


This component is required for audio playback. You will not be able to hear audio without this component.

This component also displays a dialog if the browser throws an auto play error, requiring user interaction to allow audio to be played.

<DyteParticipantsAudio meeting={meeting} />


This component is required for receiving notifications. If you don't have this component, you won't be notified of events like network disconnection or poor network.

config: {
// which notifications to show
notifications: ['chat', 'participant_joined', 'participant_left'],
// which notifications should have sounds
notification_sounds: ['chat', 'participant_joined', 'participant_left'],
// maximum number of participant joined sound notifications
participant_joined_sound_notification_limit: 10,
// maximum number of chat message sound notifications
participant_chat_message_sound_notification_limit: 10,


A component which handles all dialog elements in a component. This component is required for the following components to work:

  • DyteLeaveButton
  • DyteSettingsToggle
  • DyteBreakoutRoomsToggle
  • DyteMuteAllButton

This components depends on the values from states object.

function Example() {
const [states, setStates] = useState({});

const setState = (s) => setStates((states) => ({ ...states, ...s }));

return (
<DyteButton onClick={() => setState({ activeLeaveConfirmation: true })}>
Show Leave Confirmation
onDyteStateUpdate={(e) => setState(e.detail)}