Skip to content
RingCentral Embeddable widget
JavaScript HTML CSS Shell
Branch: master
Clone or download
embbnux docs: add link to setup client id when use stable version (#318)
* docs: add link to setup client id when use stable version

* fix link
Latest commit 8a38c17 Dec 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs docs: add link to setup client id when use stable version (#318) Dec 10, 2019
getBrandConfig build: support to build with brand config (#223) Apr 12, 2019
src
test fix: test login issue (#275) Aug 13, 2019
.env.default chore: add tests (#178) Dec 18, 2018
.eslintrc chore: add tests (#178) Dec 18, 2018
.gitignore chore: add tests (#178) Dec 18, 2018
.travis.yml update docs to add awesome examples (#146) Sep 7, 2018
LICENSE Create LICENSE Jul 19, 2019
README.md docs: add link to setup client id when use stable version (#318) Dec 10, 2019
babel.config.js build: support to build in monorepo (#227) Apr 18, 2019
getWebpackBaseConfig.js upgrade: widgets library 0.10.9 (#263) Jul 18, 2019
jest-puppeteer.config.js Enhancement of test architecture and add widget tests (#216) Mar 20, 2019
jest.config.js Enhancement of test architecture and add widget tests (#216) Mar 20, 2019
jest.setup.js chore: add tests (#178) Dec 18, 2018
package.json
postcss.config.js adjust release May 6, 2017
release.sh adjust release May 6, 2017
webpack-dev-server.config.js enhance: use media reader link for recording and voicemail (#260) Jul 11, 2019
webpack-production.config.js chore: use terser for minify and upgrade dev dependences (#294) Oct 17, 2019
yarn.lock fix: package.json & yarn.lock to reduce vulnerabilities (#316) Dec 9, 2019

README.md

RingCentral Embeddable

Build Status

Introduction

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:

Visit Online

Visit website in github pages.

Use as a embeddable web widget

Get Started

there are two ways to integrate this widget to a web application

Adapter JS way

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>

Iframe way

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.

Stable version

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.0.3. You can get versioned app in this uri https://apps.ringcentral.com/integration/ringcentral-embeddable/1.0.3.

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.

Documents

Awesome Embeddable projects

  • 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

Contribution and Development

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.

Clone the code

$ git clone https://github.com/ringcentral/ringcentral-embeddable.git

Create a free RingCentral app

  1. Create a RingCentral developer free account
  2. Create a RingCentral app with platform type - "Browser Based"
  3. Add permissions Edit Message, Edit Presence, Internal Messages, Read Accounts, Read Call Log, Read Contacts, Read Messages, Read Presence, RingOut, SMS, Glip and VoIP Calling to your app. Active Call Control is optional, but recommended for active call control
  4. Add redirect uri http://localhost:8080/redirect.html to your app settings.

Create environment variables file in project root path

Create .env file in project root path:

API_KEY=your_ringcentral_app_client_id
API_SECRET=your_ringcentral_app_client_sercet
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

The API_SECRET is optional to enable the authorization code flow. If you don't provide API_SECRET, the app will use the implicit grant flow. TEST_* variables is optional for automatical test, you can just keep it blank before you run automatical tests.

Start development server

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 dependences 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

Run Tests

You need to update .env file to add environment variables for test as mentioned in previous section.

yarn test

Deploy on production

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.

  1. Update api.json in production environment (Graduate your RingCentral app to get production app client id)

  2. 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.

  1. Upload all files in release folder to your web space. And visit it in browser.
You can’t perform that action at this time.