Customization Prerequisite

danger

If you are not using RtkMeeting component directly, rendering the following components are critical for the meeting to function.

RtkNotifications

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.

<RtkNotifications
  meeting={meeting}
  config={{
    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,
    },
  }}
/>

RtkDialogManager

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

• RtkLeaveButton
• RtkSettingsToggle
• RtkMuteAllButton

This components depends on the values from states object.

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

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

  return (
    <View>
      <RtkButton onClick={() => setState({ activeLeaveConfirmation: true })}>
        Show Leave Confirmation
      </RtkButton>
      <RtkDialogManager
        meeting={meeting}
        states={states}
        onRtkStateUpdate={(e) => setState(e.detail)}
      />
    </View>
  );
}