Skip to main content

Quickstart

This quickstart shows how to use Dyte's UI Kit prebuilt components to add live video and audio to your web applications with minimal coding and a variety of meeting UI customization options.

For getting started quickly, you can use our sample code. You can clone and run a sample application from the HTML UI Kit GitHub repository.

Before Getting Started​

Step 1: Install the SDK​

Since the UI Kit is built on top of the Core SDK, you must install the web-core package along with the ui-kit.

There are two ways to use UI Kit in your project, according to your project setup.

You can install the SDK using CDN, npm, or Yarn.

To set up UI Kit components and web-core, add the following script tags inside the <head /> tag.

<head>
  <script type="module">
      import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit/loader/index.es2017.js';
      defineCustomElements();
  </script>
  <!-- Import Web Core via CDN too -->
  <script src="https://cdn.dyte.in/core/dyte.js"></script>
</head>

You can also import utilities or any other export from CDN:

<head>
  <script type="module">
    import {
      provideDyteDesignSystem, extendConfig,
    } from 'https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit/dist/esm/index.js';
  </script>
</head>

Version​

@dytesdk/ui-kitnpm version
@dytesdk/web-corenpm version

Step 2: Get Started with Dyte Prebuilt Components​

Here's a series of steps that you need to perform:

  1. Load the Dyte component.
  2. Initialize the Dyte client.
  3. Call the init() method and pass the authToken:
authTokenAfter you've created the meeting, add each participant to the meeting using the Add Participant API. The API response contains the authToken.

  1. Pass the meeting object to UI Kit, which will use it to retrieve meeting information and display it on the user interface.

    The meeting object serves as the link between web-core and UI Kit, allowing them to communicate with one another. Once the UI Kit has the meeting object, it can join and leave meetings, and so on.

LIVE EDITOR

<head>
<script type="module">
  import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit@latest/loader/index.es2017.js';
  defineCustomElements();
</script>
<!-- Import Web Core via CDN too -->
<!-- <script src="https://cdn.dyte.in/core/dyte.js"></script> -->
</head>
<body>
<dyte-meeting id="my-meeting"></dyte-meeting>
<script>
  const init = async () => {
    const meeting = await DyteClient.init({
      // Add your own auth token here
      authToken: yourAuthToken,
      defaults: {
        audio: false,
        video: false,
      },
    });

    document.getElementById('my-meeting').showSetupScreen = false;
    document.getElementById('my-meeting').meeting = meeting;
  };

  init();
</script>
</body>