This is an out-of-the-box embeddable web application that help developers to integrate RingCentral services to their web applications with few codes.
Built with:
- RingCentral Widgets - base on react and redux
Visit website in github pages.
there are two ways to integrate this widget to a web application
Just add following the following codes to a website's header. It will create a RingCentral Embeddable widget in your website.
<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 codes:
<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 codes 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 codes. But we recommend developers to use versioned RingCentral Embeddable. Current latest stable version of RingCentral Embeddable is 0.1.1
. You can get versioned app in this uri https://apps.ringcentral.com/integration/ringcentral-embeddable/0.1.1
.
Just replace https://ringcentral.github.io/ringcentral-embeddable
in upper codes 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 codes manually.
To get all versions of RingCentral Embeddable in here.
- Get Started
- Use your own app client id and app client secret
- Customize Redirect Uri
- Customize 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
- Third Party Service in Widget
- Register your service
- Add a conference invite button with your service
- Show contacts from your application
- Show contact's activities from your application
- Add call logger button in calls page
- Add third party authorization button
- Enable and Disable Features in Widget
- Disable messages features
- Disable Call releated features
- Disable Conference invite feature
- Enable Glip feature
- In-page Login Mode
- Ringcentral Embeddable phone for Hubspot - repo
- Ringcentral Embeddable phone for Insightly - repo
- RingCentral Embeddable with Salesforce Lightning - tutorial
- RingCentral Embeddable with Static CRM - tutorial
- RingCentral Embeddable with chrome extension - 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
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 codes 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
andVoIP Calling
to your app. - Add redirect uri
http://localhost:8080/redirect.html
to your app settings.
# api.json
{
"appKey": "your ringcentral app key",
"appSecret": "your ringcentral app sercet",
"server": "ringcentral sever url, eg: https://platform.devtest.ringcentral.com"
}
The appSecret
is optional to enable the authorization code flow. If you don't provide appSecret
, the app will use the implicit grant flow.
We assume you have pre-installed node.js > 8 and yarn.
$ yarn # use yarn to install dependences
$ yarn start # start a webpack dev server
Open site: 'http://localhost:8080/' on browser
If you create pull request to this repo and get merged, CI will deploy it to this repo's github page automatically. But for something that customized, you can deploy it to your own web space, such as your github page.
- Update
api.json
in production environment - Run command to compile codes 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
.
- Upload all files in release folder to your web space. And visit it in browser.