RingCentral CTI Demo for JavaScript

Overview

This is a demo that showcases various Call Telephony Integration (CTI) use cases for the RingCentral Connect Platform. The demo runs as a set of HTML5 static webpages that can on a server or locally.

The demo showcases the following use cases:

1. Authorization via 3-Legged OAuth 2.0
2. Click-to-Call
3. Inbound Screen Pop
4. Call Log Retrieval
5. Call Recording Retrieval and Playback
6. SMS

View Screenshot

View Live Demo - https://ringcentral.github.io/cti-demo/

Getting Started

The full installation instructions are included as an HTML file in the demo itself. You can view the full installation instructions on the live demo.

Since this runs live on GitHub Pages, you can run this demo without any server-side installation, though it may be worthwhile to install the RingCentral for Desktop softphone as described in the instructions.

You can also run this demo on any webserver by adding the public directory to the server's html directory. This may be useful if you wish to edit the pages. There is no need to run a database as the demo stores all necessary data using HTML5 Local Storage (e.g. window.localStorage). Instructions are provided below for Node.js http-server as one easy approach for this.

Installation

$ git clone https://github.com/ringcentral/ringcentral-cti-demo-js
$ cd ringcentral-cti-demo-js
$ bower install ringcentral ringcentral-helpers --save

The included .bowerrc file will save components to the public/components directory.

Using Node.js http-server

You can run this demo using any server that can host static webpages, including GitHub pages.

Using Node.js and http-server (NPM package) is presented as one easy to use option.

Pre-reqs

Install NPM globally:

$ curl https://npmjs.org/install.sh | sh

Install http-server globally so it cna be run from the command line.

$ npm install http-server -g

Install and run demo.

$ git clone https://github.com/ringcentral/ringcentral-cti-demo-js
$ http-server ringcentral-cti-demo-js/public

Navigate Google Chrome to the location sepcified by http-server, e.g.

http://localhost:8080

Customization

Syntax Highlighting

This demo uses highlight.js for syntax highlighting. The CSS style files are located in the GitHub repo. To choose any style, simply copy the desired style CSS file to the project's css/highlight.css location.

Links

Project Repo

• https://github.com/ringcentral/ringcentral-cti-demo-js

RingCentral SDK for JavaScript

• https://github.com/ringcentral/ringcentral-js

RingCentral API Developer and Reference Guide

• https://developer.ringcentral.com/api-docs/

RingCentral API Explorer

• https://developer.ringcentral.com/api-explorer/

Contributions

Any reports of problems, comments or suggestions are most welcome.

Please report these on GitHub.

License

RingCentral CTI Demo JS is available under an MIT-style license. See LICENSE.txt for details.

RingCentral CTI Demo JS © 2016 by RingCentral

RingCentral CTI Demo JS © 2015 by John Wang