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.
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 name | Mandatory? | Description |
|---|---|---|
| api-host | Yes | The domain name of your web meeting instance, for example https://rooms.veeting.com |
| participant-name | Yes | The name of the participant. If you don't know the name you may use a placeholder such as Anonymous. |
| participant-email | No | The email address of the participant. |
| meeting-id | Yes | The ID of the meeting to which the component should connect to. |
| css-url | No | An 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 talk through the details.
Contact Information
Useful Links
Legal
Use Cases
Case Studies
