Build Voice and Messaging Apps Quickly with the RingCentral Web Widget

Published in

RingCentral Developers

4 min readDec 19, 2017

Building RingCentral voice and text communications directly into apps is one of the most popular use cases for RingCentral Platform developers and for our users. This is popular because of the productivity benefits when integrated with CRM, help desk and other software.

While popular, traditionally building such a communications integration was a time consuming task requiring months of development, UI/UX expertise and ongoing maintenance with testing against multiple browsers. By introducing our new embeddable Web Widget and React Component Library, our goal is to help minimize this effort by reducing or even eliminating the development needed to integrate RingCentral!

Web Widget Embeddable App — An “all-in-one” embeddable widget that can be installed into your web app by just including an external JavaScript file. This can be used in any web app, a Java app using jxBrowser, or even Salesforce. You should consider this if you want to use a ready-made RingCentral softphone in your app with a bit of customization.
JS Widgets React Component Library — A full React component library of the UI components used in the RingCentral Web Widget. Documentation of each component allows you to do two things: (a) easily modify any component of the all-in-one Web Widget you wish to update and (b) build your own UI using RingCentral React Components.

The Web Widget and React Component Library are used in our own next generation communications integrations. These can help you connect to RingCentral with less effort and time by using our professionally designed, developed and tested capabilities in your own apps.

These are currently in beta and we are actively seeking users and feedback. So far we have had some customers implement this with their custom web and Java desktop apps as well as CMS solutions like Joomla, but are looking for more feedback as we finalize these products.

Key Benefits

The primary benefit of using the Web Widget is to reduce development time. You can add the widget to any web app with a simple JavaScript include such as the following:

https://ringcentral.github.io/ringcentral-web-widget/adapter.js

More specific benefits include:

Fast time to market: Traditional integration of this type could take months to build. The basic RingCentral Web Widget can be implemented in a few hours for many developers. Adding functionality like Click-to-Dial, Inbound Screen-Pop are easy to add if the app has those hooks already.
RingCentral UI/UX expertise and QA: With the RingCentral Web Widget, we are providing the same UI/UX that we have started to use for our own integrations. The same code is run through our own QA process for our production ready integrations.
Easy Customizability: In addition to providing fast development and reliable code, we also wanted to make it easy to customize so little development is necessary. The widget can be skinned with just CSS. Functionality-wise, it can be easy to extend.

Key Use Cases

RingCentral communications integrations typically have three major use cases which we support with the Web Widget as well as our out-of-the-box integrations:

Click-to-Dial/Click-to-Text: A simple but effect integration is the linking of phone numbers to the RingCentral webphone. By default, the webphone will automatically attach itself to the teland sms URI schemes.
Inbound Screen-Pop: By using the browser’s postMessage() function, the widget and pass information to the browser which can be retrieved to bring up the page of the caller.
Automatic Call Logging: After a call, it’s important to track the contents and progress of the conversation which the widget makes easy by having hooks to automatically log the call with information on the caller and duration.

Extensibility

In addition to building new integrations, some of our customers ask to extend existing integrations we have. One interesting use case is the opening of additional screen-pops for an incoming call, say a Google or LinkedIn search based on the username for our Salesforce integration. While we don’t support this in our out of the box Salesforce integration, it is simple to add with just one line of JavaScript for each search in the Visualforce page JavaScript:

window.open('https://www.linkedin.com/search/results/people/?keywords=' + contact.Name);

Theming

To show how easy theming is, we configured the widget to use a Game of Thrones theme as seen here:

Here is the data for this demo:

Examples

We’ve already put together some quick examples to demonstrate how to use the Widget in a few scenarios which are available as part of our GitHub Tutorials:

https://github.com/ringcentral-tutorials/ringcentral-web-widget-demos

The tutorials include:

Simple static HTML webpage with Click-to-Dial and Click-to-Text
Simple static HTML CRM with Click-to-Dial, Click-to-Text and Inbound Screen-Pop
Salesforce demo with Click-to-Dial, Inbound Screen-Pop and Automatic Call Logging. Demo also supports additional Inbound Screen-Pop for Google and LinkedIn searches.
Java desktop app with Click-to-Dial

The Code

Wrapping up with the good stuff, all our code is on GitHub because we are big proponents of open source. The web widget and JS widgets libraries are available on our “ringcentral” GitHub repo while the tutorials are available on our “ringcentral-tutorials” GitHub repo as mentioned below:

Web Widget—Embeddable