RingCX Embeddable

Last updated: 2023-12-09Contributors
Edit this page


RingCX Embeddable is an out-of-the-box embeddable web application that help developers to integrate RingCentral RingCX services to their web applications with a few lines of code.

Visit Online

Visit GitHub pages: https://ringcentral.github.io/engage-voice-embeddable


Inject into Web app

Add following code into any web app's page to make it work.

  (function() {
    var rcs = document.createElement("script");
    rcs.src = "https://ringcentral.github.io/engage-voice-embeddable/adapter.js";
    var rcs0 = document.getElementsByTagName("script")[0];
    rcs0.parentNode.insertBefore(rcs, rcs0);

Interaction with Embeddable widget

Notice: RCAdapter is provided after we inject Embeddable widget

Create a new Call


Register a logger and contact matcher service

Example to register logger and contact matcher service into Embeddable widget

var registered = false;
window.addEventListener('message', function(event) {
  var message = event.data;
  if (!registered && message && message.type === 'rc-ev-init') {
    registered = true;
      name: 'TestService',
      callLoggerEnabled: true,
      contactMatcherEnabled: true,
      push: function (data) { // listen push event from rc widget
        // new call event
        if (data.type === 'rc-ev-newCall') {
          console.log('new call:', data.call);
      request: function (req) { // listen request event from rc widget
        var payload = req.payload;
        // handle log request
        if (payload.requestType === 'rc-ev-logCall') {
          console.log('logCall:', payload.data);
            requestId: req.requestId,
            result: 'ok',
        // handle match contacts request
        if (payload.requestType === 'rc-ev-matchContacts') {
          var queries = payload.data;
          console.log('matchContacts:', queries);
          var contactMapping = {};
          queries.forEach(function (query) {
            contactMapping[query.phoneNumber] = [{
              id: query.phoneNumber,
              type: 'TestService',
              name: 'Test User ' + query.phoneNumber,
              phoneNumbers: [{
                phoneNumber: query.phoneNumber,
                phoneType: 'direct',
            }]; // Array
            requestId: req.requestId,
            result: contactMapping,