Quickly add Vonage Video API functionality to your website with a simple embeddable widget.
This is an example of a Video Chat Embed.
Click to start the call, then click the button below to share this unique embed link for a 1-to-1 video chat.
The Video Chat Embed is the easiest way to quickly add basic OpenTok functionality to your website using an embeddable HTML snippet.
Once implemented on your site, you can click the embed to connect to a "video chat room." Other users can then click on the embed in their own browser and join the same chat room. You can even create separate rooms with the same embed using the room parameter.
Video chat embeds are supported on all browsers supported by the OpenTok.js library.
Currently video chat embeds only work on the web and provide basic audio-video chat functionality. Mobile app integration and advanced features such as archiving, screen sharing, and text chat are not included in video chat embed functionality.
Go to your TokBox Account and Create a Project (either from the side menu or your Account Overview.)
Select the Embed project option.
Name your embed.
You will use this name later to find the embed in your TokBox Account.
Specify the width and height of the embed.
Specify the website domain where you plan to use the embed.
For example, if you will be adding the embed to your web page at
https://example.com. Be sure to enter
https:// followed by the domain name. (If you will be
using localhost for testing, you can just enter
Important: You should use an https (not http) URL. Browsers do not allow camera access on http pages. However, they do allow you to use http://localhost for local testing.
After completing these steps, your embed code will be generated on the page. Copy this code and save it so you can add it to your website. You can get this code at any time by selecting an existing video chat embed in your TokBox Account and clicking the Copy Embed Code button at the top of the Embed Overview.
After creating your embed, you may notice a tab on the final screen allowing you to choose between an iframe or script embed code.
It is recommended to use the script embed code because Safari does not allow iframes to access a user's camera or microphone. However, if you don't have any Safari users, implementing the iframe embed code might be more suitable for your application.
What you'll need:
Access to the HTML of your web page for editing
The unique embed code from your TokBox Account (see Creating a Video Chat Embed).
Adding and testing the embed on your web page:
With your web page HTML open in an editor, copy the embed code from your
TokBox Account and paste it in the body of your HTML. The location where you
paste it depends on where you want it to appear, but it must be somewhere
</body> tags to show up on the page.
Save the HTML and load it in your browser. You should now see a box with a Click to Start Call button.
Click the button and you should connect to the video chat room. If necessary allow access to your camera and microphone. You should now see a video of yourself in the browser.
To make sure video chat is working, mute your audio then open the same URL in another tab, browser or computer and click to start the call. You should now see two video streams in the embed.
There are two types of embeds — iframe and script (see above for more on these). The two types have the following base formats:
<iframe src="https://tokbox.com/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&iframe=true&room=DEFAULT" allow="microphone; camera"> </iframe>
<div id="otEmbedContainer" style="width:[YOUR EMBED WIDTH]; height:[YOUR EMBED HEIGHT]"></div> <script src="https://tokbox.com/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&room=DEFAULT"> </script>
In both cases, the end of the
src URL is a parameter
room=DEFAULT. This parameter specifies the "room" used by the embed — if multiple users access an embed with the same
room parameters, they will begin a video chat session, where each user can view the other users' video stream(s). If the rooms do not match, they will not join the same room.
If you would like to use the same embed to create multiple separate rooms, you can change the "room" parameter to establish a new room. For example, you could create an embed with
room=group1 and another with
room=group2 — any user who accesses the "group1" room will be able to view streams from anyone else accessing the "group1" room, but will not be able to see users accessing the "group2" room.
Keep in mind that the maximum number of participants in any single room is three.
While the room parameter is not required for creating a production app with embeds, there are several ways to leverage this feature to create a much more robust video application. Here are a few examples of how it can be used:
roomparameter — the users would then load the dynamically created embed in their browser, joining the same room as any other users with the same room ID.
roomparameter. Other users could then enter the same room name to join the same video chat session.
www.example.com?room=group1), you would simply need some client-side code to parse the URL and construct an embed when the user loads the page, passing the
?roomparameter into the embed
srcURL. The live example at the top of this page is an example of this use case in action.
Video Chat Embeds can currently be integrated into websites built with any of the following platforms:
The following platforms are currently not compatible with embeds:
Additionally, embeds will not work properly with the following online code editors:
This sample web app shows you how to generate dynamic video chat embed rooms for a 1-to-1 appointment workflow using Node.js. This can be used for a doctor-patient, student-teacher, or any other 1-to-1 scheduling application for the web.
If you're having trouble implementing your embed and can't find the answer on this page, you can contact our support team.