# 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);}
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.datagram.network/sdks/video-conferencing/web-external.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.