Embed Video Rooms: Videoconferencing Widget

The SignalWire Video APIs give you full flexibility to build your own personalized video conferencing experience. But if you just need a basic video-conference widget, you can get started by copy-pasting a Video Room Widget from your SignalWire space. Video Rooms can be embedded in your CMS like WordPress, Drupal, or any other kind of static HTML page, simply by copy-pasting a snippet of HTML code.

You can embed the Video Room widget in any kind of webpage just by pasting a code snippet.You can embed the Video Room widget in any kind of webpage just by pasting a code snippet.

You can embed the Video Room widget in any kind of webpage just by pasting a code snippet.

Getting the code

You can get the code for your Video Room Widget by logging into your SignalWire space and going to the Video Section. Select or create a new room, then click on Embed Room 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. You could decide to embed these into different pages of your website, one internal and one accessible by the public.

Customizing the code (optional)

You can perform some basic customization to the code that you have copied. At the bottom of your snippet of code, you will find a function call like this one:

swvr({
  token: 'vrg_xxxxxxxxxxxxx',
  // userName: 'your-name'
});

To change the username of whomever joins the room, uncomment userName and set it to the value you prefer.

Using the code

Here we will give you some examples on how to use the code that we have copied in the previous section.

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]
</div>

WordPress

Add a new Custom HTML block to your page or post. Paste the code snippet in the HTML block, and you are ready to go.


Did this page help you?