How-to guide

Easy Steps to Integrate Video Call on Your Website

14 min read

January 22, 2024

In today's digital age, integrating video conferencing into websites has become increasingly important. Embedding video call functionality can significantly enhance the user experience and engagement for business meetings, customer support, or virtual events.

This guide offers a detailed walkthrough on seamlessly incorporating video conferencing into your website. Learn how to harness the capabilities of Digital Samba's API and SDK to enhance your digital communication strategy.

Table of Contents

Why add video conferencing to your website?
Understanding video conferencing SDK and APIs for website integration
Step-by-step guide: Embed video call on your website with Digital Samba API
Customising the embedded video conferencing experience using Digital Samba SDK
Using SDK events and methods to manage events in real-time
Digital Samba embedded WordPress plugin: Effortless WebRTC integration
Maximise your website's potential by integrating Digital Samba video conferencing
FAQs: Everything you need to know on how to embed video chat to your website

It's also crucial to remember that you can integrate Digital Samba video conferencing into your website or app using our API for developers or their WordPress Plugin for WordPress websites. The API allows for effortless integration with a few lines of HTML code. At the same time, the WordPress Plugin offers simple GDPR-compliant video conferencing and webinars with various features such as screen sharing, text chat, closed captioning, and virtual background.

Why add video conferencing to your website?

In an era where digital communication is crucial, adding video conferencing to your website goes beyond just being a mere enhancement; it's an essential tool for engagement and interaction.

As remote work, virtual meetings and online education become more mainstream, video conferencing is emerging as a critical tool. It bridges distances and enables real-time connectivity in a world that is increasingly adopting digital interactions.

For businesses, integrating video calls on websites means elevating customer interactions from impersonal exchanges to engaging, face-to-face dialogues. This human connection enhances customer satisfaction and drives conversion and retention rates, as it allows a deeper understanding of customer needs and facilitates more effective sales strategies.

In the educational sector, video conferencing enriches learning experiences, offering an interactive platform that closely mirrors traditional classroom settings.

Similarly, it enables telemedicine in healthcare, providing patients with easy access to medical consultations. By leveraging video conferencing, you can successfully add real-time video conferencing capabilities to your website, enhancing your students' or patients' engagement and interaction during online events.

Moreover, internally, video conferencing strengthens team communication, especially in remote setups, ensuring clearer and more empathetic exchanges than text-based communications.

Therefore, embedded video conferencing functionality on your website is not just about keeping up with technological trends but embracing a more connected, efficient and human-centric approach to communication across various sectors.

Understanding video conferencing SDK and APIs for website integration

At the core of embedding video conferencing into a website are two crucial components: Software Development Kits (SDKs) and Application Programming Interfaces (APIs).

SDKs provide a set of tools, libraries, relevant documentation, code samples and guides, enabling developers to create software applications on a specific platform. In video conferencing, SDKs are used to build custom video call functionalities tailored to a website's particular needs and embed video calling on websites.

On the other hand, Application Programming Interfaces (APIs) are sets of libraries and methods for building software and applications. They allow different software programs to communicate with each other. In the context of video conferencing, APIs add video chat to a website or application, allowing for seamless interaction between the website's infrastructure and the video conferencing service.

Step-by-step guide: Embed video call on your website with Digital Samba API

Integrating (embedding) Digital Samba's video conference API into your website can be achieved through various methods, each offering different levels of customisation and control. However, you'll first need to create a Digital Samba account.

Set up a Digital Samba account

Create a Digital Samba account to access the platform and obtain your API Key, Team ID, and Developer key. These credentials authenticate your requests to the API.

You can get the API keys by logging into your account and navigating to the Team tab, as shown below.

get the API keys by logging into your account and navigating to the Team tab-1

Let's look at how you can embed Digital Samba video conferencing on your website.

Understanding Digital Samba integration options

1. Using the Digital Samba API

The API is a versatile tool for developers, providing a programmatic interface to access and manage features like room creation, role assignment and statistics overview. This is suitable for those who require a high level of customisation and integration with other systems or third-party tools.

2. The HTML iframe embed

The simplest way to add a video conferencing room to your website is by embedding an HTML iframe snippet. This method requires minimal coding and is ideal for quick integrations. Here is an example of an iframe code snippet you can use:

