Build Voice and Messaging Apps Quickly with the RingCentral Web Widget
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!
- 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.
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
- 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.
window.open('https://www.linkedin.com/search/results/people/?keywords=' + contact.Name);
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:
- Font: https://grokify.github.io/webfonts/game-of-thrones/
- Data: https://github.com/grokify/gameofthrones
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:
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
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:
JS Widgets — React Component Library
Web Widget Embeddable Demos:
Get in touch!
If you have any questions on using this, please reach out to us at the following locations:
- GitHub Repo Issues: see relevant GitHub repo mentioned above
- RingCentral Dev Community: https://devcommunity.ringcentral.com
- Stack Overflow: https://stackoverflow.com/questions/tagged/ringcentral
Also, please chat with us in real time at: https://glipped.herokuapp.com