Embedding Coviu rooms in an iframe

This article describes how to embed Coviu into an iFrame.

Last Updated: Sept 2021


You can embed Coviu video rooms (User Rooms and Meeting Rooms) in your own Website at your own domain. For this, you need to use an iframe. Also, you have to run your Website on https, otherwise cryptography and cameras will not be available.


On this page

  1. Recommended browsers
  2. Setting up your room code
  3. Provide access to your camera
  4. Set up for Screensharing
  5. The complete solution
  6. More Support options

Recommended Browsers

Click here to see the recommended browsers for use with Coviu.


Setting up your room code

So, let's say you have signed up for a Professional account that's called "example" and you have set up a room that's called "example", then your room URL is:

  • https://example.coviu.com/room/example

Your embed code might look something like:

<iframe width="1200" height="600" src="https://example.coviu.com/room/example" frameborder="0" allowfullscreen allow="microphone *; camera *"></iframe>

Change the width and height: To make the width and height work better on your page, here's some suggested CSS - you will need to adapt it to your page content:

<iframe style="width: 100%; min-height: 35rem; height: calc(100vh - 25rem);" src="https://example.coviu.com/room/example" frameborder="0" allowfullscreen allow="microphone *; camera *">


Provide access to your camera

Camera access rights: You have to include an allow attribute in the iframe element to enable camera and microphone access from within a cross-origin iframe (see specification).

<iframe src="https://example.com"  allow="microphone *; camera *"></iframe>

or if you want to restrict it to the Coviu room:


Set up screensharing

If you'd like screensharing to work from within such an iframe, please follow the instructions at: https://help.coviu.com/faqs/get-screensharing-working-in-an-iframe


The complete solution

<script src="https://static.coviu.com/extensions/integration-extensions/1.0.0/coviu-integration-extensions-1.0.0.js"></script>
<script type="text/javascript">CoviuExtensions.init()</script>
<iframe style="width: 100%; min-height: 35rem; height: calc(100vh - 25rem);" src="https://example.coviu.com/room/example" frameborder="0" allowfullscreen allow="microphone *; camera *">


More Support Options

For help specifically with iFrames, API's or other system integrations, you can log a ticket by clicking here.

 

You have completed another Coviu help article. You now know how to set up an iframe with Coviu.

If this is not what you were looking for, explore our knowledge base and search for another article from here.

If you still require any assistance, please do not hesitate to get in touch with our Developer team using the link above or, get in touch with our friendly Customer Success team using any of the contact methods available here.