Skip to main content

Basic Usage

Include Dyte Meeting in your app

DyteClient is a JavaScript library that can be included in your JavaScript application to show the Dyte Meeting UI.

It has a Meeting component which can be initialized using 2 mandatory and 2 optional properties. The mandatory ones are defined below along with their usage, and the optional ones can be found here in the advanced usage page.

Pass Client ID for verification

You need to pass a clientId to DyteClient to verify the participant's authToken against.

<script>
const client = new DyteClient({ clientId: 'orgId|clientId' });
</script>

Configure the meeting connection

You need to pass a meetingConfig object to initialize the Meeting, to define which meeting should the client connect to and a couple of other setup parameters, out of which only authToken and roomName are mandatory. This Meeting reference can be used to take further actions and make customizations to the meeting.

<script>
const client = new DyteClient({ clientId: 'orgId|clientId' });

const meeting = client.Meeting({
roomName: '<roomName>',
authToken: '<authToken>',
});
</script>

Initialize the meeting in its parent container

You need to call the init method on meeting and pass it the id of the parent container in which you want the meeting to get initialized.

<script>
const client = new DyteClient({ clientId: 'orgId|clientId' });

const meeting = client.Meeting({
roomName: '<roomName>',
authToken: '<authToken>',
});

meeting.init('root');
</script>