Skip to main content

dyte-notifications

A component which handles notifications.

You can configure which notifications you want to see and which ones you want to hear. There are also certain limits which you can set as well.

This is an example which passes the default configuration for notifications.

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

<script>
const el = document.getElementById('dyte-el');
el.meeting = meeting;
el.config = {
config: {
notifications: {
participant_left: false,
},
notification_sounds: {
participant_left: false,
},
notification_duration: {
participant_left: 1000,
},
participant_joined_sound_notification_limit: 10,
participant_chat_message_sound_notification_limit: 10,
},
};
</script>

All these configurations take a specific category of notifications. Available categories are participant_joined, participant_left, participant_joined_waitlist, chat, polls, webinar, tab_sync.

Notifications Popup

It is possible to customize which activity needs to show a notification alert. Use the notifications configuration to update individual category of notifications.

All categories are enabled by default.

To disable specific category of notifications set the value of the category to false like below.

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

<script>
const config = {
notifications: {
participant_left: false,
chat: false,
tab_sync: false,
},
};

const el = document.getElementById('dyte-el');
el.meeting = meeting;
el.config = {
config,
};
</script>

Notification duration

Similar to notification popup, it is possible to customize the duration of the notification popup displayed on screen. By using the notification_duration configuration, it is possible to change the duration for individual category of notifications.

Here are the default display durations (in milliseconds)

participant_joined: 2000 participant_left: 2000 participant_joined_waitlist: 4000 chat: 2000 polls: 2000 webinar: 2000 tab_sync: 2000

To change the duration for a specific category of notifications set the value of the category to the milliseconds.

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

<script>
const config = {
notification_duration: {
participant_joined: 5000, // Show participant joined notification for 5 seconds
participant_left: 1000, // Show participant left notification for 1 second only
chat: 5000, // Show chat for 1 second only
tab_sync: 1000, // Show tab sync changes for 1 second only
},
};

const el = document.getElementById('dyte-el');
el.meeting = meeting;
el.config = {
config,
};
</script>

Notification Sound

It is possible to turn off the notification sound for specific category of notifications.

To disable sound for a specific category of notifications set the value of the category to false like below.

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

<script>
const config = {
notification_sounds: {
participant_left: false,
chat: false,
polls: false,
},
};

const el = document.getElementById('dyte-el');
el.meeting = meeting;
el.config = {
config,
};
</script>

Controlling sound once participants count

It is possible to disable notification / sound automatically once the number of participants cross a certain limit.

Turn off the notification sound for new chat messages after 10 participants

const config = {
participant_chat_message_sound_notification_limit: 10,
};

Turn off the notification sound for participant joined notifications after 10 participants

const config = {
participant_joined_sound_notification_limit: 10,
};

Currently the number of configurations are limited, we are adding it for more categories soon.

Props

meeting

required

Meeting object

config

Config object

Default
defaultConfig

iconPack

Icon pack

Default
defaultIconPack

size

Size

Type
"lg" | "md" | "sm" | "xl"

states

States object

Type
States

t

Language

Default
useLanguage()