Quickstart

Before Getting Started

Before you start integrating Dyte into your application, make sure you've read the Getting Started with Dyte topic and completed the steps in the Integrate Dyte section.

Get the roomName for the meeting and the participant's authToken from our backend APIs (read more about our server APIs here), and pass them as props to Dyte's DyteMeeting React component.

You can initialize a meeting in your React app, using this component, like below.

JavaScript

import { DyteMeeting } from 'dyte-client';

function App() {
  return (
    <div className="App">
      <DyteMeeting
        onInit={(meeting) => {}}
        clientId={`orgId || clientId`}
        meetingConfig={{
          roomName: `roomName`,
          authToken: `authToken`,
        }}
      />
    </div>
  );
}

export default App;

TypeScript

import { DyteMeeting, Meeting } from 'dyte-client';

function App() {
  return (
    <div className="App">
      <DyteMeeting
        onInit={(meeting: Meeting) => {}}
        clientId={`orgId || clientId`}
        meetingConfig={{
          roomName: `roomName`,
          authToken: `authToken`,
        }}
      />
    </div>
  );
}

export default App;

caution

If you're new to this SDK, we recommend you check out the UI Kit SDK or the React UI Kit depending on your needs