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>