Yes, You Really Can Embed an OpenTok Video Call Portal into Your Website in Minutes

Screenshot of OpenTok video call in progress

I don’t like those do-it-yourself ads on TV and the internet. The promise of being able to save hundreds of dollars and achieve a professional-quality outcome on your BBQ pit, aquarium, or kitchen renovation is just too good to be true.

But in the spirit of investigation, I decided to take on one of these DIY claims and create a technical marvel of my own–a personalized video chat portal within my own website.

Platform-as-a-Service company OpenTok claims it is possible to add live video to your website in minutes with one line of code. It’s a form of browser-based video conferencing that uses the codes built into a platform like Chrome or Firefox to provide video and audio without the need for any downloads or apps, like Skype.

It turns out there’s truth in this claim–you can set up an OpenTok video call portal in minutes. Of course, they go on to claim it can be done in four minutes, but there’s no way that’s possible for a person with basic IT experience like me–I’ve only messed with a little HTML when inserting images and graphs into a WordPress-powered blog.

But within 15 minutes? That turned out to be entirely possible.

Here’s how I did it:

Step 1: Have a Website in the First Place

Obviously, you’re not going to have a use for your own video calling portal unless you have a web presence in the first place. This technology will work for any site on the web, be it a blog, a small business, a club or society, anything.  

To prove that point–and because the web administrators at VC Daily aren’t silly enough to let me mess around with the actual site–I attached my portal to a shell website created through I chose the company for no reason other than they let you put together a basic site for free and they’ve successfully marketed themselves into my consciousness. Web chat aside, there’s only one live link on the whole page, and that just takes you back to the VC Daily landing page.

It’s free, it has a multimedia cityscape background, and soon it’ll be able to host a video call.

Step 2: Get Yourself a Video Chat Code

Screenshot of opentok embed

This is the part where I’d say it’s fair to get your stopwatch out and start timing how long it takes to install a video portal on your web page. Perhaps not surprisingly, the longest part of this process was signing up for a free OpenTok account.

Signing up to OpenTok follows the usual process of handing over a few details, such as your email address, and then entering an emailed verification code. Once inside, you’re given a $10 free credit to spend as you see fit–I generated two video calling codes without it affecting my balance.  

  • Once you’ve signed up to OpenTok, create a new project using the option in the menu on the left, and select Embed from the two pop-up choices.
  • Then, choose a project title, select the size of your portal–I went with the default 800×640 to begin–and enter your web address. My new site was housed within the URL, which presented no problems.
  • Your embed code is created for you, and you just have to select either the IFrame or JavaScript version, depending on your browser–I chose JavaScript because it is supported by the majority of browsers, but both do the same job of embedding one web page within another.
  • All you need to do now is insert the code into your website.

Step 3: Embed Your Video Link

This part is going to vary from website to website because of the different backends and your access to them. Within my WIX example, you just have to click on the simply labeled Add App button, and then select Embed HTML. From here you paste in your code and stretch the resulting display window to suit your page and the video chat dimensions you specified earlier.

Embedding opentok html

My first attempt at this step resulted in a window a little too small for the OpenTok display inside…

Opentok window

…but you can always delete and repeat.

There was one catch, however. As OpenTok warned, my video connection didn’t work on the Google Chrome browser.

Error message with opentok

So, I switched to Firefox and it worked as promised.

And now it’s time to click your stopwatch. You’ve built your own video calling portal into your website, and to make a call, your clients, readers, family, or colleagues just have to click the middle of the chat window that says Click to Start Video Chat. Simple.

It took me around 15 minutes from sign-up to active video call embed. I think it’s fair to say OpenTok’s claim of letting you complete the job “within minutes” is a valid one.

If you pay for an OpenTok subscription, you expand the number of video callers you can host–the free version accommodates up to three–and you can add additional chat windows to the same site.

The next step is to put your creation to work.

Uses for a Private OpenTok Video Call

Using this method means your video calls are hosted through OpenTok. What you created is a link to their cloud-based video calling platform. It’s like a site within a site–or a site embedded within a site.

To the public, however, everything happens through your branded web space. You can use OpenTok, and other services–there are many browser-based video chat providers out there–to build a real-time, face-to-face connection with anyone, for any purpose, such as:

  • Video chat customer service for your business
  • A point of contact for readers of your blog
  • An easy, private connection for friends and family
  • A temporary, anonymous site for hosting job interviews or surveys
  • A hub for members of your club, church, or sports team
  • A video chat study group (we’ve looked into this one before)
  • A digital meeting point for a telecommuter team meeting or party

It’s pretty impressive how many uses you can put a video chat portal to. And you can build the whole system yourself. Right now. In minutes.

Subscribe to VC Daily