class: middle, center, inverse [
](https://github.com/grokify/ringcentral-slides/tree/master/engage/digital/overview)
[
](https://developer.ringcentral.com)
## Embeddable --- name:agenda class:inverse,middle ### Agenda * What is Embeddable? * Message * Video * Phone * Engage * Community Integrations * Technology Components * Embeddable APIs * Embeddable Events * React Component Library --- class: middle, center, inverse ### Embeddable is a web widget SDK version of our Google Chrome Extension which supports Message, Video and Phone. --- class: middle, center, inverse ### Installable with 1 line of code
--- name: message class: inverse,middle,center ### Message - Chat Anywhere Team messaging is available in Embeddable as a beta.
--- name: video class: inverse,center ### Video - Deep Integration Embeddable supports RC Video for scheduling, joining, starting meetings, along with historical meetings, recordings, click-to-schedule, and meeting log sync.
--- name: phone class: inverse,center,middle ### Phone - First-Class Integration Built-in WebRTC and Call Control straight from Google and Salesforce integrations.
--- name: engage class: inverse,center,middle ### Engage Voice - Agent Widget Embeddable already supports Engage Voice is in beta.
--- name: community class: inverse,center,middle ### Community Integrations Fully-featured example integrations with code. [HubSpot](https://www.ringcentral.com/apps/hubspot) - [Engage](https://github.com/ringcentral/hubspot-embeddable-engage-phone) [Insightly](https://www.ringcentral.com/apps/insightly) [Pipedrive](https://www.ringcentral.com/apps/pipedrive) [Redtail CRM](https://www.ringcentral.com/apps/redtail-crm) [PracticeSuite](https://www.ringcentral.com/apps/practicesuite) --- name: platform class: middle, center, inverse ### Key Technology Concepts Drive Value and Functionality APIs - JavaScript events - window.postMessage() React component library --- name: api class: middle, center, inverse ### APIs drive Embeddable behavior [Go to Dialer and Start Call API](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/control-widget.md#go-to-dial-and-start-a-call) [Go to SMS API](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/control-widget.md#go-to-sms-page) [WebRTC Call Control API: answer, reject, hangup](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/control-widget.md#control-the-web-call) [Logout API](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/control-widget.md#log-out-user) [Minimize / Hide Widget API](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/control-widget.md#minimizehideremove-the-widget) [Navigate To API](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/control-widget.md#navigate-to) [Schedule Meeting API](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/control-widget.md#schedule-a-meeting) --- name: api-example class: middle, inverse ### Example Transfer API Call
```js document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({ type: 'rc-adapter-control-call', callAction: 'transfer', callId: `call id`, options: { transferNumber: 'transfer_number' } }, '*'); ```
--- name: events class: inverse, middle, center ### Events [Working with Embeddable events](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/widget-event.md) [Web phone call event](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/widget-event.md#web-phone-call-event) [Ringout call event](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/widget-event.md#ringout-call-event) [Active Call event](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/widget-event.md#active-call-event) [Login Status event](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/widget-event.md#login-status-event) [Message event](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/widget-event.md#message-event) [Route event](https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/widget-event.md#route-changed-event) --- name: event-example class: inverse,middle ### Example Active Call Event Get all active calls in current RingCentral logged user (extension):
```js window.addEventListener('message', (e) => { const data = e.data; if (data) { switch (data.type) { case 'rc-active-call-notify': // get call on active call updated event console.log(data.call); break; default: break; } } }); ```
--- name: react-components class: inverse,center ### Compose your own UI with our React Component Library
https://github.com/ringcentral/ringcentral-js-widgets https://ringcentral.github.io/ringcentral-js-widgets --- class: inverse [
](https://github.com/grokify/ringcentral-polling-and-syncing) ### More Info Presentation * [Embeddable Overview](https://grokify.github.io/ringcentral-slides/embeddable/overview) SDKs & Apps * [Embeddable](https://github.com/ringcentral/ringcentral-embeddable) * [React Components](https://github.com/ringcentral/ringcentral-js-widgets) * [HubSpot](https://github.com/ringcentral/hubspot-embeddable-ringcentral-phone) * [Insightly](https://github.com/ringcentral/insightly-embeddable-ringcentral-phone) * [Pipedrive](https://github.com/ringcentral/pipedrive-embeddable-ringcentral-phone-spa) * [PracticeSuite](https://github.com/ringcentral/ringcentral-for-practicesuite) * [Redtail CRM](https://github.com/ringcentral/redtail-embeddable-ringcentral-phone) --- class: inverse,middle [
](https://github.com/grokify/ringcentral-polling-and-syncing) ### Get and Stay Involved Dev Portal - https://developers.ringcentral.com/ GitHub - https://github.com/ringcentral Blog - https://medium.com/ringcentral-developers Twitter - https://twitter.com/ringcentraldevs