Looking to integrate video conferencing seamlessly into your website or app? Say goodbye to clunky plugins and disorganised workflows! With Digital Samba's video conference widget, you can effortlessly incorporate face-to-face meetings using our user-friendly SDK.
Take charge of the appearance, functionality, and features to customise video calls according to your exact requirements. Whether it's enhancing team collaboration, hosting captivating webinars, or providing smooth customer support, this guide will walk you through transforming your website into a dynamic connectivity hub. Get ready to elevate your online interactions—it's time to embrace video conferencing like never before!
Table of Contents
Adding a video conference widget to your website or app brings multiple benefits, enriching user experience and functionality. Key advantages include:
Incorporating a video conference widget isn't merely about adding a feature; it's a pivotal step towards revolutionising how you connect, collaborate, and captivate your audience. Embrace the transformative potential of seamless video meetings and witness your website or app flourish into a dynamic hub of interaction and triumph.
Now that we understand the benefits of embedding video conferencing widgets into our apps and websites, how can we actually implement this? This section will teach us how to quickly & efficiently build, control, and customise a video conference widget.
Before embedding a video conferencing widget into your app or website, ensure you have the following:
If you meet these requirements, you can follow the steps below to integrate a video conference widget into your apps and websites. The process is straightforward, with the proper prerequisites in place.
In the next section, we will cover how to integrate video conference SDK, change branding options, add video call controls, configure participant settings, and seamlessly embed everything you build into your existing platforms. To get started, please follow the steps below:
Digital Samba enables users to create customisable video conference rooms for meetings, events, webinars, and more.
To initialise the Digital Samba SDK and join video calls, you must first generate a unique room URL. This room URL acts as a key identifier of the call when setting up the SDK and launching video sessions through Digital Samba's flexible virtual spaces.
There are two ways to create a Digital Samba room: either via the API (which we’ll use here) or through the dashboard.
a. Make a POST request to https://api.digitalsamba.com/api/v1/rooms
You can get your TEAM_ID and DEVELOPER_KEY from the Team section in the Digital Samba dashboard.
b. Access the room ID from the API response
The response will contain a randomly generated ‘friendly_url’ like:
This is the unique room ID used to construct the full meeting URL. The full URL will look like this:
c. Customising the room URL
By default, the friendly_url is a random string. But you can also specify a custom, easy-to-remember name when creating a room:
Now, the meeting URL will be:
The customised name can contain letters, numbers, hyphens, and underscores. This makes your room URLs much simpler to share and remember.
Integrating the Digital Samba SDK into your application is straightforward and can be done via NPM or CDN. Here's a step-by-step guide on how to embed video conferencing SDK:
Via NPM:
Via CDN:
To initialise the SDK, import the package and create a DigitalSambaEmbedded control by passing configuration options:
This creates a sambaFrame instance, which renders the call interface.
To join the call, simply call the load() method on the instance:
This will initialise the SDK, open the call interface and connect you to the provided ‘roomURL’.
To enhance the personalisation of your video conferencing widget, the changeBrandingOptions() method provides an intuitive way to align its design with your brand identity. This method enables you to modify various aesthetic aspects of the widget, ensuring a cohesive visual experience that resonates with your brand's style.
The changeBrandingOptions() method accepts an object containing these customisable properties:
Here are some examples of usage:
By utilising the changeBrandingOptions() method, you can effortlessly synchronise the look and feel of your video conferencing widget with your brand's visual identity. This customisation fosters a more integrated and branded user experience within your video conferencing environments.
Like the changeBrandingOptions() method, the Digital Samba SDK offers a plethora of other methods for enhancing your video call experience. The following are some controls you have at your disposal, along with their corresponding methods:
Managing microphone audio is paramount for maintaining call quality. Muting your microphone prevents background noise from disrupting the call, and you can unmute it when you wish to contribute. This functionality is pretty handy for minimising distractions during a meeting.
To mute the microphone, use the disableAudio() method:
To unmute the microphone, use the enableAudio() method:
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:
To disable video feed, use the disableVideo() method:
Screen sharing is indispensable for presentations, tutorials, and collaborative work, allowing you to display your screen to other participants.
To authorise screen sharing, use the allowScreenshare() method:
To revoke screen sharing permission, use the disallowScreenshare() method:
To initiate screen sharing, use the startScreenshare() method:
To cease screen sharing, use the stopScreenshare() method:
Recording meetings is beneficial for archiving and future reference. Recordings are stored in Digital Samba's cloud and can be accessed through the Digital Samba Dashboard or API.
To start recording a session, use the startRecording() method:
To stop recording, use the stopRecording() method:
The virtual background feature allows you to substitute your natural background with a digital image, enhancing visual appeal or ensuring privacy.
To enable a virtual background, use the enableVirtualBackground() method:
To disable the virtual background, use the disableVirtualBackground() method:
To configure the virtual background, use the configureVirtualBackground() method:
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.
Viewing participants is essential for monitoring who is present in the meeting. To obtain a list of current participants, invoke the listUsers() method:
Leaving a call is practical when you need to exit the meeting temporarily or wish to depart before it concludes. To leave the meeting, use the leaveSession() method:
Concluding a call is crucial when the meeting ends, terminating the session for every participant.
To end the call for everyone, employ the endSession() method:
For a more comprehensive and detailed explanation of joining, managing, and customising your video conferencing widget on Digital Samba SDK, please refer to our SDK documentation and how-to guides.
The Digital Samba SDK simplifies the process of integrating video chat into your website or app. Its user-friendly interface enhances digital communication and teamwork effortlessly. With this comprehensive guide, even novices can swiftly incorporate video conferencing into their applications and websites, enhancing user connectivity and interaction online. Ideal for optimising team meetings, customer support experiences, or hosting engaging webinars.
Begin leveraging the power of the embedded video room SDK today and witness your digital platforms become more immersive and impactful. Don't miss out on Digital Samba's offer of 10,000 free credits, enabling you to seamlessly integrate full-fledged video conferencing into your platform. Sign up now to get started!