Call Widgets

Simple WebRTC calling integration
Sep 9, 2023

Lately, I’ve been diving into WebRTC, with the goal of creating an easy click-to-call solution that other sites can seamlessly integrate. During my research, I discovered PeerJS—a neat JavaScript library that wraps the native WebRTC browser implementation.

Rather than just build a demo application to test the calling, I wanted to build a complete system where audio and video call widgets could be configured and customised and then finally injected into any website source code for easy click-to-call integration. This required a few components:

Call widgets architectural diagram Backend service

I created a Node backend service that would serve a few APIs used to configure and serve the files and widget configurations used throughout this project. As well as providing a WebRTC signalling service to initiate the call between the callee and the caller.

Database

For storing the widget configurations, I chose MongoDB. Using Mongoose, a schema-based modeling library for MongoDB, I was able to access the configurations from the Node backend and serve them to clients through the exposed APIs.

Configuration portal

To manage the widget configurations, I built a React application. This portal allows users to customise various aspects of the widgets, such as the call button text, branding, widget visibility, and even time and location-based routing. However, the latter features were beyond the scope of this initial iteration.

Call widgets configuration page in the configuration portal Call widget

The star of the show... the call widget itself. I created this as a smaller React application, focused on fetching the configuration, displaying the widget, and handling the call interaction through a custom React hook. But here’s the kicker: instead of expecting users to manually load the compiled React app into their websites, the backend service exposes a small JavaScript file. This file creates an iFrame that automatically loads the latest version of the widget—making integration as simple as adding one line of code.

Video call using the call widget

The result? A complete, easy-to-use configuration system that allows for simple click-to-call functionality to be added to any website with minimal effort. While this project is currently just a demo, the concept has the potential to be scaled up, enabling native WebRTC calling across client websites.