UI Config

UI can be configured with preset while creating the meeting via API or in JavaScript before initializing the meeting component, by passing the desired options in the uiConfig parameter.

Example

<DyteMeeting
    onInit={onDyteInit}
    clientId='my-client-id'
    uiConfig={{
        header:false
    }}
    meetingConfig={{
        roomName: 'amazing-music',
        authToken: 'my-auth-token',
        showSetupScreen: true
    }}
/>

You can also update a single config like in the example below:

meeting.updateUIConfig({header: false});

List of all available UI Config options

{
    controlBar?: true,
    controlBarElements?: {
        plugins?: true,
        screenShare?: true,
        share?: true,
        participants?: true,
        chat?: true,
        polls?: true,
        fullscreen?: true,
        layout?: true,
    },
    header?: true,
    headerElements?: {
        clock?: true,
        title?: true,
        logo?: true,
        participantCount?: true,
    },
    waitingRoom?: {
        showSelfVideo?: true,
        element?: ReactNode|HTMLElement,
    },
    dimensions?:{
        width: 400,
        height: 800
    },
    logo?:`logoUrl`,
    colors?:{
        primary:'#2160FD',
        secondary:'#262626',
        textPrimary:'#EEEEEE',
        videoBackground:'#1A1A1A',
    }
    //  a set of four hex colors
    // 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
}