Prerequisite

Make sure to read this before you start integrating the UI Kit into your app.

These are a couple of components that are important for proper functioning of a meeting.

DyteParticipantsAudio

This component takes care of the audio playback and autoplay issues.

Audio

The user will not hear audio without this component.

<dyte-participants-audio id="my-audio"></dyte-participants-audio>

<script>
  document.getElementById('my-audio').meeting = meeting;
</script>

This component will also show a dialog in case the browser throws an auto play error, requiring user interaction to allow playing audio.

Here is more information on Autoplay policy in Chrome.

Other browsers have similar policy, with some minor differences.

DyteNotifications

Notifications

The user will not be notified of important events such as network disconnection, poor network without this component.

<dyte-notifications id="my-notifications"></dyte-notifications>

<script>
  // load meeting

  document.getElementById('my-notifications').meeting = meeting;
  document.getElementById('my-notifications').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,
  };
</script>

DyteDialogManager

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.

<dyte-notifications id="my-notifications"></dyte-notifications>

<script>
  <dyte-button onclick="showSettings()">Show Settings</dyte-button>
  <dyte-button onclick="showLeaveConfirmation()">Show Settings</dyte-button>

  <dyte-dialog-manager id="dyte-el"></dyte-dialog-manager>

  <script>
    const dialog = document.getElementById('dyte-el');
    dialog.meeting = meeting;
    let states = {};

    function updateStates() {
      dialog.states = states;
    }

    function stateUpdate(s) {
      states = { ...states, ...s };
      updateStates();
    }

    function showSettings() {
      stateUpdate({ activeSettings: true });
    }

    function showLeaveConfirmation() {
      stateUpdate({ activeLeaveConfirmation: true });
    }

    dialog.addEventListener('dyteStateUpdate', (e) => {
      stateUpdate(e.detail);
    });

    updateStates();
</script>