iFrame and Web Components

iFrame embedding

If enabled in the reseller portal, the meeting room can be embedded as an iFrame into your web or Electron application.

There is no special iFrame URL, you can use the standard meeting room URL to embedd the meeting room into your website. To further configure the room and the behaviour you may add additional query parameters. Refer to the Query Parameters documentation for the full list of available query parameters.

<iframe src="https://<Meeting Room URL><?Optional Query Parameters>"
  allow="microphone;camera;encrypted-media;fullscreen;autoplay;display-capture;layout-animations;">
</iframe>

Important: Make sure that you configure the nessecary iFrame permissions as defined in the example above.

Web Components

Overview

Web Components are custom HTML tags which you can include into any website and thereby embed web meeting components directly into your code, without using an iFrame.

The Web Component has a Javascript API to interact with them (refer the the Javascript APIs) documentation for details).

Usage

Web Components consist of two parts: an HTML element an a Javascript. You use the HTML element the same way you use other HTML elements: position the element somewhere in your website and configure it through attributes. The Javascript needs to be embedded after the HTML element.

HTML

The Veeting Web Components have configuration options which can be defined as HTML attributes. In the following example of the Coffee Table Web Component, four attributes are defined:

Attribute nameDescription
api-hostThe host name of your meeting room instance, for example https://rooms.veeting.com
participant-nameThe name of the participant. It will be displayed to the others in the meeting room. You can use Anonymous if you don't know the name.
meeting-idThe meeting ID to which the component should connect.
css-urlAn URL to an external CSS file. This allows you to overwrite styles and design the component
<coffee-table api-host="https://<Web Meeting Domain Name>"
  participant-name="Joe Doe"
  meeting-id="3973-0113-4384-0768"
  css-url="https://<URL to an external CSS file, optional>"></coffee-table>

Check out the documentation page of the Coffee Table component for a full list of available configuration attributes.

Javascript

You need to embed to Javascript files to make the component work. The first one is the official WebRTC Adapter. This adapter makes sure that WebRTC works in all supported browsers. The second Javascript is the actual Web Component that brings life to the HTML element. You should embed the Web Component Javascript from your web meeting instance, for example https://rooms.veeting.com.

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

<!-- embedd the web component code -->
<script type="text/javascript"
  src="https://<Web Meeting Domain Name>/component/coffee-table/elements.js">  
</script>

Not sure how to best implement your project?

Contact our team to talk through the details.