Suggestions

close search

Video Chat Embeds

Quickly test OpenTok functionality on your site with a simple embed.

Create a Video Chat Embed

Overview

The Video Chat Embed is the easiest way to quickly test and visualize how an OpenTok application will work with 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 testers can then click on the embed in their own browser and join the same chat room. You can create as many embeds as you want, and each embed will create a unique session (chat room) for up to three participants.

Important: Video Chat Embeds are not meant to be used in a production environment, but rather as a way to prototype your idea with basic OpenTok functionality. Once you're done testing, you can create a project in your TokBox Account to start building your OpenTok application.

The Video Chat Embeds are supported on all browsers supported by the OpenTok.js library: browser support details.

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.

Creating a Video Chat Embed

  1. Go to your TokBox Account and click Create a Video Chat Embed.

  2. Name your embed.

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

  3. Specify the width and height of the embed.

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

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

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.

Next steps

Once you've successfully implemented your video chat embed, you can use it for demonstration or share it with test users to make sure it works as expected. You can also monitor usage statistics by viewing the Embed Overview in your TokBox Account.

We currently only recommend using an embed as a way to quickly prototype a concept and see how it would look on your website before building an actual OpenTok application. Once you've implemented your embed, tested it with your site, and you are ready to move forward with building your custom app, we recommend the following steps:

  1. Visit our Hello World page to see a basic client-side implementation of the OpenTok API.

  2. Go through one of our Tutorials for web, iOS, and Android for a step-by-step walkthrough of building your first app.

  3. Use our developer guides and other resources to customize your app for production.

Support

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