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 hub of connectivity. Get ready to elevate your online interactions—it's time to embrace video conferencing like never before!
Table of Contents
- Benefits of embedding a video conference widget
- Getting started with Digital Samba SDK
- Create a room
- Integrate the Digital Samba SDK into your application
- Changing branding options
- Controlling meetings with SDK methods
- Conclusion
Benefits of embedding a video conference widget
Adding a video conference widget to your website or app brings multiple benefits, enriching user experience and functionality. Key advantages include:
- Effortless connection: No more switching tabs or downloading apps. With an embedded widget, video calls become as natural as browsing your own site. Think potential leads clicking on the "Start Consultation" button and instantly connecting with an expert or team members hopping into impromptu brainstorms right from their dashboards.
- Tailored customisation: Digital Samba's SDK grants you the power to customise the widget to perfectly reflect your brand identity. Think company logos, colour palettes, and even custom buttons—it's your canvas to craft a seamless meeting experience that feels like an extension of your own website.
- Boost collaboration: Face-to-face communication has undeniable power. Integrating video meetings facilitates real-time collaboration, allowing teams to brainstorm, share ideas, and make decisions faster. Whether it's a quick huddle or a detailed project review, the immediacy of video fosters more profound understanding, improves problem-solving, and ultimately drives productivity.
- Enhanced customer support: Transform your customer support from reactive to proactive. Imagine offering instant video consultations to website visitors or providing personalised product demos—all within the familiar comfort of your own platform. This personalised approach builds trust, strengthens relationships, and leads to happier, more satisfied customers.
- Scalable and secure: Digital Samba's widget scales seamlessly to accommodate your growth. Whether you're a small startup or a bustling enterprise, the infrastructure can handle an influx of meetings without compromising performance or security. Plus, industry-leading encryption protocols ensure all communications remain confidential and protected.
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.
Getting started with Digital Samba SDK
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.
Prerequisites
Before embedding a video conferencing widget into your app or website, ensure you have the following:
- A Digital Samba account (sign up here)
- A computer with internet connectivity
- Browser with WebRTC support
- Basic knowledge of JavaScript/TypeScript
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 the 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:
1. Create a room
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.
2. Integrate the Digital Samba SDK into your application
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 do this:
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’.
3. Changing branding options
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:
- paletteMode: This option lets you choose between 'light' or 'dark' themes, impacting the overall background colours and setting the mood of the interface.
- primaryColor: Define the primary theme colour, which is utilised for highlights and interactive elements. This should be a hex colour code, allowing precise matching with your brand colours.
- toolbarColor: Customise the toolbar's background colour to complement or contrast with the overall theme. This, too, requires a hex colour code.
- roomBackgroundColor: Set the backdrop colour for the conferencing rooms using a hex colour code for exact colour matching.
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.
4. Controlling meetings with SDK methods
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:
- Mute/Unmute microphone
- Start/Stop video
- Screen share
- Record
- Virtual background
- View participants
- Leave call
- End call
4.1 Mute and unmute microphones
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:
4.2 Start and stop video
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:
4.3 Screen sharing
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:
4.4 Record
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:
4.5 Virtual background
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.
4.6 View participants
Viewing participants is essential for monitoring who is present in the meeting. To obtain a list of current participants, invoke the listUsers() method:
4.7 Leave call
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:
4.8 End call
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.
Conclusion
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 Digital Samba 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!
