Integrating a Video Conference Widget Using Digital Samba SDK
Tags: sdk, tutorial, programming, css
Published: 2024-03-26 12:07:46


Are you aiming to weave video conferencing directly into your website or application? Move beyond the limitations of traditional plugins and scattered workflows. The Digital Samba video conference widget enables you to embed real-time, face-to-face interactions with our intuitive SDK effortlessly. This tool empowers you to tailor your video calls' look, functionality, and capabilities to meet your specific needs perfectly. From boosting team collaboration and engaging audiences in interactive webinars to streamlining customer support, this tutorial will guide you on converting your site into a vibrant communication centre. Prepare to upgrade your digital engagement — video conferencing will become an integral part of your online presence!

## Advantages of adding a video conference widget

[Embedding a video conference widget into your website or app](https://www.digitalsamba.com/blog/how-to-embed-a-video-conference-widget-with-the-digital-samba-sdk) offers a plethora of benefits, significantly enhancing both user experience and functionality. Here are the key benefits:

- Instantaneous connectivity: Eliminate the need for app downloads or tab switching. With an embedded widget, initiating video calls is as effortless as navigating your website. Envision a scenario where potential clients click a "Connect Now" button to engage with consultants, or team members immediately enter spontaneous brainstorming sessions directly from their workspace.
- Customised branding: The Digital Samba SDK empowers you to tailor the widget's appearance to align with your brand's aesthetic. Personalise with your logo, brand colours, and unique buttons to create an integrated video meeting environment that feels intrinsically part of your digital platform.
- Elevated collaboration: Face-to-face interaction has unmatched power. Embedding video meetings directly into your platform enables live collaboration, encouraging teams to exchange ideas, solve problems, and make decisions with enhanced efficiency. This real-time communication leads to deeper comprehension, streamlined problem-solving, and boosted productivity.
- Revolutionised customer support: Elevate your customer service from standard to stellar. Offer on-the-spot video consultations or tailored product demonstrations within the comfort and familiarity of your platform. This direct, personalised engagement fosters trust and solidifies relationships and significantly improves customer satisfaction.
- Scalability and security: The Digital Samba widget is designed to grow with your business, effortlessly supporting an expanding volume of meetings without sacrificing performance or security. Backed by top-tier encryption standards, your communications remain secure, ensuring privacy and protection for all parties involved.

Implementing a video conference widget transcends simply adding a new feature—it represents a strategic enhancement in how you engage, collaborate, and connect with your audience. By integrating seamless video conferencing capabilities, watch as your website or application transforms into a vibrant centre of communication and achievement.

## Initiating your journey with Digital Samba SDK

Grasping the utility of integrating video conferencing widgets into our digital platforms, the question arises: how do we actualise this integration? This guide will navigate through the process of swiftly and effectively embedding, managing, and tailoring a video conference widget.

### Initial setup
To prepare for embedding a video conferencing widget into your digital environment, you'll need to ensure a few essentials are in order:

- Create a Digital Samba account: Start by [signing up here](https://dashboard.digitalsamba.com/signup) if you haven't already.
- Internet-enabled computer: Ensure your workstation is connected to the internet.
- WebRTC-compatible browser: A browser that supports WebRTC is crucial for seamless video conferencing.
- Familiarity with JavaScript/TypeScript: A basic understanding of JavaScript or TypeScript will be beneficial.
With these prerequisites checked off, you're ready to embed a video conferencing widget into your applications and websites. The integration process is designed to be uncomplicated, provided you have the necessary groundwork.

## Step-by-step integration
In the forthcoming section, we will delve into how to seamlessly integrate the SDK, tailor branding to your specifications, implement video call functionalities, adjust participant settings, and embed the entire setup into your existing digital platforms. To commence, kindly follow the detailed steps provided:

Stay tuned as we guide you through each phase, ensuring you're well-equipped to harness the power of Digital Samba's video conferencing capabilities in your digital domain.

### 1. Setting up a video conference room with Digital Samba

Digital Samba provides the flexibility to create custom video conference rooms tailored to your specific needs for meetings, webinars, and other events.

Before you can dive into video calls using the Digital Samba SDK, it's essential to generate a dedicated room URL. This URL serves as the unique identifier for your call, facilitating the setup of the SDK and the initiation of video sessions within Digital Samba's versatile virtual environments.

Creating a Digital Samba room can be accomplished in two primary ways: through the API (which we'll focus on here) or directly via the user dashboard.

#### a. Initiate a room via API
 Make a POST request to https://api.digitalsamba.com/api/v1/rooms

```
curl --request POST \

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

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

--user YOUR_TEAM_ID:YOUR_DEVELOPER_KEY \

--data '{"privacy": "public"}'


```
Obtain your **TEAM_ID** and **DEVELOPER_KEY** from the Team section within your Digital Samba dashboard.

b. Access the room ID from the API response

The response will contain a randomly generated ‘friendly_url’ like:

```
"friendly_url": "l5zIyafmlEFMPKA"
```
Utilise this identifier to assemble the complete meeting URL:

```
https://teamName.digitalsamba.com/l5zIyafmlEFMPKA
```
c. Room URL customisation
While the 'friendly_url' defaults to a randomly assigned string, there's the option to designate a more memorable custom name during room creation:

```
curl --request POST \

--data '{"privacy": "public", "friendly_url": "my-test-meeting"}'
```
This adjustment produces a user-friendly meeting URL:

```
https://teamName.digitalsamba.com/my-test-meeting
```
Custom names can include letters, numbers, hyphens, and underscores, simplifying the process of sharing and recalling your room URLs.

### 2. Embedding the Digital Samba SDK in your platform

Embedding the Digital Samba SDK into your digital platform is a seamless process, achievable through either NPM or CDN. Follow this guide for easy integration:

**Through NPM:**

Execute the following command to install the SDK:

```
npm install @digitalsamba/embedded-sdk
```
**Through CDN:**

Incorporate the SDK directly into your HTML:

```
<script src="https://unpkg.com/@digitalsamba/embedded-sdk"></script>
```
Initialising the SDK involves importing the package and establishing a DigitalSambaEmbedded control with your specific configuration parameters:

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

const roomURL = "https://demo.digitalsamba.com/myroom";

const sambaFrame = DigitalSambaEmbedded.createControl({ 
  url: roomURL
});
```
This command generates a sambaFrame instance that is responsible for displaying the video call interface within your application.

To participate in a call, activate the load() function on your sambaFrame instance:

```
sambaFrame.load();
```
Executing this function activates the SDK, unveils the call interface, and seamlessly connects you to the designated ‘roomURL’. This streamlined approach ensures swift integration and enables immediate access to high-quality video conferencing capabilities within your application.

### 3. Tailoring branding elements

Elevate your video conferencing widget's appeal by personalising it with the **changeBrandingOptions()** method, designed to mirror your brand's aesthetic seamlessly. This feature allows you to alter various visual components of the widget, crafting a unified visual narrative that echoes your brand's ethos.

Accessible via the **changeBrandingOptions()** method, here are the customisable aspects you can modify:

- paletteMode: Opt between 'light' and 'dark' themes to influence the widget's background colours and ambience.
- primaryColor: Determine the widget's primary colour for highlights and interactive buttons. Use a hex code to ensure it matches your brand's palette.
- toolbarColor: Adjust the toolbar's background colour, using a hex code, to either complement or offset the main theme.
- roomBackgroundColor: Choose a specific background colour for the conferencing space, also via hex code, for precise brand alignment.
Example usages include:

```
// Implementing a dark theme
sambaFrame.changeBrandingOptions({'paletteMode': 'dark'}); 

// Setting the primary colour to blue
sambaFrame.changeBrandingOptions({'primaryColor': '#0000ff'});

// Customising the toolbar background to green
sambaFrame.changeBrandingOptions({'toolbarColor': '#00ff00'});

// Applying a red background colour to rooms
sambaFrame.changeBrandingOptions({'roomBackgroundColor': '#ff0000'});
```
The **changeBrandingOptions()** method simplifies aligning your video conferencing widget's design with your corporate identity, enhancing the user experience through cohesive, brand-centric visuals. Customising your widget not only strengthens your brand presence but also enriches the user interface within your video conferencing platform.

### 4. SDK methods for enhanced video conference management

Digital Samba's SDK enriches your video conferencing experience with a variety of methods, offering extensive control over your virtual meetings. Below, we outline essential functionalities and their respective SDK commands:

#### 4.1 Microphone management
Ensuring optimal audio quality is key. The SDK allows you to mute to avoid background disturbances and unmute when participating.

To mute the microphone, use the disableAudio() method:

```
sambaFrame.disableAudio();
```

To unmute the microphone, use the nableAudio() method:

```
sambaFrame.enableAudio();
```

#### 4.2 Video feed control
Manage your video presence for privacy or to save bandwidth.

Managing your video feed is essential for privacy and bandwidth considerations. You can either activate your camera to share your video or deactivate it to maintain privacy or conserve network resources.

To enable video feed, use the enableVideo() method:

```
sambaFrame.enableVideo();
```

To disable video feed, use the disableVideo() method:

```
sambaFrame.disableVideo();
```

#### 4.3 Share your screen
Screen sharing enhances presentations and teamwork by showing your screen to others.

To authorise screen sharing, use the allowScreenshare() method:

```
sambaFrame.allowScreenshare('user_id');
```

To revoke screen sharing permission, use the disallowScreenshare() method:

```
sambaFrame.disallowScreenshare('user_id');
```

To initiate screen sharing, use the startScreenshare() method:

```
sambaFrame.startScreenshare();
```

To cease screen sharing, use the stopScreenshare() method:

```
sambaFrame.stopScreenshare();
```

#### 4.4 Recording sessions
Capture meetings for review or records, storing them securely in Digital Samba's cloud.

To start recording a session, use the startRecording() method:

```
sambaFrame.startRecording();
```

To stop recording, use the stopRecording() method:

```
sambaFrame.stopRecording();
```

#### 4.5 Virtual backgrounds
Enhance or privatize your backdrop digitally for a more engaging or confidential setting.

To enable a virtual background, use the enableVirtualBackground() method:

```
sambaFrame.enableVirtualBackground({blur: 'balanced'});
```

To disable the virtual background, use the disableVirtualBackground() method:

```
sambaFrame.disableVirtualBackground();
```

To configure the virtual background, use the configureVirtualBackground() method:

```
sambaFrame.configureVirtualBackground();
```

You must specify the blur, image, or imageUrl fields. If set to true, the optional enforce parameter prevents the user from altering the background manually.

```
VirtualBackgroundOptions {
enforce?: boolean;
blur?: 'balanced' | 'strong';
image?: string;
imageUrl?: string;
}
```

#### 4.6 Participant overview
Stay informed on meeting attendance with an easy method to view all participants.

```
sambaFrame.listUsers();
```

#### 4.7 Exiting calls
Leave meetings as needed, either temporarily or at their conclusion.

```
sambaFrame.leaveSession();
```

#### 4.8 Ending calls
Close the session entirely, concluding the meeting for all participants.

```
sambaFrame.endSession();
```
For detailed guidance on utilising these features within the Digital Samba SDK, including joining, customising, and managing your video conferencing widget, consult our [comprehensive SDK documentation](https://docs.digitalsamba.com/reference/sdk) and [tutorials](https://www.digitalsamba.com/digital-samba-test-drive-start).

## Conclusion

The Digital Samba SDK streamlines the incorporation of video conferencing capabilities into your digital platforms, making it an invaluable tool for enhancing communication and collaboration online. Through the straightforward guidance provided, individuals with varying levels of technical expertise can effectively implement video conferencing features, fostering greater connection and engagement within their digital spaces. This toolkit is especially beneficial for boosting the efficiency of team collaborations, elevating customer service interactions, or delivering compelling webinar content.

Embrace the capabilities of the Digital Samba SDK and transform your websites or applications into dynamic, interactive environments. Take advantage of Digital Samba's generous offer of 10,000 free credits to integrate advanced video conferencing functionality without delay. [Register today](https://dashboard.digitalsamba.com/signup) and elevate your digital presence with seamless, high-quality video communication.