Suggestions

close search

Video Chat Embeds

Quickly add OpenTok functionality to your website with a simple embeddable widget.

Create a Video Chat Embed


Overview

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 (up to three participants). 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. Clients using Safari (version 11 and later) send and receive audio-only streams.

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 TokBox Account and follow our helpful tutorials and developer guides.

Quick links:

Creating a Video Chat Embed

  1. Go to your TokBox Account and Create a Project (either from the side menu or your Account Overview.)

  2. Select the Embed project option.

  3. Name your embed.

    You will use this name later to find the embed in your TokBox Account.

  4. Specify the width and height of the embed.

  5. 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.)

    Important: You should use an https (not http) URL. Chrome does not allow camera access on http pages. However, it does allow you to use http://localhost for local testing. If you do not have an https server, you can still test the embed over http in Firefox and Internet Explorer.

  6. Click the Create Embed button.

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.

Iframe vs. Script embeds

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.

Adding a Video Chat Embed to your web page

What you'll need:

Adding and testing the embed on your web page:

  1. 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 between the <body> and </body> tags to show up on the page.

  2. Save the HTML and load it in your browser. You should now see a box with a Click to Start Call button.

  3. 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.

  4. 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.

Creating additional rooms

There are two types of embeds — iframe and script (see above for more on these). The two types have the following base formats:

iframe

<iframe src="https://tokbox.com/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&iframe=true&room=DEFAULT">
</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.

Use cases for multiple rooms

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:

Supported website platforms

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:

Sample app

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.

Support

If you're having trouble implementing your embed and can't find the answer on this page, you can contact our support team.