Customize the meeting UI
Dyte offers a host of customizations for the UI of meetings, some of which also
defines the interactions the participants can have within a meeting room. While
the initial values for these options are picked up from the
preset
used to generate the authToken
, you can
override them at the client end based on specific use cases or events. There are
2 ways to update the config:
- pass the config options at the time of initiating a meeting.
<script>
const client = new DyteClient({ clientId: 'orgId|clientId' });
const meeting = client.Meeting(
{
roomName: '<roomName>',
authToken: '<authToken>',
},
uiConfigOptions
);
meeting.init('root');
</script>
- call the
updateUIConfig
method onmeeting
instance and pass theuiConfigOptions
as a parameter to this call
meeting.updateUIConfig(uiConfigOptions);
Described below are various different options that you can customize in a meeting. The complete reference for UI config options can be found here.
Here is a pictorial representation of all the config options defined below.
Set your logo in the meeting room
You can change the logo in the meeting room to reflect your brand or your organization.
logo: logoUrlString;
Change the color scheme to your brand / theme
You can change the color scheme of the meeting to reflect your brand and theme. Dyte allows you to specify four color values.
primary
: color of the primary elements like participant name boxsecondary
: color of the secondary elements like control bar, control buttons, hovertextPrimary
: color of the text elementsvideoBackground
: color behind the video when the video is turned off
The default values for each of these are shown in the below example. Remember to specify all the colors, otherwise this feature won't work.
colors: {
primary: '#2160FD',
secondary: '#262626',
textPrimary: '#EEEEEE',
videoBackground: '#1A1A1A'
}
Adjust the meeting size to a custom container
The default behaviour of a meeting on Dyte is to take up the full viewport.
However, if you want to customize the size of a meeting to fit within a certain
container or div
, you can do so by specifying the width
and height
under
dimensions
as numerical values which are taken as pixels (px
in CSS).
Remember to specify both, otherwise this feature won't work.
dimensions: {
width: 400,
height: 800
}
Make the meeting fit your container size (dynamic)
Similarly, if you want to make the size of a meeting dynamically fit to within
the bounds of its parent container or div
, you can do so by specifying the
mode
under dimensions
and set the value to fillParent
.
dimensions: {
mode: 'fillParent';
}
Use either the width
and height
OR the mode
under dimensions
, but not
both.
Hide the bottom control bar
You can hide the bottom control bar by setting controlBar
to false
in
config. The default value is true
, which means the control bar is visible.
controlBar: true;
Hide individual controls from the bottom control bar
You can hide individual controls from the bottom control bar by setting their
respective options to false
in the config. The default value is true
for all
controls, which means all the controls are visible.
controlBarElements: {
fullscreen: true,
share: true,
screenShare: true,
layout: true,
chat: true,
polls: true,
participants: true,
plugins: true
}
Hide the header bar
You can hide the header bar by setting header
to false
in config. The
default value is true
, which means the header is visible.
header: true;
Hide individual controls from the header bar
You can hide individual elements from the header bar by setting their respective
options to false
in the config. The default value is true
for all elements,
which means all the elements are visible.
headerElements: {
logo: true,
title: true,
participantCount: true,
clock: true
}
Customize waiting room
If you have enabled waiting room in the role
, the participant will be put in
an empty zone until the host joins and / or lets them in. You can choose the
exact HTML to be rendered while the participant is in the waiting room (such as
an infographic or play a video or display info about your org) by setting the
element
to an HTMLElement, and whether the participant sees their own video
while in the waiting room using showSelfVideo
(which is true
by default).
waitingRoom: {
showSelfVideo: true,
element: HTMLElement
}
Add overlay / filter to meeting video
You can add an overlay or filter to the meeting videos. You can add them to the
individual participant videos or to the entire meeting grid at once. You would
generally need to listen to the meeting events, such as
roomMessage
,
to determine when to show an overlay, or you could build your own custom logic
around this.
Adding any overlay disables the context menu (right click) on the video stream(s).
Meeting grid overlay
You can add overlay to the entire meeting grid, which is the area including all the participant videos. Generally it will be all the area between the header and the control bar.
Use meeting.grid.setOverlay(HTMLElement)
to set overlay on top of the entire
video grid. This can be useful for use cases like enabling reactions etc. Simply
pass either a React component or a HTML string to the function. Remember to set
the width and height to 100% to occupy the full size of the grid.
meeting.grid.setOverlay(
'<canvas id="reaction-1" style="width: 100%; height: 100%;" />'
);
To remove, you can simply set the overlay to null
.
meeting.grid.setOverlay(null);