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:

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

2. call the updateUIConfig method on meeting instance and pass the uiConfigOptions 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 box
• secondary: color of the secondary elements like control bar, control buttons, hover
• textPrimary: color of the text elements
• videoBackground: 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';
}

caution

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.

info

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

Participant video overlay

Check this section.