This iframe embeds the video conferencing room into your website, enabling live video conferencing capabilities.

3. Digital Samba SDK

The SDK offers additional capabilities for more sophisticated integration. It allows developers to access in-room events and methods from frontend code, enabling deeper integration and customisation.

Creating a video conferencing room

You can create a room using the REST API or directly through the dashboard. The Digital Samba REST API involves executing a POST request to the /room endpoint with your Team ID and Developer Key. Here's an example of a POST request:

curl --request POST \

--header "Content-Type: application/json" \

--url https://digitalsamba.com/api/v1/rooms \

--user YOUR_TEAM_ID:YOUR_DEVELOPER_KEY \

--data '{

"privacy": "public",

"roles": ["moderator", "speaker", "attendee"],

"default_role": "attendee"

This request creates a room and sets its privacy state and available roles.

The privacy settings determine who can access the video conferencing room.

Public: A public room is accessible to anyone with the link, allowing for broader participation without specific invitations.
Private: A private room restricts access to only those explicitly invited or with the necessary credentials, ensuring a more controlled and secure environment.

Conversely, Roles define the level of access and control participants have in the room. Remember that a single moderator role is the simplest way to create a room.

Moderator: Has the highest level of control, including managing participants and room settings.
Speaker: Can actively participate and present in the room, with some controls over their segment of the session.
Attendee: Generally has view-only access, with limited interaction capabilities, ideal for general participants in a larger audience.

The dashboard, on the other hand, provides a more visual and less technical method to accomplish the same task as illustrated below.

Create image with dashboard

You will then be presented with the Create a new room window, where you can customise your room according to your preference.

Create room settings dashboard-1

Customising and controlling with the SDK

The Digital Samba SDK offers a more sophisticated and flexible approach to embedding video conferencing than the basic HTML iframe embed. While the simple HTML embed is excellent for quick integrations, the SDK provides enhanced control and customisation options, allowing for a deeper integration into your website or application.

What are some of the advantages of using the Digital Samba SDK?

Extended customisation: the SDK allows for more detailed customisation of the video conferencing experience. You can tailor the look and feel of the video conferencing frame to match your website's design and user interface.
Advanced control: with the SDK, you can access additional controls and features that are unavailable through the basic HTML embed. This includes manipulating room settings programmatically and responding to in-room events in real-time.
Integration flexibility: the SDK is designed for seamless integration with your existing frontend code, offering a more integrated experience for users and smoother interactions within your application.

For more detailed information and comprehensive documentation on using the Digital Samba SDK, please refer to our SDK Documentation.

Customising the embedded video conferencing experience using Digital Samba SDK

Customising the video call experience using the Digital Samba SDK involves a series of steps that allow you to tailor video conferencing to your specific needs. Let's have a look at them.

Initialisation of the DigitalSambaEmbedded class

The customisation process begins with initialising the DigitalSambaEmbedded class, which is the main component of the SDK. This class can be initialised using either a constructor for immediate room loading or the createControl factory method for more controlled loading.

Setting initialisation options (InitOptions)

InitOptions determines how the video conference room is set up and displayed. Some of the options include:

root: Specifies the HTML element where the video frame will be created.
frame: Allows loading the room in your website's existing iframe element. If not specified, an iframe is automatically created.
url: The full room URL for the iframe src attribute.
team and room: Used for specifying the team and room names instead of the URL.
token: An optional JWT string for authentication, commonly used for private rooms that make use roles.

Configuring room settings

roomSettings is a JSON object configuring the room's initial settings. These settings include:

Enabling or disabling video and audio devices upon entering the room.

disabled camera and audio on join

Configuring initial media devices (video input, audio input, audio output).

Setting the app language, user name and custom initials for user tiles and choosing the layout mode (e.g., auto or tiled).

Setting the visibility of the toolbar and captions panel.

Toolbar panel

Setting up virtual backgrounds.
Muting the frame on join for the local user.

Here is a JSON code example of how to achieve this:

