Skip to main content


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.


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


The user will not hear audio without this component.

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

document.getElementById('my-audio').meeting = meeting;

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.



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>

// 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,


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>

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

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

function updateStates() {
dialog.states = states;

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

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

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

dialog.addEventListener('dyteStateUpdate', (e) => {