Add Messaging, Voice, and Authentication to your apps with Vonage Communications APIs
Visit the Vonage API Developer PortalQuickly 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.
Limitations
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.
To utilize advanced OpenTok features and mobile browser/app support, you will need to create a project in your Video API account and follow our helpful tutorials and developer guides.
Quick links:
Go to your Video API 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 Video API 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
example.com/test, enter https://example.com. Be sure to enter
http:// or https:// followed by the domain name. (If you will be
using localhost for testing, you can just enter http://localhost or
http://localhost:[port number] for ports other than port 80.)
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 for local testing, such as http://localhost or http://localhost:8080.
If you will be using a site builder such as Squarespace, Weebly, or Wordpress to host the site, select it in the Built using menu (optional).
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 Vonage Video API Account and clicking the Copy Embed Code button at the top of the Embed Overview.
You choose between using an iframe or script embed code. See the next two sections.
What you'll need:
Access to the HTML of your web page for editing
The unique embed code from your Video API 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
Video API 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
between the <body> and </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
copy the URL above and load it in a new browser tab or share it with a friend. The other user will need to click to start the call as well.
<iframe
src="https://tokbox.com/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&iframe=true&room=DEFAULT"
allow="microphone; camera"
></iframe>
script
<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 embedId and 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:
room parameter — 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.room parameter. 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 ?room parameter into the embed src URL. 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.