Integrating Video Conferences With Any Website in Minutes
When you wish to give your website visitors a more personal support or sales experience, setting up meetings is an excellent way to go about this, problem is, the traditional experience of setting up meetings can be quite clunky. Let's fix this using SignalWire Video Conferences!
With our Video Conferences, you no longer need to worry about sharing links over email or meeting details over the phone. You simply copy and paste our prebuilt code to the website page you wish to use for meeting with your website visitors, and that's it!
What do you need to get started?
To use our Video Conferences you just need:
- A SignalWire Space. If you do not have one, click here to learn how to create your own SignalWire Space;
Video Conferences can be embedded in your CMS like WordPress, Ghost, Drupal, or any other kind of HTML page.
Obtaining the code to paste on your website
You can get the code snippet for your Video Conference Widget by logging into your SignalWire Space and going to Video Rooms on your dashboard. Select or create a new room, then click on the dropdown menu next to Moderator Embed Code and click on Guest Embed Code to copy the code. A screen like the following will open:
You can copy either the code for guests, or the code for accessing the room with moderator permissions. How do they differ?
|Start/Stop Webcam Video||✅||✅|
|Mute/Unmute Other Users' Audio||❌||✅|
|Start/Stop Other Users' Video||❌||✅|
|Start/Stop Recording The Room||❌||✅|
Since your room's Moderator code snippet gives website visitors permissions over other users, you should never copy it to publicly available pages. Essentially, you could decide to embed these into different pages of your website, one internal (for the Moderator code snippet) and one accessible by the public (for Guests).
Making Video Conferences your own
You can change the look of your Video Conferences in the Appearance tab. There are two color schemes available: light and dark, and you can change them accordingly so they fit the look of your web page depending on the time of day.
Using the code
Here are some examples on how to use the code that we have copied, depending on the technology behind your website.
Static HTML page
Paste the snippet of code inside the
<body> of your page, in the position where you want it to appear. If you need to, you can control the size and position of the widget by wrapping it in a properly styled
div element. For example, to make sure that the size is exactly 400px x 250px and that the widget is horizontally centered:
<div style="margin: 0 auto; width: 400px; height: 250px;">
[paste here your snippet of code]
To learn more about the ways you can make more advanced changes to your code snippet, please read our Video Conference Technical Reference.
Integrating video meetings in WordPress to meet with your team or your customers has never been easier than with Video Conferences! You can add your Video Conference guest code to any page or post, using the Custom HTML block. Paste the code snippet in the HTML block, and you are ready to go.
Restricting access to your moderator page
Since we do not want everyone to have Moderator permissions, we can create an extra page, for internal use only, by making it Private and only visible to Administrators and Editors.
Restricting access to your guest page
You can password-protect your guest page to only allow certain people to join in. This has the benefit of having a consistent meeting link, but with the added benefit of changing the page password as needed.
Conferencing with readers in Ghost is very simple. To turn any post into a meeting/conference page all you need to do is add the guest code to an HTML card.
Wix also allows for the exceedingly simple embedding of video rooms but requires one tiny extra step! To make video conferences work for Wix, you simply have to wrap your auto-generated script from SignalWire in a
Video Conferences are an easy way to integrate a videoconferencing experience into any web page, without advanced software development experience. All you need to do is copy and paste a snippet of code.
Sign Up Here
If you would like to test this example with your own credentials, you can create a SignalWire account and space here.
Please feel free to reach out to us on our Community Slack or create a Support ticket if you need guidance!