Coffee Table Web Component

Overview

The Coffee Table Web Component brings pure video chat to your application. Up to 12 video participants can join the same coffee table to have a group video chat.

Coffee Table

Embedding

Make sure to embed the Javascript file directly from your web meeting instance. This way you never miss an update.

<html>
<body>
  <!-- embedd the web 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>

  <!-- 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>

</body>
</html>

Attributes

You can use HTML attributes to configure the Coffee Table. Some attributes are mandatory, others optional. The table below describes each of the attributes available.

Attribute nameMandatory?Description
api-hostYesThe domain name of your web meeting instance, for example https://rooms.veeting.com
participant-nameYesThe name of the participant. If you don't know the name you may use a placeholder such as Anonymous.
participant-emailNoThe email address of the participant.
meeting-idYesThe ID of the meeting to which the component should connect to.
css-urlNoAn optional URL to a CSS file. You can overwrite internal styles with your own styles

Styling

Web Components take advantage of the Shadow Dom feature. This means that the styles of your website are not automatically applied to the styles of the web component. However, you can pass a custom CSS URL as an attribute. This CSS will be applied to the Web Component.

Manipulating

Use our Javascript APIs to interact with the Web Component, for example for media device selection, leaving and rejoining the meeting, etc

Not sure how to best implement your project?

Contact our team to discuss the details.