Embedding the VideoSDK Meeting room into your WordPress site enables you to host and provide secure video meetings with your colleagues, teams, and clients. Their prebuilt SDK provides a full complement of comprehensive meeting features.
Click here to read the official documentation on Prebuilt SDK
Video demo on integrating VideoSDK meeting room in WordPress website.
Perquisites
- Create a free account in VideoSDK. Click here to sign up.
- Generate your VideoSDK API key. Click here for instructions.
WordPress integration
In this post, we will discuss on how to integrate VideoSDK meetings in a WordPress website via shortcodes. We will define the shortcode and all its related code in a WordPress plugin. Without any delay, lets start building the plugin.
Step 1: Create WordPress plugin and create settings page to save API key.
The folder and file structure of the plugin will be as follows.
Full path of the plugin will be /wp-content/plugins/sleek-videosdk-integration/sleek-videosdk-integration.php
Use the following code to create the plugin. Put the code in the sleek-videosdk-integration.php file as shown in the above screenshot.
<?php
/*
Plugin Name: Sleek VideoSDK Integration
Author: Sleeksoft
Author URI: https://sleeksoft.in
Description: Plugin to create VideoSDK meetings using VideoSDK prebuilt API.
Version: 1.0
*/
?>Now, we need to create a settings page to save the VideoSDK API key we got from the VideoSDK account.
/* Register videosdk settings page. */
function sleek_videosdk_settings_page() {
add_submenu_page(
'options-general.php', // Parent page
__( 'VideoSDK Settings' ), // Menu title
__( 'VideoSDK Settings' ), // Page title
'manage_options', // Permissions
'sleek-videosdk-settings', // Page slug or URL parameter
'sleek_videosdk_settings_callback', // Callback function
''
);
}
add_action( 'admin_menu', 'sleek_videosdk_settings_page' );After saving the above code, you can see the plugin showing in the wp-admin as shown in the following screenshot. Activate the plugin.
After activating you should see a submenu page we created in the Settings menu as shown in the following screenshot.
Step 2: Write code to display settings form in VideoSDK settings page and Save those settings in site options.
Remember we have a callback function sleek_videosdk_settings_callback when we created the settings submenu. This function will display the content of the settings menu page we created. The whole purpose of this menu page is to save the VideoSDK API key, let’s do it.
/* Settings page callback function - This function shows the content of the VideoSDK Settings page we created */
function sleek_videosdk_settings_callback(){
?>
<div class="wrap">
<h1 class="wp-heading-inline">VideoSDK Settings</h1>
<div id="poststuff">
<div class="postbox-container" id="dashboard-widgets">
<?php
// when form is submitted
if($_POST && isset($_POST['sleek_videosdk_api_key'])){ // Check if video sdk API key is submitted
if($_POST['sleek_videosdk_api_key'] == ''){ // Check if video sdk API key is empty, then show error.
?>
<p style="color: #9d261d;"><strong>Error!</strong> API Key cannot be empty</p>
<?php
}
else{ // If all goes well, save the API key
// Save the API key in site options.
update_option('sleek_videosdk_api_key', trim($_POST['sleek_videosdk_api_key'])); //Trim for empty spaces before saving
?>
<p style="color: #2c8100;">API Key saved</p>
<?php
}
}
?>
<!-- Form to save the API Key -->
<form method="post" action="">
<div class="input-text-wrap">
<p><label><strong>VideoSDK API Key</strong></label></p>
<input type="text" name="sleek_videosdk_api_key" style="width: 70%;" value="<?php echo get_option('sleek_videosdk_api_key'); ?>" /></textarea>
</div>
<div class="button-container">
<p><input type="submit" class="button button-primary" value="Save" /></p>
</div>
</form>
</div>
</div>
</div>
<?php
}Add above function in your plugin file, save it and check the VideoSDK Settings page we created. It will show the form to save the VideoSDK API key. Enter the key and click on the Save button.
The API key will be saved in site options. So, you can retrieve or use it anywhere in your WordPress website.
Step 3: Create a shortcode to show VideoSDK meeting in your WordPress website.
There are many ways to show the VideoSDK meeting room in a WordPress website. For flexibility and easy-to-use I am going to create a shortcode which will show the VideoSDK meeting room in a WordPress page/post. Let’s create the shortcode.
/* Create a shortcode [sleek-videosdk-room] to show the videosdk meeting in a page/post */
add_shortcode( 'sleek-videosdk-room', 'sleek_videosdk_room_callback' );
function sleek_videosdk_room_callback( $atts ) {
ob_start(); //start buffering
global $post; // Get current page/post
// Process the shortcode attributes
$atts = shortcode_atts( array(
'post_id' => $post->ID, // Assign post_id variable with current post/page
), $atts, 'sleek-videosdk-room' );
/* Shortcode content goes here */
$html = ob_get_contents(); //get your content
ob_end_clean(); //clean echoed html code
return $html;
}Now, let’s create the prebuilt JS code to show the meeting. We are grabbing the code from official documentation.
/* Create a shortcode [sleek-videosdk-room] to show the videosdk meeting in a page/post */
add_shortcode( 'sleek-videosdk-room', 'sleek_videosdk_room_callback' );
function sleek_videosdk_room_callback( $atts ) {
ob_start(); //start buffering
global $post; // Get current page/post
// Process the shortcode attributes
$atts = shortcode_atts( array(
'post_id' => $post->ID, // Assign post_id variable with current post/page
), $atts, 'sleek-videosdk-room' );
/* Shortcode content goes here */
if( is_user_logged_in() ){ // Check if user is logged in. We allow only authorized users.
if($atts['post_id'] !=''){ // Double check if post_id is not empty
// Get pariticipant name by escaping all the special chars
$participant_name = sleek_videosdk_get_participant_name();
// Get API key from site options
$apiKey = get_option('sleek_videosdk_api_key');
// Get Room id/title by escaping all special chars
$blog_title = get_bloginfo();
$room_id = sleek_videosdk_esc_room_title($blog_title." - ".$post->post_title." - ID".$post->ID);
// Get Room name by escaping all special chars
$room_display_name = sleek_videosdk_esc_room_title($post->post_title);
// Check if current user is admin
$admin = 'no'; // By default no
if( current_user_can('administrator') ){
$admin = 'yes'; // If admin, update to yes
}
?>
<!-- This is the div or element where the meeting will be loading -->
<div id="sleek-videosdk-container" style="width: 100%; height: 600px;"></div>
<script>
var script = document.createElement("script");
script.type = "text/javascript";
script.addEventListener("load", function (event) {
const config = {
name: '<?php echo $participant_name; ?>', // Participant name
meetingId: '<?php echo $room_id; ?>', // Root ID
apiKey: '<?php echo $apiKey; ?>', // API Key
containerId: 'sleek-videosdk-container', // Container where the video conference will be loaded
micEnabled: false, // By default mic will be disabled
webcamEnabled: false, // By default video will be disabled
participantCanToggleSelfWebcam: true, // Allow users to toggle webcam devices
participantCanToggleSelfMic: true, // Allow users to toggle mic devices
chatEnabled: false, // Diable chat
//pollEnabled: false, // Disable polls
<?php if($admin == 'yes'){ ?>
screenShareEnabled: true, // Enable screenshare for admins only
<?php } else { ?>
screenShareEnabled: false, // Disable screenshare for non-admins
<?php } ?>
participantCanLeave: true, // Allow participant to leave the meeting
joinScreen: {
visible: false, // Hide the join screen
title: '<?php echo $room_display_name; ?>', // Meeting title
meetingUrl: window.location.href, // Meeting joining url is current URL
},
permissions: {
pin: true, // Allow users to pin a speaker or participant
endMeeting: false, // Disable users from ending the meeting
changeLayout: true, // Allow users to change the layout
toggleLivestream: false, // Disable live stream
canCreatePoll: false, // Disable user from creating polls
<?php if($admin == 'yes'){ ?>
removeParticipant: true, // Enable remove participant option for admins only
<?php } else { ?>
removeParticipant: false, // Disable remove participant option for non-admins
<?php } ?>
},
waitingScreen: {
imageUrl: "",
text: "Loading...",
},
notificationSoundEnabled: false, // Disable notification sounds as it might be annoying
maxResolution: "hd", // Allow only SD videos to save bandwidth if needed
joinWithoutUserInteraction: true, // Directly join the meeting without "Join the meeting" step
};
const meeting = new VideoSDKMeeting(); // Create the meeting object
meeting.init(config); // Send all the configuration options we defined above
});
script.src = "https://sdk.videosdk.live/rtc-js-prebuilt/0.3.30/rtc-js-prebuilt.js"; // Load the prebuilt JS file
document.getElementsByTagName("head")[0].appendChild(script); // Load the meeting
</script>
<?php
}
}
else{
// Show the following message when someone tries to join the meeting without logging in
?>
<h4>Hello, You need to <a href="<?php echo wp_login_url(); ?>">Login</a> to join the meeting.</h4>
<?php
}
$html = ob_get_contents(); //get your content
ob_end_clean(); //clean echoed html code
return $html;
}You should have seen two new functions we defined in the above code snippet.
- sleek_videosdk_get_participant_name – We use this function to get current logged in user’s name.
- sleek_videosdk_esc_room_title – We use this function to escape the meeting room title. So it does not contain any special characters that might break the script.
Now, lets define those two functions.
/* Escape participant name */
function sleek_videosdk_get_participant_name() {
$current_user = wp_get_current_user(); // Get current user
$name = ''; // Initialize name
if($current_user->user_firstname != ''){ // Check if user got first name
$name = $current_user->user_firstname; // Assign first name
if($current_user->user_lastname != ''){ // If user got last name too
$name .= ' '.$current_user->user_lastname; // Combine first name and last name
}
}
else if($current_user->display_name != ''){ // Check user got display name
$name = $current_user->display_name; // Assign display name
}
else{ // If none, assign user login as name
$name = $current_user->user_login;
}
// Escape for any special characters before we send the name to VideoSDK meeting parameters
$name = preg_replace('/[^A-Za-z0-9\- ]/', '', $name); // Removes special chars except spaces
return $name;
}
/* Escape Meeting Room Title */
function sleek_videosdk_esc_room_title( $string) {
//$string = str_replace(' ', '-', $string); // Replaces all spaces with hyphens.
$string = preg_replace('/[^A-Za-z0-9\- ]/', '', $string); // Removes special chars.
return preg_replace('/-+/', '-', $string); // Replaces multiple hyphens with single one.
}Putting it all together.
<?php
/*
Plugin Name: Sleek VideoSDK Integration
Author: Sleeksoft
Author URI: https://sleeksoft.in
Description: Plugin to create VideoSDK meetings using VideoSDK prebuilt API.
Version: 1.0
*/
/* Register videosdk settings page. */
function sleek_videosdk_settings_page() {
add_submenu_page(
'options-general.php', // Parent page
__( 'VideoSDK Settings' ), // Menu title
__( 'VideoSDK Settings' ), // Page title
'manage_options', // Permissions
'sleek-videosdk-settings', // Page slug or URL parameter
'sleek_videosdk_settings_callback', // Callback function
''
);
}
add_action( 'admin_menu', 'sleek_videosdk_settings_page' );
/* Settings page callback function - This function shows the content of the VideoSDK Settings page we created */
function sleek_videosdk_settings_callback(){
?>
<div class="wrap">
<h1 class="wp-heading-inline">VideoSDK Settings</h1>
<div id="poststuff">
<div class="postbox-container" id="dashboard-widgets">
<?php
// when form is submitted
if($_POST && isset($_POST['sleek_videosdk_api_key'])){ // Check if video sdk API key is submitted
if($_POST['sleek_videosdk_api_key'] == ''){ // Check if video sdk API key is empty, then show error.
?>
<p style="color: #9d261d;"><strong>Error!</strong> API Key cannot be empty</p>
<?php
}
else{ // If all goes well, save the API key
// Save the API key in site options.
update_option('sleek_videosdk_api_key', trim($_POST['sleek_videosdk_api_key'])); //Trim for empty spaces before saving
?>
<p style="color: #2c8100;">API Key saved</p>
<?php
}
}
?>
<!-- Form to save the API Key -->
<form method="post" action="">
<div class="input-text-wrap">
<p><label><strong>VideoSDK API Key</strong></label></p>
<input type="text" name="sleek_videosdk_api_key" style="width: 70%;" value="<?php echo get_option('sleek_videosdk_api_key'); ?>" /></textarea>
</div>
<div class="button-container">
<p><input type="submit" class="button button-primary" value="Save" /></p>
</div>
</form>
</div>
</div>
</div>
<?php
}
/* Escape participant name */
function sleek_videosdk_get_participant_name() {
$current_user = wp_get_current_user(); // Get current user
$name = ''; // Initialize name
if($current_user->user_firstname != ''){ // Check if user got first name
$name = $current_user->user_firstname; // Assign first name
if($current_user->user_lastname != ''){ // If user got last name too
$name .= ' '.$current_user->user_lastname; // Combine first name and last name
}
}
else if($current_user->display_name != ''){ // Check user got display name
$name = $current_user->display_name; // Assign display name
}
else{ // If none, assign user login as name
$name = $current_user->user_login;
}
// Escape for any special characters before we send the name to VideoSDK meeting parameters
$name = preg_replace('/[^A-Za-z0-9\- ]/', '', $name); // Removes special chars except spaces
return $name;
}
/* Escape Meeting Room Title */
function sleek_videosdk_esc_room_title( $string) {
//$string = str_replace(' ', '-', $string); // Replaces all spaces with hyphens.
$string = preg_replace('/[^A-Za-z0-9\- ]/', '', $string); // Removes special chars.
return preg_replace('/-+/', '-', $string); // Replaces multiple hyphens with single one.
}
/* Create a shortcode [sleek-videosdk-room] to show the videosdk meeting in a page/post */
add_shortcode( 'sleek-videosdk-room', 'sleek_videosdk_room_callback' );
function sleek_videosdk_room_callback( $atts ) {
ob_start(); //start buffering
global $post; // Get current page/post
// Process the shortcode attributes
$atts = shortcode_atts( array(
'post_id' => $post->ID, // Assign post_id variable with current post/page
), $atts, 'sleek-videosdk-room' );
/* Shortcode content goes here */
if( is_user_logged_in() ){ // Check if user is logged in. We allow only authorized users.
if($atts['post_id'] !=''){ // Double check if post_id is not empty
// Get pariticipant name by escaping all the special chars
$participant_name = sleek_videosdk_get_participant_name();
echo $participant_name;
// Get API key from site options
$apiKey = get_option('sleek_videosdk_api_key');
// Get Room id/title by escaping all special chars
$blog_title = get_bloginfo();
$room_id = sleek_videosdk_esc_room_title($blog_title." - ".$post->post_title." - ID".$post->ID);
// Get Room name by escaping all special chars
$room_display_name = sleek_videosdk_esc_room_title($post->post_title);
// Check if current user is admin
$admin = 'no'; // By default no
if( current_user_can('administrator') ){
$admin = 'yes'; // If admin, update to yes
}
?>
<!-- This is the div or element where the meeting will be loading -->
<div id="sleek-videosdk-container" style="width: 100%; height: 600px;"></div>
<script>
var script = document.createElement("script");
script.type = "text/javascript";
script.addEventListener("load", function (event) {
const config = {
name: '<?php echo $participant_name; ?>', // Participant name
meetingId: '<?php echo $room_id; ?>', // Root ID
apiKey: '<?php echo $apiKey; ?>', // API Key
containerId: 'sleek-videosdk-container', // Container where the video conference will be loaded
micEnabled: false, // By default mic will be disabled
webcamEnabled: false, // By default video will be disabled
participantCanToggleSelfWebcam: true, // Allow users to toggle webcam devices
participantCanToggleSelfMic: true, // Allow users to toggle mic devices
chatEnabled: false, // Diable chat
//pollEnabled: false, // Disable polls
<?php if($admin == 'yes'){ ?>
screenShareEnabled: true, // Enable screenshare for admins only
<?php } else { ?>
screenShareEnabled: false, // Disable screenshare for non-admins
<?php } ?>
participantCanLeave: true, // Allow participant to leave the meeting
joinScreen: {
visible: false, // Hide the join screen
title: '<?php echo $room_display_name; ?>', // Meeting title
meetingUrl: window.location.href, // Meeting joining url is current URL
},
permissions: {
pin: true, // Allow users to pin a speaker or participant
endMeeting: false, // Disable users from ending the meeting
changeLayout: true, // Allow users to change the layout
toggleLivestream: false, // Disable live stream
canCreatePoll: false, // Disable user from creating polls
<?php if($admin == 'yes'){ ?>
removeParticipant: true, // Enable remove participant option for admins only
<?php } else { ?>
removeParticipant: false, // Disable remove participant option for non-admins
<?php } ?>
},
waitingScreen: {
imageUrl: "",
text: "Loading...",
},
notificationSoundEnabled: false, // Disable notification sounds as it might be annoying
maxResolution: "hd", // Allow only SD videos to save bandwidth if needed
joinWithoutUserInteraction: true, // Directly join the meeting without "Join the meeting" step
};
const meeting = new VideoSDKMeeting(); // Create the meeting object
meeting.init(config); // Send all the configuration options we defined above
});
script.src = "https://sdk.videosdk.live/rtc-js-prebuilt/0.3.30/rtc-js-prebuilt.js"; // Load the prebuilt JS file
document.getElementsByTagName("head")[0].appendChild(script); // Load the meeting
</script>
<?php
}
}
else{
// Show the following message when someone tries to join the meeting without logging in
?>
<h4>Hello, You need to <a href="<?php echo wp_login_url(); ?>">Login</a> to join the meeting.</h4>
<?php
}
$html = ob_get_contents(); //get your content
ob_end_clean(); //clean echoed html code
return $html;
}
?>Step 4: Create a WordPress page and use the shortcode we defined in the plugin.
Let’s go create a page called “My Meeting” and insert the shortcode we created as shown in the following screenshot and publish the page.
Now, if we go the frontend of this page, we should see the following output.
When you double click the window you can toggle fullscreen. This will look as shown in the following screenshot.
Now, you can create as many meeting rooms as you want. Each page is a meeting room.
Miscellaneous
- In the code, we have enabled screenshare and removing a participant permissions to work only for WordPress admin users. You can write your own rules and enable or disable permissions accordingly.
- There are lot of other API options to explore in the VideoSDK documentation. I recommend you to go through the official documentation for more ideas.
- There are lot of updates happening in VideoSDK platform. So, please make sure you test the code, options and browser compatibility etc.. frequently to keep yourself and the plugin updated.
Happy coding!!