2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Iron Bank CRM Demo
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
51 |
52 |
78 |
79 |
120 |
121 |
122 |
123 |
124 |
125 |
206 |
207 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
--------------------------------------------------------------------------------
/docs/static_crm/code/ringcentral.js:
--------------------------------------------------------------------------------
1 | // Add the RingCentral Web Widget
2 | (function() {
3 | var rcs = document.createElement("script");
4 | rcs.src = "https://ringcentral.github.io/ringcentral-web-widget/adapter.js?stylesUri=https://embbnux.github.io/ringcentral-web-widget-styles/GameofThrones/styles.css";
5 | //https://ringcentral.github.io/ringcentral-web-widget/app.html?stylesUri=https://embbnux.github.io/ringcentral-web-widget-styles/GameofThrones/styles.css
6 | var rcs0 = document.getElementsByTagName("script")[0];
7 | rcs0.parentNode.insertBefore(rcs, rcs0);
8 | if (window.RCAdapter) {
9 | window.RCAdapter.setMinimized(false);
10 | }
11 | })();
12 |
13 | // Inbound Screen Pop Based in Message Event
14 | (function () {
15 | window.addEventListener('message', function(e) {
16 | const data = e.data;
17 | if (data) {
18 | switch (data.type) {
19 | case 'rc-call-ring-notify':
20 | var id = number2id(data.call.from, number2user);
21 | if (id) {
22 | var contact = id2user[id];
23 | window.title = contact.character.displayName;
24 | window.history.pushState("", contact.character.displayName, "?id="+id);
25 | loadSingleUser(id, id2user);
26 | }
27 | break;
28 | default:
29 | break;
30 | }
31 | }
32 | })
33 | })();
--------------------------------------------------------------------------------
/docs/static_crm/tutorial/index.md:
--------------------------------------------------------------------------------
1 | The Static CRM Web Widget demo is a simple demo that show cases a generic CRM with the following use cases:
2 |
3 | * Click-to-Dial
4 | * Click-to-Text (SMS)
5 | * Inbound Screen-Pop
6 |
7 | This demo is located in the `static_crm` folder.
8 |
9 | 
10 |
11 | ## Installation and Customization
12 |
13 | To install this demo, clone the repo and load the file in your browser:
14 |
15 | 1. Clone the repo
16 |
17 | `git clone https://github.com/ringcentral-tutorials/ringcentral-web-widget-demos`
18 |
19 | 2. Create a RingCentral App
20 |
21 | Create an app with the following characteristics:
22 |
23 | | Property | Setting |
24 | |----------|---------|
25 | | Platform Type | Browser-based |
26 | | Grant Types | Authorization Code or Implicit Grant |
27 | | Permissions | see [ringcentral/ringcentral-web-widget](https://github.com/ringcentral/ringcentral-web-widget) |
28 |
29 | 2. Add your demo PSTN number
30 |
31 | Edit the `data/characters_data.js` file for Jon Snow with your PSTN number in E.164 format.
32 |
33 | 3. Add/remote the demo code
34 |
35 | At the bottom of the `./static_crm/index.html` file, either link or copy and paste in the file in `./static_crm/ringcentral.js`, e.g.
36 |
37 | ``
38 |
39 | ## Notes
40 |
41 | ### Click-to-Dial and Click-to-Text
42 |
43 | These to capabilities are added automatically to the pages since the links are already provided using the `tel` and `sms` URI schemes.
44 |
45 | For example:
46 |
47 | `Call Text`
48 |
49 | Here is the JavaScript code that loads the web widget and attaches it to the `tel` and `sms` URI schemes.
50 |
51 | ```js
52 | // Add the RingCentral Web Widget
53 | (function() {
54 | var rcs = document.createElement("script");
55 | rcs.src = "https://ringcentral.github.io/ringcentral-web-widget/adapter.js?appKey=myAppKey&appServer=https://platform.devtest.ringcentral.com&redirectUri=https://ringcentral.github.io/ringcentral-web-widget/redirect.html";
56 | var rcs0 = document.getElementsByTagName("script")[0];
57 | rcs0.parentNode.insertBefore(rcs, rcs0);
58 | if (window.RCAdapter) {
59 | window.RCAdapter.setMinimized(false);
60 | }
61 | })();
62 | ```
63 |
64 | ### Inbound Screen-Pop
65 |
66 | This is performed with the following code in `./ringcentral.js`. The code retrieves the from phone number in E.164 format using `data.call.from`. It then uses the `number2id` function to retrieve a userId. If present, the window location is changed to that user and the content for that user is loaded.
67 |
68 | ```js
69 | (function () {
70 | window.addEventListener('message', function(e) {
71 | const data = e.data;
72 | if (data) {
73 | switch (data.type) {
74 | case 'rc-call-ring-notify':
75 | var id = number2id(data.call.from, number2user);
76 | if (id) {
77 | var contact = id2user[id];
78 | window.title = contact.character.displayName;
79 | window.history.pushState("", contact.character.displayName, "?id="+id);
80 | loadSingleUser(id, id2user);
81 | }
82 | break;
83 | default:
84 | break;
85 | }
86 | }
87 | })
88 | })();
89 | ```
90 |
--------------------------------------------------------------------------------
/docs/static_crm/tutorial/static_crm_demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ringcentral-tutorials/ringcentral-embeddable-demos/a3bd6064af87e75d6b478ac20725a9f359561e5f/docs/static_crm/tutorial/static_crm_demo.png
--------------------------------------------------------------------------------
/docs/static_simple/code/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Simple RingCentral Web Widget Demo
5 |
6 | Instructions: https://ringcentral.github.io/ringcentral-web-widget/
7 |
8 | Tel: (415) 997-0079
9 |
10 | SMS: (415) 997-0079
11 |
12 |
20 |
21 |
--------------------------------------------------------------------------------
/docs/static_simple/code/static_embed.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/docs/static_simple/tutorial/index.md:
--------------------------------------------------------------------------------
1 | This simple demo provides an easy way to get started with both adding the Web Widget and linking it to the `tel` and `sms` URI Schemes:
2 |
3 | * Live Demo: [https://ringcentral.github.io/ringcentral-web-widget](https://ringcentral.github.io/ringcentral-web-widget)
4 | * Repo: [https://github.com/ringcentral/ringcentral-web-widget](https://github.com/ringcentral/ringcentral-web-widget)
--------------------------------------------------------------------------------
/mkdocs.yml:
--------------------------------------------------------------------------------
1 | site_name: RingCentral Web Widget Demos
2 | site_url: https://github.com/ringcentral-tutorials/ringcentral-web-widget-demos
3 | site_favicon: favicon.ico
4 | repo_url: https://github.com/ringcentral-tutorials/ringcentral-web-widget-demos.git
5 | docs_dir: docs
6 | theme: readthedocs
7 | extra_css: [assets/extra.css]
8 | extra_javascript: [assets/fonts.js]
9 | pages:
10 | - 'Overview': 'index.md'
11 | - 'Static Simple Demo': 'static_simple/tutorial/index.md'
12 | - 'Static CRM Demo': 'static_crm/tutorial/index.md'
13 | - 'Salesforce Lightning Demo': 'salesforce_lightning/tutorial/index.md'
14 | - 'More Salesforce Lightning': 'salesforce_lightning_more/tutorial/index.md'
15 | - 'Java Desktop App Demo': 'java_desktop_app/tutorial/index.md'
16 |
--------------------------------------------------------------------------------