feat: support multiple brands (#470)

* feat: support multiple brands

* feat: multiple brands style

* chore: add docs

* update README

* update docs

* fix README

Author: embbnux

.github/workflows/ci.yml

@@ -48,6 +48,7 @@ jobs:
           API_KEY: ${{ secrets.API_KEY }}
           API_SERVER: ${{ secrets.API_SERVER }}
           HOSTING_URL: ${{ secrets.HOSTING_URL }}
+      - run: ./build_brand_themes.sh
       - name: Github Pages
         uses: JamesIves/[email protected]
         with:
@@ -76,6 +77,7 @@ jobs:
         env:
           API_KEY: ${{ secrets.API_KEY }}
           API_SERVER: ${{ secrets.API_SERVER }}
+      - run: ./build_brand_themes.sh
       - name: Github Pages
         uses: JamesIves/[email protected]
         with:

README.md

@@ -64,6 +64,7 @@ To get all versions of RingCentral Embeddable in [here](https://github.com/ringc
 * [Use your own app client id](docs/config-client-id-and-secret.md)
 * [Customize Redirect Uri](docs/customize-redirect-uri.md)
 * [Enable Multiple Tabs Support](docs/multiple-tabs.md)
+* [Multiple Partner Brands Support](docs/multiple-brands.md)
 * [Customize prefix](docs/customize-prefix.md)
 * [Work with the Web Widget event](docs/widget-event.md)
   * [Web phone call event](docs/widget-event.md#web-phone-call-event)

build_brand_themes.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+# TODO: compile multiple themes in Webpack after mini-css-extract-plugin support https://github.com/webpack-contrib/mini-css-extract-plugin/issues/427 
+
+BRAND=att DISABLE_MINIMIZE=1 yarn build
+cp release/att/app.css release/app.att.css
+rm -rf release/att
+
+BRAND=bt DISABLE_MINIMIZE=1 yarn build
+cp release/bt/app.css release/app.bt.css
+rm -rf release/bt
+
+BRAND=telus DISABLE_MINIMIZE=1 yarn build
+cp release/telus/app.css release/app.telus.css
+rm -rf release/telus

docs/README.md

@@ -10,6 +10,7 @@ RingCentral Embeddable is an out-of-the-box embeddable web application built usi
 * [Customize Redirect Uri](customize-redirect-uri.md)
 * [Customize prefix](customize-prefix.md)
 * [Enable Multiple Tabs](multiple-tabs.md)
+* [Multiple Partner Brand Support](multiple-brands.md)
 * [Work with the web widget event](widget-event.md)
   * [Web phone call event](widget-event.md#web-phone-call-event)
   * [Active Call event](widget-event.md#active-call-event)

docs/get-started.md

@@ -28,11 +28,12 @@ Create a iframe with the following code:
 
 #### Stable version
 
-We provide latest RingCentral Embeddable version on github page `https://ringcentral.github.io/ringcentral-embeddable`. It includes latest features and bugfix in RingCentral Embeddable. And it will keep up to date with master code. But we **recommend** developers to use versioned RingCentral Embeddable. Current latest stable version of RingCentral Embeddable is `1.0.1`. You can get `1.0.1` app in this uri `https://apps.ringcentral.com/integration/ringcentral-embeddable/1.0.1`.
+We provide latest RingCentral Embeddable version on github page `https://ringcentral.github.io/ringcentral-embeddable`. It includes latest features and bugfix in RingCentral Embeddable. And it will keep up to date with master code. But we **recommend** developers to use versioned RingCentral Embeddable. You can get current latest stable version of RingCentral Embeddable from [here](https://github.com/ringcentral/ringcentral-embeddable/releases). Such as `1.4.1`, you can get versioned app in this uri `https://apps.ringcentral.com/integration/ringcentral-embeddable/1.4.1`.
 
-Just replace `https://ringcentral.github.io/ringcentral-embeddable` in docs to the versioned uri, and you will be using versioned RingCentral Embeddable. The versioned app will not be influenced when new features are added, so it will be more stable than latest version. When you need to update RingCentral Embeddable, you need to update the versioned app uri in your code manually.
+Just replace `https://ringcentral.github.io/ringcentral-embeddable` in [upper code](#adapter-js-way) to the versioned uri, and you will be using versioned RingCentral Embeddable. The versioned app will not be influenced when new features are added, so it will be more stable than latest version. When you need to update RingCentral Embeddable, you need to update the versioned app uri in your code manually.
 
-For stable version from `1.0.2`, it is required to setup your own RingCentral client id. Please follow [here](config-client-id-and-secret.md) to setup.
+For stable version from `1.0.2`, it is required to setup your own RingCentral client id. Please follow [here](docs/config-client-id-and-secret.md) to setup, or it will throw error with client id required.
+For stable version from `1.2.0`, authorization redirect uri will change with version as `https://apps.ringcentral.com/integration/ringcentral-embeddable/1.4.1/redirect.html`, but you can make a fixed redirect URI with this [docs](docs/customize-redirect-uri.md).
 
 To get all versions of RingCentral Embeddable in [here](https://github.com/ringcentral/ringcentral-embeddable/releases).
 
@@ -42,7 +43,7 @@ Example scripts with versioned app:
 <script>
   (function() {
     var rcs = document.createElement("script");
-    rcs.src = "https://apps.ringcentral.com/integration/ringcentral-embeddable/0.1.0/adapter.js";
+    rcs.src = "https://apps.ringcentral.com/integration/ringcentral-embeddable/1.4.1/adapter.js";
     var rcs0 = document.getElementsByTagName("script")[0];
     rcs0.parentNode.insertBefore(rcs, rcs0);
   })();

docs/multiple-brands.md

@@ -0,0 +1,102 @@
+# Multiple Brands
+
+RingCentral works with a number of [carriers and partners](https://developers.ringcentral.com/guide/basics/partner-compatibility) to deliver a cutting edge white labeled Cloud Communications service directly to their respective customers. This guide will show you how to create RingCentral Embeddable app for other brands.
+
+## AT&T Office@Hand
+
+### Adapter JS way
+
+* Use `adapter.att.js` to instead of `adapter.js`
+* Set `appServer` to `https://platform.ringcentral.biz`
+
+```js
+<script>
+  (function() {
+    var rcs = document.createElement("script");
+    rcs.src = "https://ringcentral.github.io/ringcentral-embeddable/adapter.att.js?appServer=https://platform.ringcentral.biz";
+    var rcs0 = document.getElementsByTagName("script")[0];
+    rcs0.parentNode.insertBefore(rcs, rcs0);
+  })();
+</script>
+```
+
+### Iframe way
+
+Add `brand=att` and `appServer` in src query parameter:
+
+```html
+<iframe width="300" height="500" id="rc-widget" allow="microphone" src="https://ringcentral.github.io/ringcentral-embeddable/app.html?brand=att&appServer=https://platform.ringcentral.biz">
+</iframe>
+```
+
+## BT Cloud Work
+
+Use `adapter.bt.js` to instead of `adapter.js`:
+
+```js
+<script>
+  (function() {
+    var rcs = document.createElement("script");
+    rcs.src = "https://ringcentral.github.io/ringcentral-embeddable/adapter.bt.js";
+    var rcs0 = document.getElementsByTagName("script")[0];
+    rcs0.parentNode.insertBefore(rcs, rcs0);
+  })();
+</script>
+```
+
+### Iframe way
+
+Add `brand=bt` in src query parameter:
+
+```html
+<iframe width="300" height="500" id="rc-widget" allow="microphone" src="https://ringcentral.github.io/ringcentral-embeddable/app.html?brand=bt">
+</iframe>
+```
+
+## TELUS
+
+Use `adapter.telus.js` to instead of `adapter.js`:
+
+```js
+<script>
+  (function() {
+    var rcs = document.createElement("script");
+    rcs.src = "https://ringcentral.github.io/ringcentral-embeddable/adapter.telus.js";
+    var rcs0 = document.getElementsByTagName("script")[0];
+    rcs0.parentNode.insertBefore(rcs, rcs0);
+  })();
+</script>
+```
+
+### Iframe way
+
+Add `brand=telus` in src query parameter:
+
+```html
+<iframe width="300" height="500" id="rc-widget" allow="microphone" src="https://ringcentral.github.io/ringcentral-embeddable/app.html?brand=telus">
+</iframe>
+```
+
+## Other Brands
+
+For other brands, we are still customizing styles for them. Those users can use with default brand.
+
+### Adapter JS way
+
+```js
+<script>
+  (function() {
+    var rcs = document.createElement("script");
+    rcs.src = "https://ringcentral.github.io/ringcentral-embeddable/adapter.js";
+    var rcs0 = document.getElementsByTagName("script")[0];
+    rcs0.parentNode.insertBefore(rcs, rcs0);
+  })();
+</script>
+```
+
+### Iframe way
+
+```html
+<iframe width="300" height="500" id="rc-widget" allow="microphone" src="https://ringcentral.github.io/ringcentral-embeddable/app.html">
+</iframe>
+```

getBrandConfig/att/icon.svg

@@ -0,0 +1,14 @@
+module.exports = {
+  prefix: 'rc-widget',
+  brandConfig: {
+    id: '3420',
+    brandCode: 'att',
+    code: 'att',
+    name: 'Office@Hand',
+    appName: 'Office@Hand Embeddable',
+    fullName: 'Office@Hand',
+    application: 'Office@Hand Embeddable',
+    teleconference: 'https://meetings-officeathand.att.com/teleconference',
+  },
+  brandFolder: __dirname,
+};