# iFrame and Web Components

Source: https://www.veeting.com/en/developer-documentation/iframe-and-web-components

## Overview

There are two ways to put a Veeting meeting into your own application: embed the whole meeting room in an iFrame, or place individual pieces of it on your page as components. This page covers both and helps you choose.

- **An iFrame** gives you the complete meeting room, including the join screen, in a few lines of HTML. It is the fastest route and the right default.
- **[Veeting Blocks](/en/veeting-blocks/introduction)** gives you the individual components (video, chat, whiteboard, participants, and more) to arrange in your own layout. Use it when the meeting has to look like part of your product rather than a window inside it.

Both are driven at runtime by the same [JavaScript API](/en/developer-documentation/javascript-apis).

## Embedding the meeting room in an iFrame

### First, get iFrame embedding enabled

**iFrame embedding is off by default, which is why most first attempts show an empty frame.** Every instance has a feature flag, `allowIFrameEmbedding`. While the flag is off, the meeting room responds with an `X-Frame-Options: SAMEORIGIN` header, and the browser refuses to display the room inside a page on any other domain.

Ask us or your reseller to enable it for your instance. It is a server-side setting, not something you can switch from your own page.

### The markup

There is no special embedding URL. Use the normal meeting room URL, the same one participants would open directly:

```html
<iframe src="https://<DOMAIN-NAME>/meeting/<MEETING-ID>"
  allow="microphone;camera;encrypted-media;fullscreen;autoplay;display-capture;layout-animations;">
</iframe>
```

**The `allow` attribute is not optional.** Without it, the browser denies the meeting room access to the camera and microphone, and the participant joins with no media and no useful error. Copy the list above exactly.

Add [query parameters](/en/developer-documentation/query-parameters) to the `src` URL to preset the participant's name, skip the join screen, choose a layout, hide sections, and more. Anything you can configure from a URL works the same inside an iFrame.

### When the frame stays blank

In order of likelihood:

1. **`allowIFrameEmbedding` is off.** Open the meeting room URL directly and look at the response headers. If `X-Frame-Options: SAMEORIGIN` is present, that is the answer.
2. **The page is served over HTTP.** The meeting room allows framing only from HTTPS origins.
3. **The `allow` attribute is missing or incomplete**, so the room loads but the participant has no camera or microphone.
4. **A Content-Security-Policy on your own page** blocks the frame. Check `frame-src` in your policy, not ours.

## Web components

Alongside Veeting Blocks, there are a few standalone web components: custom HTML tags that embed one piece of meeting functionality without an iFrame and without a build step. You configure them entirely through HTML attributes.

> **Which should I use?** For new work, prefer [Veeting Blocks](/en/veeting-blocks/components). It covers far more of the meeting room, is the component set we are actively developing, and has a full JavaScript API. The standalone components remain available for existing integrations.

A component is two things: an HTML element and a script that brings it to life. The script must come after the element.

### The element

Attributes configure the element. The example here uses the Coffee Table component:

| Attribute        | Description                                                                          |
| ---------------- | ------------------------------------------------------------------------------------ |
| api-host         | The hostname of your meeting room instance, for example `https://rooms.veeting.com`. |
| participant-name | The name shown to others in the meeting. Use `Anonymous` if you do not know it.      |
| meeting-id       | The meeting the component connects to. Use the dashed meeting number.                |
| css-url          | Optional. A URL to an external stylesheet, so you can restyle the component.         |

```html
<coffee-table api-host="https://<DOMAIN-NAME>"
  participant-name="Joe Doe"
  meeting-id="3973-0113-4384-0768"
  css-url="https://<URL to an external CSS file, optional>"></coffee-table>
```

### The scripts

You need two scripts. The first is the official WebRTC adapter, which smooths over browser differences. The second is the component itself. Load it from your own meeting room instance so that it always matches your platform version.

```html
<!-- WebRTC adapter, for browser compatibility -->
<script type="text/javascript"
  src="https://webrtc.github.io/adapter/adapter-latest.js">
</script>

<!-- the web component itself -->
<script type="text/javascript"
  src="https://<DOMAIN-NAME>/component/coffee-table/elements.js">
</script>
```

## Common mistakes

- Embedding an iFrame before `allowIFrameEmbedding` is enabled, then reading the empty frame as a code problem.
- Leaving out the `allow` attribute, so the participant joins with no camera or microphone.
- Serving the embedding page over HTTP.
- Passing the 24-character meeting `id` to `meeting-id`, which expects the dashed number.
- Loading the component script from an instance other than the one in `api-host`.
- Putting the component script before the element it brings to life.
- Starting new work on the standalone components rather than Veeting Blocks.

---

## The rest of this documentation

- [Custom tools](https://www.veeting.com/en/developer-documentation/custom-tools)
- [External meeting authorization service](https://www.veeting.com/en/developer-documentation/external-meeting-authorization-service)
- [JavaScript APIs](https://www.veeting.com/en/developer-documentation/javascript-apis)
- [Query parameters](https://www.veeting.com/en/developer-documentation/query-parameters)
- [Veeting Blocks - Components](https://www.veeting.com/en/veeting-blocks/components)
- [Veeting Blocks - Introduction](https://www.veeting.com/en/veeting-blocks/introduction)
- [Veeting Blocks - JavaScript and Typescript APIs](https://www.veeting.com/en/veeting-blocks/apis)
- [Veeting Rooms REST APIs](https://www.veeting.com/en/developer-documentation/api-usage)
- [Video display calculator](https://www.veeting.com/en/developer-documentation/video-display-calculator)
- [Web hooks](https://www.veeting.com/en/developer-documentation/web-hooks)

All of it in one file: https://www.veeting.com/llms-full.txt