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
- Recommended browsers
- Setting up your room code
- Provide access to your camera
- Set up for Screensharing
- The complete solution
- 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:
<iframe src="https://example.com/" allow="microphone https://example.coviu.com/room/example ; camera https://example.coviu.com/room/example ">
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.