Recently, TokBox introduced Video Chat Embeds enabling you to add real-time communication to your website with just a few lines of code. Video embeds can be easily integrated into websites built on any of the following platforms:
- Wix
- Squarespace
- Zoho Sites
- Weebly (Business and above)
- WordPress hosted account (paid)
Who are Video Chat Embeds for?
If you’re an educator, doctor, support agent, blogger or someone who wants to add a 1:1 video chatting to your website then embeds are for you!
Using Video Chat Embeds
Let’s go over adding a video chat on our Wix website together where people can give 1:1 live video music lessons. Although we’re doing this for our music website, this can be applied to doctor-patient, student-teacher, interviewer-interviewee or any other 1-to-1 live video application for the web.
You can access the video embed for our music Wix site here: https://manik669.wixsite.com/musiclessons/live-lessons
Before we begin, please make sure to have your OpenTok Video Chat Embeds code handy. If you don’t have an account already, sign up here. For more information on how to create an embed project, click here. Be sure to whitelist your domain so your video chat embeds can be verified. You can either choose the iframe or script embeds, but please note that iframe embeds are not supported on Safari because Safari doesn’t allow iframes to access a user’s camera or microphone.
Adding Code to Wix
- Log into Wix.
- Click “Manage Site”.
- Click “Edit Site”.
- Select the page where you want to add the video chat
- On the widget on your left, click on the “+(Add)” icon.
- At the bottom, click “More”.
- Under “HTML & Flash”, click “HTML Code”.
- This will create a small widget on your site editor.
- Place this widget where you’d like your video chat to be on your page
- Click “Edit Code” button on the widget and add select the “Code” option.
- Add your OpenTok Video Chat Embed code in the text box below and click “Update”.
- After adding your code, click “Publish” on the top right corner to deploy your changes live.
An example of the video chat embed and the HTML Settings in edit mode will look like this:
You may notice that that everyone is in the same room, however, if you change the roomID in the embed code, you can dynamically generate rooms to create private channels. At the end of the embed URL, you’ll see a room parameter which is set to DEFAULT. If you want to create a new room, simply change the room parameter to another value. For example, you can create an embed with room=lesson1 and another one with room=lesson2. This will ensure that any participants in the “lesson1” room will only be able to communicate with other participants in “lesson1”. For more information on dynamic rooms for embeds, please visit: https://tokbox.com/developer/embeds/#rooms
Congratulations! You’ve now added a video chat to your WIX website! Take a look at the example below where I’m getting a guitar lesson from, Liz, a member of our design team who also happens to enjoy playing the guitar:
What’s Next?
As you can see, adding a video chat to a website has never been easier. At TokBox, we’re extremely passionate about enabling our users so they can use OpenTok regardless of the platform or framework they’re developing on. If you’re interested in creating your own appointment application that uses embeds to power a video chat, please take a look at our video chat embed demo app as it demonstrates the use of dynamic embed rooms for appointments between two people. Alternatively, if you’d like to have full control over the functionality and UI, screensharing, archiving, session monitoring, multi-platform support, or have a large multi-party video chatting application then you should use the OpenTok API.
The post How to add a video chat embed to your Wix website appeared first on TokBox Blog.