https://github.com/ringcentral/ringcentral-c2d
RingCentral Click To Dial library
https://github.com/ringcentral/ringcentral-c2d
Last synced: 12 months ago
JSON representation
RingCentral Click To Dial library
- Host: GitHub
- URL: https://github.com/ringcentral/ringcentral-c2d
- Owner: ringcentral
- Created: 2019-01-25T01:33:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-24T05:17:36.000Z (about 2 years ago)
- Last Synced: 2025-07-11T16:46:12.740Z (12 months ago)
- Language: TypeScript
- Homepage: https://ringcentral.github.io/ringcentral-c2d/
- Size: 333 KB
- Stars: 5
- Watchers: 8
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# RingCentral Click To Dial library
[](https://www.npmjs.com/package/ringcentral-c2d)
This library can help you to get phone numbers in web page and show a RingCentral Click-to-Call and Click-to-Text shortcut when hover on phone number text.
[See Demo](https://ringcentral.github.io/ringcentral-c2d/)
## Install
via npm
```
npm install ringcentral-c2d
```
via yarn
```
yarn add ringcentral-c2d
```
## Overview
This library mainly contains 3 parts
1. Matchers - For matching phone numbers in the provided page content
2. Observers - For watching any DOM changes of the page
3. Widgets - For injecting UI widgets for user to interact with
## Get Start
### With webpack:
[webpack.config.js](./webpack.config.js)
```javascript
import { RingCentralC2D, WidgetEvents } from 'ringcentral-c2d';
const clickToDial = new RingCentralC2D();
clickToDial.widget.on(WidgetEvents.call, (phoneNumber) => {
console.log('Click to Call:', phoneNumber);
});
clickToDial.widget.on(WidgetEvents.text, (phoneNumber) => {
console.log('Click to Text:', phoneNumber);
});
// Stop
clickToDial.dispose();
```
### CDN
```html
var clickToDial = new RingCentralC2D();
clickToDial.widget.on('call', function (phoneNumber) {
console.log('Click to Call:', phoneNumber);
});
clickToDial.widget.on('text', function (phoneNumber) {
console.log('Click to Text:', phoneNumber);
});
// Stop
clickToDial.dispose();
```
### Advanced
Custom your own widget by referencing this sample code
[SampleWidget.ts](./src/widgets/SampleWidget/SampleWidget.ts)
```javascript
// Implement it by referencing sample code
class MyWidget {}
const myWidget = new MyWidget({
// Any arguments your widget needs
});
// Bind any events as you need
myWidget.on('your-event-name', () => {
// Your event handler
});
const clickToDial = new RingCentralC2D({
widget: myWidget,
});
// Stop
clickToDial.dispose();
```