> For the complete documentation index, see [llms.txt](https://doc.datagram.network/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.datagram.network/sdks/video-conferencing/web-external.md).

# Web (external)

The Conference class allows you to embed a conferencing iframe into your web application. It requires a Client instance and supports customizable options for microphone, camera, and other settings. This guide explains how to integrate the Conference class from the `datagram-network/conference-sdk` into your project to enable video conferencing features.

### Class: Conference

#### Constructor

```
constructor(client: Client | null, options: IConferenceOptions = {})
```

* **client:** This is an instance of the Client class that connects you to the Datagram network.
* **options:** These are optional settings you can use to customize the conference.

### 1. Types

#### IConferenceOptions

```
type IConferenceOptions = {
  metadata?: {
    title?: string;   // You can set a title for the conference (optional)
  };
  skipMediaSettings?: boolean; // If true, it skips asking for microphone/camera permissions at the start
  turnOnMic?: boolean;         // Automatically turns on microphone if true
  turnOnCam?: boolean;         // Automatically turns on camera if true
  authorization?: string;      // Your authorization token for accessing the conference
};
```

### 2. Methods

```
mount(selector: string | HTMLElement): Promise<void>
```

Mounts the conference iframe into the specified DOM element.

* **selector:** A CSS selector (e.g., #datagram-frame) or an HTMLElement.
* **Returns:** A Promise that resolves when the iframe is mounted.

```
dispose(): void
```

Cleans up all components created by the mount method, removing the iframe and associated resources.

### 3. Events

The **Conference** class emits the following events via the browser’s **message** event listener:

* **call\_ended:** Triggered when the user clicks the "**End Call**" button.
* **invalid\_qr\_code:** Fired if an incorrect or expired alias is provided, redirecting to an invalid code screen.
* **conference-ready:** Indicates the iframe’s source has loaded. Possible screens: **media\_testing**, **conference**, **invalid**, **call\_ended**, or **not\_supported**.
* **call-ready:** Fired when the conference screen is active (occurs after **conference-ready**).

{% hint style="warning" %}
**Tip:** Use an event listener to handle these events (see example below).
{% endhint %}

### 4. Getting Started Example

Here is a basic example of how to create a client and conference, and then mount it on the page:

```
import { Client, Conference, type IConferenceOptions } from "@datagram-network/conference-sdk";

let client: Client;
let conference: Conference;

const options: IConferenceOptions = {
  skipMediaSettings: false,
  turnOnCam: false,
  turnOnMic: false,
  authorization: "your_token_here",
};

// Create client instance
client = Client.create({
  alias: "77am5",
  origin: "http://localhost:8080",
});

// Create conference instance with client and options
conference = new Conference(client, options);

// Mount conference iframe inside the element with id "conference-root"
conference.mount(document.getElementById("conference-root"));


```

### 5. Vue.js Example

This example demonstrates how to integrate the Conference class into a Vue 3 application using TypeScript and the Composition API.

#### Template

```
div
  button.p-2.border.rounded-full.bg-blue-500.text-white.p-4.min-w-32(@click='startRoom()' :class='{ "disabled:opacity-50": isLoading }')
    span(v-show='!isLoading') Start room
    .loader(v-show='isLoading')
  div#datagram-frame.w-full.bg-black(ref='root' :class='[{ "fixed z-[10] block inset-0" : iframeMounted }]' v-show='iframeMounted')
```

#### Script

```
<script setup lang="ts">
import { useEventListener } from "@vueuse/core";
import { Client, Conference, type IConferenceOptions } from "@datagram-network/conference-sdk";
import { ref } from "vue";

const root = ref<HTMLElement>();
const iframeMounted = ref(false);
const isLoading = ref(false);

let client: Client;
let conference: Conference;

const options: IConferenceOptions = {
  skipMediaSettings: false,
  turnOnCam: false,
  turnOnMic: false,
  authorization: "your_token",
};

useEventListener("message", async (event) => {
  switch (event.data) {
    case "call_ended":
    case "invalid_qr_code":
      iframeMounted.value = false;
      conference?.dispose();
      break;
    case "conference-ready":
    case "call-ready":
      isLoading.value = false;
      iframeMounted.value = true;
      break;
  }
});

async function startRoom() {
  client = Client.create({
    alias: "77am5",
    origin: "http://localhost:8080",
  });
  isLoading.value = true;
  conference = new Conference(client, options);
  await conference.mount(root.value as HTMLElement);
}
</script>
```

#### Styles

```
#datagram-frame
  height 100vh
  @media mobile
    height 100dvh

.loader {
  width: 24px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid #fff;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}

@keyframes l20-1 {
  0%    {clip-path: polygon(50% 50%,0 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0);}
  12.5% {clip-path: polygon(50% 50%,0 0, 50% 0, 100% 0, 100% 0, 100% 0, 100% 0);}
  25%   {clip-path: polygon(50% 50%,0 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);}
  50%   {clip-path: polygon(50% 50%,0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);}
  62.5% {clip-path: polygon(50% 50%,100% 0, 100% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);}
  75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100%);}
  100%  {clip-path: polygon(50% 50%,50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%);}
}

@keyframes l20-2 {
  0%    {transform: scaleY(1) rotate(0deg);}
  49.99% {transform: scaleY(1) rotate(135deg);}
  50%   {transform: scaleY(-1) rotate(0deg);}
  100%  {transform: scaleY(-1) rotate(-135deg);}
}
```