Initialization

React

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

You can check out an example of this integration by cloning our React example repo.

VanillaJS

<div id="root"></div>
<script>
    const client = new DyteClient({ clientId: "orgId|clientId" });

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

    meeting.init("root");

    /* Optionally pass uiConfig
  const meeting = client.Meeting({
          roomName: "<roomName>",
          authToken:"<authToken>"},{header:false})
    */

</script>

You can check out an example of this integration by cloning our web example repo.


What’s Next

You might want to check out the React component details if you are using React, or you could directly jump to the meeting config details.