Welcome to RingCentral Embeddable Voice

RingCentral Embeddable Voice is a unified communications web widget that can handle

• Voice
• Conference calls
• SMS

It allows you to embed it into your own web apps with two way integration, customization, and the ability to extend it's functionality.

This tutorial will cover using and extending Embeddable Voice including:

• Embedding
• Click-to-Dial
• Inbound Screen-Pop
• Custom Themes
• Adding Conference Invites
• Adding More Contacts

Advanced use cases such as creating Salesforce Open CTI widgets along with Java and Linux desktop apps are left to other tutorials.

Let's get started with the basics!

Embedding

Let's take a look at a basic embed which involves simply adding the Embeddable Voice as a JavaScript include. This can be run as-is, but also includes several optional query parameters.

◆ appKey: This is the OAuth 2.0 client ID for your app.

◆ appServer: This the RingCentral API server.

◆ redierctUri: This is your apps Redirect URI.

Demo URL: https://ringcentral.github.io/ringcentral-embeddable-voice/

Click-to-Dial

Click-to-Dial can be automatically enabled when the widget is loaded

◆ tel: Telephone call via RFC 3966

◆ sms: Text via RFC 5724

Demo URL: https://ringcentral.github.io/ringcentral-embeddable-voice/

Inbound Screen-Pop - 1 of 3

Inbound Screen-Pop brings up information on the caller based on their caller id number.

◆ Listen for rc-call-ring-notify event

Inbound Screen-Pop - 2 of 3

Inbound Screen-Pop brings up information on the caller based on their caller id number.

◆ Listen for rc-call-ring-notify event

◆ Get Contact for Number

Inbound Screen-Pop - 3 of 3

Inbound Screen-Pop brings up information on the caller based on their caller id number.

◆ Listen for rc-call-ring-notify event

◆ Get Contact for Number

◆ Load Contact Page

Inbound Screen-Pop - Summary

Inbound Screen-Pop brings up information on the caller based on their caller id number.

◆ Listen for rc-call-ring-notify event

◆ Get Contact for Number

◆ Load Contact Page

Custom Theme - 1 of 3

◆ Add a custom theme via the styleUri query parameter

Demo CSS: https://embbnux.github.io/ringcentral-web-widget-styles/GameofThrones/styles.css

Custom Theme - 2 of 3

◆ Add a custom theme via the styleUri query parameter

Demo CSS: https://embbnux.github.io/ringcentral-web-widget-styles/GameofThrones/styles.css

◆ Custom fonts - Hint: use Transfonter.org

Demo Font: https://grokify.github.io/webfonts/game-of-thrones/

Custom Theme - 3 of 3

◆ Add a custom theme via the styleUri query parameter

Demo CSS: https://embbnux.github.io/ringcentral-web-widget-styles/GameofThrones/styles.css

◆ Custom fonts - Hint: use Transfonter.org

Demo Font: https://grokify.github.io/webfonts/game-of-thrones/

◆ Custom colors

Extensions - Overview

◆ Scheduling conference call calendar events

◆ Extending contacts

◆ Handling activities

Adding Conference Invites

Support more calendars

Adding Conference Invites - Office 365

◆ Customize button name

Adding Conference Invites - Office 365

◆ Customize button name

◆ Call function and open window when clicked

◆ Add function to create Office 365 URL

Adding Contacts - Overview

◆ Add list of contacts

Adding Contacts - Example

◆ Add list of contacts

◆ Customize list of contacts

Summary

More Demos:

◆ Java Desktop App: https://github.com/tylerlong/jxbrowser-webrtc

◆ Linux/Unix Desktop App: https://github.com/embbnux/ringcentral-embeddable-voice-app

◆ Chrome Extension: https://github.com/embbnux/ringcentral-embeddable-voice-extension

Follow Us Online:

◆ News on Twitter: https://twitter.com/ringcentraldevs

◆ Code on GitHub: https://github.com/ringcentral

◆ Blog on Medium: https://medium.com/ringcentral-developers

◆ Community: https://devcommunity.ringcentral.com/ringcentraldev