This is an out-of-the-box embeddable web application that help developers to integrate RingCentral services to their web applications with few code.
Built with:
- RingCentral Widgets - based on React and Redux
Visit website in GitHub Pages.
there are two ways to integrate this widget to a web application
Just add following code to a website's header. It will create a RingCentral Embeddable widget in that web page.
<script>
(function() {
var rcs = document.createElement("script");
rcs.src = "https://ringcentral.github.io/ringcentral-embeddable/adapter.js";
var rcs0 = document.getElementsByTagName("script")[0];
rcs0.parentNode.insertBefore(rcs, rcs0);
})();
</script>
Create a iframe with the following code:
<iframe width="300" height="500" id="rc-widget" allow="microphone" src="https://ringcentral.github.io/ringcentral-embeddable/app.html">
</iframe>
You can use the config tool in this page to generate code with config.
We provide latest RingCentral Embeddable version on github page https://ringcentral.github.io/ringcentral-embeddable
. It includes latest features and bugfix in RingCentral Embeddable. And it will keep up to date with master code. But we recommend developers to use versioned RingCentral Embeddable. Current latest stable version of RingCentral Embeddable is 1.1.2
. You can get versioned app in this uri https://apps.ringcentral.com/integration/ringcentral-embeddable/1.1.2
.
Just replace https://ringcentral.github.io/ringcentral-embeddable
in upper code to the versioned uri, and you will be using versioned RingCentral Embeddable. The versioned app will not be influenced when new features are added, so it will be more stable than latest version. When you need to update RingCentral Embeddable, you need to update the versioned app uri in your code manually.
For stable version from 1.0.2
, it is required to setup your own RingCentral client id. Please follow here to setup.
To get all versions of RingCentral Embeddable in here.
- Get Started
- Browser Support
- Use your own app client id
- Customize Redirect Uri
- Customize Widget UI styles
- Customize prefix
- Work with the Web Widget event
- API to control the Web Widget
- Go to Dial and start a call
- Go to SMS
- Control the web call
- Answer a ringing call
- Reject a ringing call
- Hangup a call
- Log out user
- Minimize and Hide widget
- Navigate to
- Schedule a meeting (RingCentral Video/RingCentral Meetings)
- Work with RingCentral C2D
- Interact with calling settings
- Third Party Service in Widget
- Register your service
- Add meeting schedule button with your service
- Show upcoming meeting list in RingCentral Video page
- Log RingCentral Video meeting into your service
- Show contacts from your application
- Show contact's activities from your application
- Log call into your service
- Log messages into your service
- Add third party authorization button
- Third Party Settings
- Enable and Disable Features in Widget
- Disable messages features
- Disable Call releated features
- Enable Conference invite feature
- Enable Glip feature
- Enable Conference(3-way) Calling feature
- Enable Active Call Control feature
- New adapter badge UI
- Enable Analytics
- Multiple Tabs
- RingCentral Embeddable phone for Hubspot CRM - repo
- RingCentral Embeddable phone for Insightly CRM- repo
- RingCentral Embeddable phone for Pipedrive CRM - repo
- RingCentral Embeddable with Salesforce Lightning - tutorial
- RingCentral Embeddable with Static CRM - tutorial
- RingCentral Embeddable with chrome extension - repo
- Ringcentral Embeddable for Google with Firefox add-on - repo
- RingCentral Embeddable with Third Party service - repo
- RingCentral Embeddable with Electron - Support Linux - repo
- RingCentral Embeddable with Game of Thrones theme - repo
- RingCentral Embeddable with Java app - jxBrowser - repo
- RingCentral Embeddable extension factory - Extension CLI build tool - repo
We provide a online version that developers can use to embed and config in their web application. When you want to get a deep development of this widget, you can clone code of this widget, update it and deploy by yourself.
$ git clone https://github.com/ringcentral/ringcentral-embeddable.git
- Create a RingCentral developer free account
- Create a RingCentral app with platform type - "Browser Based"
- Add permissions
Edit Message
,Edit Presence
,Internal Messages
,Read Accounts
,Read Call Log
,Read Contacts
,Read Messages
,Read Presence
,RingOut
,SMS
,Glip
,VoIP Calling
andCall Control
to your app. - Add redirect uri
http://localhost:8080/redirect.html
to your app settings.
Create .env
file in project root path:
API_KEY=your_ringcentral_app_client_id
API_SERVER=ringcentral sever url, eg: https://platform.devtest.ringcentral.com
TEST_HOST_URI=http://localhost:8080
TEST_USER_NAME=your_sandbox_account_phone_number
TEST_USER_PASSWORD=your_sandbox_account_password
TEST_HEADLESS=false
TEST_*
variables is optional for automatic test, you can just keep it blank before you run automatic tests.
We assume you have pre-installed node.js > 8 and yarn.
It is recommended to use yarn
instead of npm
. We have yarn.lock
file in source code to lock dependence version. With yarn
, we can install dependencies with correct version that work well with this project.
$ yarn # use yarn to install dependences
$ yarn start # start a webpack dev server
Open site: 'http://localhost:8080/' on browser
You need to update .env
file to add environment variables for test as mentioned in previous section.
yarn test
If you create pull request to this repo and get merged, CI will deploy it to this repository's Github Page automatically. But for something that customized, you can deploy it to your own web space, such as your github page.
-
Update
.env
file in production environment (Graduate your RingCentral app to get production app client id) -
Run command to compile code and build release
$ HOSTING_URL=your_host_uri yarn build
Please replace your_host_uri
with your own web host address, such as https://ringcentral.github.io/ringcentral-embeddable
.
And set redirect uri ${your_host_uri}/redirect.html
in your app setting on RingCentral Developer website.
- Upload all files in release folder to your web space. And visit it in browser.
For browser extension, we can host all files in browser extension local folder instead CDN.
To build for browser extension local files:
yarn build-extension
After building, we can get compiled files in this project's extension folder. Create a embeddable
folder in your extension project. Copy all files in extension folder to your extesnion project's embeddable
folder.
Then you can load this widget with ${your_extension_uri}/embeddable/adapter.js
or ${your_extension_uri}/embeddable/app.html
.