Embed a phone into any webpage with RingCentral Embeddable

Introducing the RingCentral Embeddable 2.0

We are excited to announce and make available the next generation of the RingCentral Embeddable product. In addition to a new design and user interface, Embeddable 2.0 comes with new features including call recording playback and a new SMS/messaging inbox. Developers will enjoy new ways to extend the user interface without having to know or code HTML and CSS.

Learn more

RingCentral Embeddable provides a ready-to-use, fully-functional web phone that can be embedded into any web site. Embeddable is a javascript wrapper around the foundational RingCentral Widgets Library. By adding a few lines of javascript, anyone can embed a phone into any web page in seconds.

Quick start

Create a browser based app in RingCentral Developer Platform to get clientId, appSecret and appServer.

Just add following the following codes to your website's header. It will create a iframe in your website. 

<script>
  (function() {
    var rcs = document.createElement("script");
    rcs.src = "https://apps.ringcentral.com/integration/ringcentral-embeddable/latest/adapter.js";
    var rcs0 = document.getElementsByTagName("script")[0];
    rcs0.parentNode.insertBefore(rcs, rcs0);
  })();
</script>

Create a iframe with the following codes

  <iframe width="300" height="500" allow="microphone" src="https://apps.ringcentral.com/integration/ringcentral-embeddable/latest/app.html">
  </iframe>

You need to add following uri to your redirect url in app setting on developer website, if you don't config redirect widget uri.

https://apps.ringcentral.com/integration/ringcentral-embeddable/latest/redirect.html

For full document of API and Event, please refer to here

When loading RingCentral Embeddable for the first time, users will need to grant access to their microphone and speaker.

Prerequisites

  • A RingCentral account
  • A supported browser, including:
    • Chrome
    • Microsoft Edge
    • Firefox

Removing the "FOR DEMO PURPOSES ONLY" banner

You may observe that a banner appears when running the sample code above. To remove this banner, please register your own application and use the client ID associated with that application.

Setup environment of this page's online demo

1. Click here to set this widget's client ID and app Server. Enable and save.

2. Set redirect url in RingCentral Developer Platform as the app show.

In environment way, clientId and server are saved in your local storage, so it will not influence other people.

This app supports authorization code and authorization code with PKCE grant flow. If you only provide clientId, it will use authorization code with PKCE. Refer here to get more details about authorization flow.

C2D demo

TEL Link: +12345678888

SMS Link: +12345678901

SMS Link with Text: +12345678902

Text: +12345678901