{

//Configures if user's video device will be enabled on entering the room

videoEnabled: boolean,

//Configures if user's audio device will be enabled on entering the room

audioEnabled: boolean,

//Configures initial video and audio devices to use on entering the room

mediaDevices: {

videoinput: 'id of camera',

audioinput: 'id of microphone',

audiooutput: 'id of speaker device'

//Language for the user. Use language code - e.g. en, de, es

appLanguage: string,

//Configures name of the user on entering the room

username: string,

//Configures custom initials (max 2 letters) for the user tile

initials: string,

//Configures if 'auto' or 'tiled' layout mode will be used

layoutMode: string,

//Configures if the toolbar will be visible or not

showToolbar: boolean,

//Configures if the captions panel will be visible or not

showCaptions: boolean,

//Configures the virtual background

virtualBackground: VirtualBackgroundOptions,

//Configures if the frame will be muted on join for the local user

muteFrame: boolean

}

These settings allow for a highly customised and user-friendly video conferencing experience.

Loading the room

After setting the InitOptions and roomSettings, the room is loaded using the load method. This final step embeds the custom video conference room into your website, providing a tailored user experience.

Here's a basic example to illustrate the customisation process:

import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';

// Initialize with InitOptions specifying the target element for embedding

const sambaFrame = DigitalSambaEmbedded.createControl({

url: 'https://[TEAM_NAME_HERE].digitalsamba.com/[ROOM_NAME_HERE]',

initOptions: {

targetElement: 'YOUR_TARGET_ELEMENT_ID' // Specify the ID of the HTML element or iframe where the room will be embedded

}

});

// Optional: Configure room settings

const roomSettings = {

videoEnabled: true,

audioEnabled: true,

layoutMode: 'auto',

// other settings...

};

// Load the room with settings

sambaFrame.load(roomSettings);

This example demonstrates how to use the Digital Samba SDK to embed a video conferencing room into a specific element on your website, enhancing customisation and user experience. The initOptions are crucial for defining the exact location on the webpage where the video conference will appear.

For more detailed examples and information on the possible initOptions combinations, please refer to the Digital Samba SDK Documentation.

Using SDK events and methods to manage events in real-time

The Digital Samba SDK provides a robust set of events and methods, enabling real-time management and interaction during video conferences. Let's explore some examples:

Subscribing to events

You can subscribe to various events to monitor different activities within a video conferencing room. The SDK offers a range of events such as userJoined, userLeft, handRaised, handLowered, audioEnabled, audioDisabled and many others.

You can use the on() method to subscribe to an event and off() to unsubscribe. The once() method is also available for one-time subscriptions. Here's a template for subscribing and unsubscribing to an event:

const myCallback = (event) => {

// Custom logic here

}

// Subscribe to an event

sambaFrame.on('eventNameHere', myCallback);

// Unsubscribe from an event

sambaFrame.off('eventNameHere', myCallback);

Handling specific events

For instance, to handle a user leaving the meeting, you could subscribe to the userLeft event:

sambaFrame.on('userLeft', (event) => {

// Logic to handle user leaving

});

To manage audio controls, you can use audioEnabled and audioDisabled events:

sambaFrame.

on('audioEnabled', (event) => {

// Logic when audio is enabled

});

sambaFrame.on('audioDisabled', (event) => {

Debugging with events

A special event named '*' can be used for debugging purposes to log all incoming events and their data:

sambaFrame.on('*', (event) => {

console.log(event);

});

By utilising these events and methods, you can create a dynamic and responsive video conferencing environment, adapting in real-time to the actions and needs of the participants. This allows for a more controlled and interactive experience during your Digital Samba video conferences.

Using SDK methods to control the Call

The Digital Samba SDK also offers a variety of methods that allow you to control different aspects of a video call, enhancing the user experience and providing greater functionality.

However, before using any methods, you must initialise the SDK and load the room. It is important to subscribe to the userJoined event to ensure the user is present in the room before calling other methods.

Once the room is initialised and the SDK is loaded, you can utilise various SDK methods to manage the video call. Here's a look at some key methods:

The enableVideo() method turns on the user's camera.
The endSession() ends the session for everyone, removing all users from the room.
The requestUnmute() method requests a remote user to unmute their microphone. The user ID is passed as a parameter, and the remote user will receive a popup to accept or deny the request.

Let's look at a code example of the above SDK methods.

// Initialize the Digital Samba SDK

const initOptions = { team: 'myTeamNameHere', room: 'myRoomNameHere' };

const sambaFrame = DigitalSambaEmbedded.createControl(initOptions);

// When the user joins the room

sambaFrame.on('userJoined', (event) => {

if (event.data.type === 'local') {

console.log('You have joined the room');

// Enable the user's camera

sambaFrame.enable video();

} else {

console.log(event.data.user.name, 'has joined the room');

}

});

// Function to request a remote user to unmute their microphone

function requestUserToUnmute(userId) {

sambaFrame.requestUnmute(userId);

}

// Function to end the session for all users

function endTheSession() {

sambaFrame.endSession();

}

// Load the room when needed according to your application logic

sambaFrame.load();

// Example usage - call the method at some point later during the call

const remoteUserId = 'user_id_here'; // Replace with the actual user ID

requestUserToUnmute(remoteUserId);

// To end the session (e.g., after a specific event or condition)

// endTheSession(); // Uncomment to use

These methods provide significant control over the video conferencing experience, allowing for dynamic interaction and management of the call. They are essential for creating a custom and responsive video conferencing environment using Digital Samba's SDK.

Digital Samba Embedded WordPress plugin: Effortless WebRTC integration

The Digital Samba embedded WordPress plugin offers a seamless, no-code solution for integrating GDPR-compliant video conferencing and webinars into your website. With features like screen sharing, text chat, closed captioning and virtual backgrounds, this plugin empowers you to enhance your online presence effortlessly.

How to use the plugin

Installation and setup:

Install and activate the Digital Samba Embedded WordPress plugin on your WordPress website.

acquire your Developer Key and Team ID from Team tab - Digital Samba-1

Populate the plugin settings in WordPress with your Team ID, Domain & Developer Key.

Plugin Credentials - Digital Samba

Save your settings and confirm the connection to your Digital Samba Embedded account.

Creating a room:

Access the Digital Samba Embedded WordPress plugin submenu and click Add New Room.
Provide a title for the WordPress post for easy reference.
Name your room within the plugin interface.
Customise room colours and other parameters according to your design preference (helpful descriptions are available for each option).

Digital Samba Embedded WordPress plugin - Add New Room

Click Publish to create your room.

Embedding the room

Upon creation, each room is equipped with a shortcode. Here is an example of what a room shortcode should look like:

[digitalSamba_room id="add_your_Id_here" width="100%" height="100%" withtoken="false"]

You can either use the room immediately via its permalink or embed it into other WordPress pages using the generated shortcode. Here is an example of a published room on the WordPress website.

This flexibility allows you to control room visibility, whether for logged-in users or based on specific content restrictions. You can explore more on how to use shortcodes on the WordPress documentation.

Maximise your website's potential by integrating Digital Samba video conferencing

In this article, we have explored how to unlock the seamless integration of Digital Samba Video Conferencing into your website with this comprehensive guide. We have looked at two versatile approaches: using the Digital Samba API and SDK and using the WordPress Plugin for effortless embedding.

We have also explored a step-by-step process for leveraging the powerful features, from screen sharing to closed captioning, ensuring GDPR compliance every step of the way. Using this, you can elevate your users' experience and engagement with expert tips on harnessing the API for developers and the intuitive WordPress Plugin for amateurs.

Whether you are a tech enthusiast or a seasoned developer, this guide empowers you to transform your website into a dynamic hub of interactive communication. Get started today.

FAQs: Everything you need to know on how to embed video chat to your website

Yes. It's possible to set default permissions for your audience in Digital Samba, including broadcast permissions, depending on your specific requirements.

Yes. Digital Samba provides comprehensive API documentation, an invaluable resource for developers looking to integrate video conferencing into their applications or websites.

To access the Digital Samba API endpoint, you will need credentials, which you can obtain by signing up for a Digital Samba account.

Yes. Digital Samba offers the option to preview our API before committing to a paid plan, providing a risk-free way to evaluate our services.

Digital Samba is compatible with HTML5-based hybrid applications, ensuring seamless integration with modern web technologies.

Embedding options with Digital Samba include the ability to pre-populate specific fields or bypass standard login procedures for a smoother user experience.

Request a free consultation with our dev team

Embed video call on your website with Digital Samba

Get a consultation

← Video Bitrate: How to Boost Video Quality and Streaming Performance

Enhancing Your Video Conferencing Experience with Digital Samba's Reliable Support →