Embedding the Jitsi Meet API into your WordPress site enables you to host and provide secure video meetings with your colleagues, teams, and clients. The Meet API provides a full complement of comprehensive meeting features.
Click here to read the official documentation on Jitsi iFrame API
Video demo on integrating Jitsi meeting room in WordPress website
WordPress integration
In this post, we will discuss on how to integrate Jitsi meetings in a WordPress website via shortcodes. We will define the shortcode and all the related code in a WordPress plugin. Without any delay, lets start building the plugin.
Step 1: Create WordPress plugin that defines the Shortcode.
The folder and file structure of the plugin will be as follows
Full path of the plugin will be /wp-content/plugins/sleek-jitsi-iframe/sleek-jitsi-iframe.php
Use the following code to create the plugin and shortcode function. Put the following code in the sleek-jitsi-iframe.php file as shown in the above screenshot.
<?php
/*
Plugin Name: Jitsi Integration - iFrame API
Author: Sleeksoft
Author URI: https://sleeksoft.in/
Description: WordPress plugin to generate Jitsi Video Rooms insite posts and pages
*/
/* Create a shortcode to show Jitsi video conferencing in an iFrame - [sleek-jitsi-room] */
add_shortcode( 'sleek-jitsi-room', 'sleek_jitsi_room_callback' );
function sleek_jitsi_room_callback( $atts ) {
ob_start(); // start buffering
/*
Jitsi iFrame code will be written here
*/
$html = ob_get_contents(); //get your content
ob_end_clean(); //clean echoed html code
return $html;
}
?>After saving the above code, you can see the plugin showing in the wp-admin as shown in the following screenshot. Activate the plugin.
Step 2: Write code to display jitsi video rooms on pages based on page/post ID
We will generate unique jitsi meeting for each page or post where the shortcode is used. To generate unique jitsi meeting room, we will use the current post/page ID along with the post/page title.
<?php
/* Function to filter room name in the Jitsi video conference */
function sleek_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 to show Jitsi video conferencing in an iFrame - [sleek-jitsi-room] */
add_shortcode( 'sleek-jitsi-room', 'sleek_jitsi_room_callback' );
function sleek_jitsi_room_callback( $atts ) {
ob_start(); // start buffering
global $post; // Get current post ID
// Generate a room title for current jitsi meeting
$room_name = sleek_esc_room_title($post->post_title." - ID".$post->ID);
?>
<!-- Load jitsi API javascript file -->
<script src='https://meet.jit.si/external_api.js'></script>
<!-- div where the meeting will be embedded -->
<div id="sleek-jitsi-meeting"></div>
<!-- javascript to customize embedded jitsi meeting -->
<script>
const domain = 'meet.jit.si'; // Domain from where the meeting will be loaded
const options = {
roomName: '<?php echo $room_name; ?>', // Room name
width: 700,
height: 700,
parentNode: document.querySelector('#sleek-jitsi-meeting')
};
const api = new JitsiMeetExternalAPI(domain, options);
</script>
<?php
$html = ob_get_contents(); //get your content
ob_end_clean(); //clean echoed html code
return $html;
}
?>At this point we can go test the shortcode by using it in any of the pages as shown in the following screenshot.
Output for the above shortcode in the sample page will be as shown in the below screenshot. The meeting name is Sample Page ID 2.
Beautifying room name
We can see in the above example the room name is Sample Page ID 2. We can change that display name into a friendly one using the following command.
// Event when user video conference joined
api.addListener('videoConferenceJoined', function(event){
// Change the room id display name to some other string
api.executeCommand('subject', 'Jitsi Meeting Room');
});Step 3: Customize the jitsi meeting with more options from iFrame API
Generate user display name for the meeting from the WordPress user account. If the user is not logged in then generate a random guest user display name.
<?php
if( is_user_logged_in() ){ // If user is logged in
$current_user = wp_get_current_user(); // Get current user
$display_name = $current_user->display_name; // Get current user display name
}
else{ // If user is not logged in
//Generate a random guest name.
$display_name = 'Guest '.date('mYdhis',time());
}
?>Use this generated user display name in the Jitsi meeting for the user. Add user display name in the Jitsi Meeting options.
<!-- javascript to customize embedded jitsi meeting -->
<script>
const domain = 'meet.jit.si'; // Domain from where the meeting will be loaded
const options = {
roomName: '<?php echo $room_name; ?>', // Room name
width: 700, // width of the meeting iframe
height: 500, // height of the meeting iframe
parentNode: document.querySelector('#sleek-jitsi-meeting'),
userInfo: {
displayName: '<?php echo $display_name; ?>', // user display name
},
};
const api = new JitsiMeetExternalAPI(domain, options);
</script>Add more customization to the jitsi meeting by overriding the options in config.js and interface_config.js files. Add those options as shown below.
configOverwrite: {
startWithAudioMuted: true,
},
interfaceConfigOverwrite: {
DISABLE_DOMINANT_SPEAKER_INDICATOR: true,
},Important note
Jitsi iFrame API will NOT ALLOW to override all the configuration and interface configuration options. Only whitelisted options are allowed to override. Please check the following links for whitelisted options.
Whitelisted config.js options : https://github.com/jitsi/jitsi-meet/blob/master/react/features/base/config/configWhitelist.js
Whitelisted interface_config.js options : https://github.com/jitsi/jitsi-meet/blob/master/react/features/base/config/interfaceConfigWhitelist.js
To overwrite all the config.js and interface_config.js options, we need to have a self hosted jitsi meet setup to do this.
Putting it all together
<?php
/*
Plugin Name: Jitsi Integration - iFrame API
Author: Sleeksoft
Author URI: https://sleeksoft.in/
Description: WordPress plugin to generate Jitsi Video Rooms insite posts and pages
*/
/* Function to filter room name in the Jitsi video conference */
function sleek_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 to show Jitsi video conferencing in an iFrame - [sleek-jitsi-room] */
add_shortcode( 'sleek-jitsi-room', 'sleek_jitsi_room_callback' );
function sleek_jitsi_room_callback( $atts ) {
ob_start(); // start buffering
global $post; // Get current post ID
// Generate a room title for current jitsi meeting
$room_name = sleek_esc_room_title($post->post_title." - ID".$post->ID);
// Get Room name by escaping all special chars. We will use this as room display name
$room_display_name = $post->post_title;
if( is_user_logged_in() ){ // If user is logged in
$current_user = wp_get_current_user(); // Get current user
$display_name = $current_user->display_name; // Get current user display name
}
else{ // If user is not logged in
//Generate a random guest name.
$display_name = 'Guest '.date('mYdhis',time());
}
?>
<!-- Load jitsi API javascript file -->
<script src='https://meet.jit.si/external_api.js'></script>
<!-- div where the meeting will be embedded -->
<div id="sleek-jitsi-meeting"></div>
<!-- javascript to customize embedded jitsi meeting -->
<script>
const domain = 'meet.jit.si'; // Domain from where the meeting will be loaded
const options = {
roomName: '<?php echo $room_name; ?>', // Room name
width: 700, // width of the meeting iframe
height: 500, // height of the meeting iframe
parentNode: document.querySelector('#sleek-jitsi-meeting'),
userInfo: {
displayName: '<?php echo $display_name; ?>', // Room name
},
configOverwrite: {
startWithAudioMuted: true,
},
interfaceConfigOverwrite: {
TILE_VIEW_MAX_COLUMNS: 4,
},
};
const api = new JitsiMeetExternalAPI(domain, options);
// Event when user video conference joined
api.addListener('videoConferenceJoined', function(event){
// Apply room display name instead of room id
api.executeCommand('subject', '<?php echo $room_display_name; ?>');
});
</script>
<?php
$html = ob_get_contents(); //get your content
ob_end_clean(); //clean echoed html code
return $html;
}
?>Note : There are many many updates happening in Jitsi platform everyday. So, please make sure you test the browser compatibility etc.. frequently to keep yourself updated.
Happy coding!!