Call Widgets
Simple WebRTC calling integrationSep 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:
Backend serviceI 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.
DatabaseFor 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 portalTo 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 widgetThe 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.
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.