Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 86 additions & 13 deletions docs/embeddable.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,49 @@

RingCX Embeddable is an out-of-the-box embeddable web application that help developers to integrate RingCentral RingCX services to their web applications with a few lines of code.

> **This is a beta release.** We welcome your feedback and bug reports — please feel free to open an issue on [GitHub](https://github.com/ringcentral/engage-voice-embeddable/).

## Supported features

* Agent states
* Voice queues
* Dial modes
* Manual
* Predictive dial mode
* Preview dial mode
* Call disposition
* Notes
* Disposition
* AI Summary

## Visit Online

Visit GitHub pages: [https://ringcentral.github.io/engage-voice-embeddable](https://ringcentral.github.io/engage-voice-embeddable/)
Visit the online demo: [https://cdn.labs.ringcentral.com/ringcx-embeddable/1.0.0/index.html](https://cdn.labs.ringcentral.com/ringcx-embeddable/1.0.0/index.html)

![demo](images/embeddable-demo.png)

## Inject into Web app

Add following code into any web app's page to make it work.
Add the following code into any web app's page to make it work:

```html
<script>
(function() {
var rcs = document.createElement("script");
rcs.src = "https://ringcentral.github.io/engage-voice-embeddable/adapter.js";
rcs.src = "https://cdn.labs.ringcentral.com/ringcx-embeddable/1.0.0/adapter.js";
var rcs0 = document.getElementsByTagName("script")[0];
rcs0.parentNode.insertBefore(rcs, rcs0);
})();
</script>
```

## Interaction with Embeddable widget

**Notice**: `RCAdapter` is provided after we inject Embeddable widget

#### Create a new Call
Once injected, you can interact with the widget through the global `RCAdapter` object, for example to start a call:

```js
RCAdapter.clickToDial(phoneNumber)
RCAdapter.clickToDial(phoneNumber);
```

#### Register a logger and contact matcher service

Example to register logger and contact matcher service into Embeddable widget
You can also register a logger and contact matcher service to listen to events from the widget and log calls or match contacts:

```js
var registered = false;
Expand All @@ -48,14 +57,37 @@ window.addEventListener('message', function(event) {
RCAdapter.registerService({
name: 'TestService',
callLoggerEnabled: true,
contactMatcherEnabled: true,
contactMatcherEnabled: true, // match contact with phone number
callLogMatcherEnabled: true, // match call log entity with call id
leadViewerEnabled: true, // add "view lead" button
});
RCAdapter.transport.addListeners({
push: function (data) { // listen push event from rc widget
// new call event
if (data.type === 'rc-ev-newCall') {
console.log('new call:', data.call);
}
if (data.type === 'rc-ev-ringCall') {
console.log('ringing call:', data.call);
}
// lead events
if (data.type === 'rc-ev-loadLeads') {
// agent fetch leads event
console.log(data.leads);
}
if (data.type === 'rc-ev-callLead') {
// agent call lead event
console.log(data.lead);
console.log(data.destination); // phone number
}
if (data.type === 'rc-ev-manualPassLead') {
// agent pass lead event
console.log(data.lead);
console.log(data.dispositionId);
console.log(data.notes);
console.log(data.callback); // if need to call back
console.log(data.callbackTime); // call back time
}
},
request: function (req) { // listen request event from rc widget
var payload = req.payload;
Expand Down Expand Up @@ -90,8 +122,49 @@ window.addEventListener('message', function(event) {
});
return;
}
// handle match call logs request
if (payload.requestType === 'rc-ev-matchCallLogs') {
var queries = payload.data;
console.log('matchCallLogs:', queries);
var callLogMapping = {};
// match the logged call entity
callLogMapping[queries[0]] = [{
id: your_logged_call_entity_id, // logged call entity id
}];
RCAdapter.transport.response({
requestId: req.requestId,
result: callLogMapping,
});
return;
}
// handle view lead request
if (payload.requestType === 'rc-ev-viewLead') {
var lead = payload.data;
console.log('agent want to view lead: ', lead);
RCAdapter.transport.response({
requestId: req.requestId,
result: 'ok',
});
return;
}
}
});
}
});
```

See [API](https://github.com/ringcentral/engage-voice-embeddable/blob/1.x/docs/api.md), [Message Transport](https://github.com/ringcentral/engage-voice-embeddable/blob/1.x/docs/message-transport.md) and [Call Events](https://github.com/ringcentral/engage-voice-embeddable/blob/1.x/docs/call-events.md) for the full message and event reference.

## Documentation

Check source code from the [RingCX Embeddable GitHub repository](https://github.com/ringcentral/engage-voice-embeddable/). See the following guides for full details:

* [Get Started](https://github.com/ringcentral/engage-voice-embeddable/blob/1.x/docs/get-started.md)
* [Customize Client ID and environment](https://github.com/ringcentral/engage-voice-embeddable/blob/1.x/docs/customize-client-id.md)
* [Customize Redirect Uri](https://github.com/ringcentral/engage-voice-embeddable/blob/1.x/docs/customize-redirect-uri.md)
* [Customize Authorization](https://github.com/ringcentral/engage-voice-embeddable/blob/1.x/docs/customize-authorization.md)
* [API](https://github.com/ringcentral/engage-voice-embeddable/blob/1.x/docs/api.md)
* [Message Transport](https://github.com/ringcentral/engage-voice-embeddable/blob/1.x/docs/message-transport.md)
* [Call Events](https://github.com/ringcentral/engage-voice-embeddable/blob/1.x/docs/call-events.md)
* [Popup a standalone widget](https://github.com/ringcentral/engage-voice-embeddable/blob/1.x/docs/popup-window.md)
* [Migrating from 0.x (Legacy) to 1.0 (Beta)](https://github.com/ringcentral/engage-voice-embeddable/blob/1.x/docs/migration-from-0.x.md)
Binary file modified docs/images/embeddable-demo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.