diff --git a/README.md b/README.md index b60ff63..beef984 100644 --- a/README.md +++ b/README.md @@ -3,9 +3,15 @@ ## Run this demo in your localhost 1. Clone this Repo -2. Do `yarn install` -3. Do `yarn start` -4. Navigate to [http://127.0.0.1:9000](http://127.0.0.1:9000) +2. Get access token for users registered with Webex Calling. If you don't have an account request for a sandbox - https://developer.webex.com/docs/developer-sandbox-guide +3. In "js/app.js", put the access tokens (line 126, 128) +4. Run `yarn start` +5. Navigate to [http://127.0.0.1:9000](http://127.0.0.1:9000) + +## Important files +1. mytrips.html - This file contains the customer dashboard, can be used to initiate an outbound call. +2. agent.html - This file contains the agent dashboard, can be used to receive a call and initiate transfers. +3. sdk/calling-sdk.js - This file contains functions that utilize the calling SDK. ## Contact Us @@ -14,7 +20,6 @@ - Webex SDK Contributors - https://eurl.io/#v-LbYXL27 - Chrome extension support space - https://eurl.io/#YbnG_BwcN - ### Developer Support - [Developer Support](https://developer.webex.com/support) @@ -37,10 +42,11 @@ - [Github Wiki](https://github.com/webex/webex-js-sdk/wiki) #### Calling + - [Introducing the Webex Web Calling SDK](https://github.com/webex/webex-js-sdk/wiki/Introducing-the-Webex-Web-Calling-SDK) -- [Core Concepts](https://github.com/webex/webex-js-sdk/wiki/Core-Concepts-(Calling)) -- [Quickstart guide](https://github.com/webex/webex-js-sdk/wiki/Quickstart-Guide-(Calling)) -- [Authorization](https://github.com/webex/webex-js-sdk/wiki/Authorization-(Calling)) +- [Core Concepts]() +- [Quickstart guide]() +- [Authorization]() - **Basic Features** - [Incoming and outgoing calls](https://github.com/webex/webex-js-sdk/wiki/Incoming-and-Outgoing-Calls) - **Advanced Features** diff --git a/index copy1.html b/index copy1.html deleted file mode 100644 index 63f5c9e..0000000 --- a/index copy1.html +++ /dev/null @@ -1,318 +0,0 @@ - - - - -My Trip a Travel Category Flat Bootstrap responsive Website Template | Home :: w3layouts - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
-
-
-

Singapore

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- - -
-
-
-

Hawaii

-

Vivamus vel nulla venenatis, tincidunt mi vel, consequat erat.

-
-
-
- - -
-
-
-

Hong Kong

-

Nunc turpis purus, vestibulum at quam ac, feugiat dignissim nunc

-
-
-
- -
- - - - - Previous - - - - - Next - -
- -
-
-
-

Top Tours

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta efficitur ante quis volutpat.

-
-
-
-
-

San Francisco

-
-
-
-
-

Maldives

-
-
-
-
-

Ireland

-
-
-
-
-

New Zealand

-
-
-
-
-
-
- - -
-
-
-

Today Best offers

-

Sed vitae purus ut libero malesuada molestie imperdiet a nibh. Etiam consectetur odio a massa vulputate porttitor. Quisque nibh orci, vestibulum sed gravida vel, eleifend nec libero.

-
- Click Here -
-
-
-
- - -
-
-
-

News & Events

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta efficitur ante quis volutpat.

-
-
-
-
-
- -
-
-
-
- Admin -
-
-

May 09,2016

-
-
-
-
- Quisque gravida, nunc eu interdum porta -

Aliquam erat volutpat. Duis vulputate tempus laoreet. Integer viverra eleifend neque, eget dictum lectus. Quisque eu tempor dolor.

-
-
-
-
-
-
-
- -
-
-
-
- Admin -
-
-

May 09,2016

-
-
-
-
- Quisque gravida, nunc eu interdum porta -

Aliquam erat volutpat. Duis vulputate tempus laoreet. Integer viverra eleifend neque, eget dictum lectus. Quisque eu tempor dolor.

-
-
-
-
-
-
-
- -
-
-
-
- Admin -
-
-

May 09,2016

-
-
-
-
- Quisque gravida, nunc eu interdum porta -

Aliquam erat volutpat. Duis vulputate tempus laoreet. Integer viverra eleifend neque, eget dictum lectus. Quisque eu tempor dolor.

-
-
-
-
-
-
-
-
- - -
-
-
-
-
-

Address

-
-
-

Eiusmod Tempor inc - St Dolore Place,Kingsport 56777. -

-

Phone : +1 123 456 789 - Email : mail@example.com -

-
-
-
-
-

Navigation

-
-
- -
-
-
-
-

Follow

-
- -
-
-
-

Newsletter

-
-
-
- - -
-
-
-
-
-
-

© 2016 My Trip . All Rights Reserved | Design by W3layouts

-
-
-
- - - - \ No newline at end of file diff --git a/js/app.js b/js/app.js index c198ddb..148892a 100644 --- a/js/app.js +++ b/js/app.js @@ -1,95 +1,118 @@ let agentNumpad, callNotification, secondCallNotification; -const callNotificationElem = document.getElementById('callNotification'); -const secondCallNotificationElem = document.getElementById('secondCallNotification'); +const callNotificationElem = document.getElementById("callNotification"); +const secondCallNotificationElem = document.getElementById( + "secondCallNotification" +); -const callTimeOuter = document.querySelector('#callNotification #call-time'); -const callTimer = document.querySelector('#callNotification #call-time span#timer'); -const callHoldStatus = document.querySelector('#callNotification #call-time span#hold-status'); +const callTimeOuter = document.querySelector("#callNotification #call-time"); +const callTimer = document.querySelector( + "#callNotification #call-time span#timer" +); +const callHoldStatus = document.querySelector( + "#callNotification #call-time span#hold-status" +); -const secondCallTimer = document.querySelector('#secondCallNotification #call-time span#timer'); +const secondCallTimer = document.querySelector( + "#secondCallNotification #call-time span#timer" +); const profileDropDown = document.getElementById("myDropdown"); const profileOnline = document.querySelector(".dropbtn #availability"); class callNotificationElement { - constructor(element,callTimerElement){ - this.callNotification = element; - this.callNotificationTimer = new Timer(callTimerElement); - this.callNotificationControls = this.callNotification.querySelector('.notifier-a-controls'); - this.callNotificationControls_mute = this.callNotificationControls.querySelector('.mute'); - this.callNotificationControls_hold = this.callNotificationControls.querySelector('.hold'); - this.callNotificationControls_transfer = this.callNotificationControls.querySelector('.transfer'); - } + constructor(element, callTimerElement) { + this.callNotification = element; + this.callNotificationTimer = new Timer(callTimerElement); + this.callNotificationControls = this.callNotification.querySelector( + ".notifier-a-controls" + ); + this.callNotificationControls_mute = + this.callNotificationControls.querySelector(".mute"); + this.callNotificationControls_hold = + this.callNotificationControls.querySelector(".hold"); + this.callNotificationControls_transfer = + this.callNotificationControls.querySelector(".transfer"); + } - toggle(doWhat){ - if(doWhat === "close" || this.callNotification.classList.contains('show-notification')){ - this.callNotification.classList.remove('show-notification'); - setTimeout(() => { - this.callNotification.classList.remove('timestate'); - this.callNotificationTimer.stop(); - }, 2500); - } - else{ - this.callNotification.classList.add('show-notification'); - } - return this.callNotificationTimer; + toggle(doWhat) { + if ( + doWhat === "close" || + this.callNotification.classList.contains("show-notification") + ) { + this.callNotification.classList.remove("show-notification"); + setTimeout(() => { + this.callNotification.classList.remove("timestate"); + this.callNotificationTimer.stop(); + }, 2500); + } else { + this.callNotification.classList.add("show-notification"); } + return this.callNotificationTimer; + } - startTimer(){ - this.callNotification.classList.add('timestate'); - this.callNotificationTimer.start(); - this.callNotificationControls.classList.remove('hide-controls'); - return this.callNotificationTimer; - } + startTimer() { + this.callNotification.classList.add("timestate"); + this.callNotificationTimer.start(); + this.callNotificationControls.classList.remove("hide-controls"); + return this.callNotificationTimer; + } - transferToggle(){ - this.callNotification.classList.contains('switch-look') ? this.callNotification.classList.remove('switch-look') : this.callNotification.classList.add('switch-look'); - this.callNotificationControls_transfer.classList.contains('in-progress') ? this.callNotificationControls_transfer.classList.remove('in-progress') : this.callNotificationControls_transfer.classList.add('in-progress'); - } + transferToggle() { + this.callNotification.classList.contains("switch-look") + ? this.callNotification.classList.remove("switch-look") + : this.callNotification.classList.add("switch-look"); + this.callNotificationControls_transfer.classList.contains("in-progress") + ? this.callNotificationControls_transfer.classList.remove("in-progress") + : this.callNotificationControls_transfer.classList.add("in-progress"); + } - holdToggle(){ - callTimeOuter.classList.contains('on-hold') ? callTimeOuter.classList.remove('on-hold') : callTimeOuter.classList.add('on-hold'); - this.callNotificationControls_hold.classList.contains('held') ? ( - this.callNotificationControls_hold.classList.remove('held'), - this.callNotificationControls_hold.dataset.tooltip = "Hold" - ) : ( - this.callNotificationControls_hold.classList.add('held'), - this.callNotificationControls_hold.dataset.tooltip = "Resume" - ) - } + holdToggle() { + callTimeOuter.classList.contains("on-hold") + ? callTimeOuter.classList.remove("on-hold") + : callTimeOuter.classList.add("on-hold"); + this.callNotificationControls_hold.classList.contains("held") + ? (this.callNotificationControls_hold.classList.remove("held"), + (this.callNotificationControls_hold.dataset.tooltip = "Hold")) + : (this.callNotificationControls_hold.classList.add("held"), + (this.callNotificationControls_hold.dataset.tooltip = "Resume")); + } - muteToggle(){ - this.callNotificationControls_mute.classList.contains('muted') ? ( - this.callNotificationControls_mute.classList.remove('muted'), - this.callNotificationControls_mute.dataset.tooltip = "Mute" - ) : ( - this.callNotificationControls_mute.classList.add('muted'), - this.callNotificationControls_mute.dataset.tooltip = "Unmute" - ); - } + muteToggle() { + this.callNotificationControls_mute.classList.contains("muted") + ? (this.callNotificationControls_mute.classList.remove("muted"), + (this.callNotificationControls_mute.dataset.tooltip = "Mute")) + : (this.callNotificationControls_mute.classList.add("muted"), + (this.callNotificationControls_mute.dataset.tooltip = "Unmute")); + } - enableCompleteTransfer(){ - this.callNotificationControls_transfer.classList.remove('disabled'); - } + enableCompleteTransfer() { + this.callNotificationControls_transfer.classList.remove("disabled"); + } } -if(callNotificationElem){ - callNotification = new callNotificationElement(callNotificationElem,callTimer); +if (callNotificationElem) { + callNotification = new callNotificationElement( + callNotificationElem, + callTimer + ); } -if(secondCallNotificationElem){ - secondCallNotification = new callNotificationElement(secondCallNotificationElem,secondCallTimer); +if (secondCallNotificationElem) { + secondCallNotification = new callNotificationElement( + secondCallNotificationElem, + secondCallTimer + ); } function fetchCallerBooking() { - var mikeross = document.getElementsByClassName('hider-mikeross'); - var harveyspecter = document.getElementsByClassName('hider-harveyspecter'); - for (var i = 0; i < mikeross.length; i++) { - mikeross[i].style.display = 'none'; - } - for (var i = 0; i < harveyspecter.length; i++) { - harveyspecter[i].style.display = 'block'; - } + var mikeross = document.getElementsByClassName("hider-mikeross"); + var harveyspecter = document.getElementsByClassName("hider-harveyspecter"); + for (var i = 0; i < mikeross.length; i++) { + mikeross[i].style.display = "none"; + } + for (var i = 0; i < harveyspecter.length; i++) { + harveyspecter[i].style.display = "block"; + } } function openCallNotification(callObj) { @@ -99,12 +122,12 @@ function openCallNotification(callObj) { function getWebexConfig(userType) { let access_token; - if (userType === 'customer') { - access_token = "eyJhbGciOiJSUzI1NiJ9.eyJjbHVzdGVyIjoiUDBBMSIsInByaXZhdGUiOiJleUpqZEhraU9pSktWMVFpTENKbGJtTWlPaUpCTVRJNFEwSkRMVWhUTWpVMklpd2lZV3huSWpvaVpHbHlJbjAuLmdHRjFiZ0VYSTFRdUJFX2JKbUp4UmcuaHJmWUd5cEpMeDdERVBTdW9uWHFrdVkwSkhyNFIydURIVDNZaWlEVnQxWU9JOTNTSklRN3dBcmQ4RVZLN2dWSXBxRDd2ODI5QmRXb21DZGhhVUFhQ1RSdm9uNGZlV2NEOVRLb055TmUxeXZ3UFRiQmVJdFhONTZ2bVpCSmFqNGJFX0VuUW9QZFBaZzB4NVRBVmJ5c0VGdFlPMHNGMV9KckEyYzJqcVRBa0NQLVpGTndUV2ctTG9adU9DWHphUVIyeWdxc3hlZ2QyVWNRanRDc0N0MGN1cFMwalR1Si1YQXRySUZDT1RiQVNCNUxTaUJlNjkzV01DbjgySmpXSmJ1RF96eG9TT3QxQUU4eXVMdGhEdWx6UWxneDgxY1Z1dGZPWWxqdU9XN0k0dDYtdzMyMmdZUFpseEF4azhoc0dGLUV1ZU81TGQyX0k3QUNmTmZma3BiZzR5U2s4d05PWVo3a29pZ1dQWnQtSDNXTGNLQmhoeWxfYm9kWW1WMnJ1WVRQeU1mNE1mRmtQaWgzZEVZUFFhX252ZHFaSWhjeHhvS1FROW95NW5IZ3dsWnktZ2RtZDhxenpvenZUSUJzQ3Q1TmxMWVVVVjB5azFBQUFwSzlWNTYzTzcxSlFERV9IbC1UcF9UY3ZzNTZQMmt4elZKekJlazQ5NXNULXdiamdleUROQThsTlZHNFl2R1Y5MWdJRDRtY1VaZkZ0LTJwcFR1OVZJa0taWWxlQUxOOW9HcDVUZjJPQ0JpeEpfQWp6dmcyNFY4SWJWVzFvLVBMWDhLYTlHZy16Y1lVcFRXV3BqZERxb3NUUUUzX2owR2hFTk1BVDhzWFBuZFVGYmRkQzhQb0xuR0RYejE4Um5Zd2dLZzl4amRacTRKeE84b3FvVDhiMUFyeTA4TEZ2R05jcHJjU0ZiTDNLc3VqQUh5bEpPNWdCWEZDNHVkMUwyZHpEWGR5QzYtZk4tR3pCUEZZMVRxSGxldDc3ZGpFYVVxNkdRekpOa21pWVZpcmdwdnBfX0xVcWFnSWVCaVA5UlRCR1R2RW1LcUJlcUlJaU5BTGFmYm54Tlh3QUQ3SV9Bby5rbnpjbURKOEJJdS1pa3dvY01HeXVRIiwidXNlcl90eXBlIjoidXNlciIsInRva2VuX2lkIjoiQWFaM3IwTVdWbFl6bGpaalV0TVdWaE9TMDBZakZoTFRoaU1qWXRZekEyWW1JNE5qaGtNVEJtTkdOa01qSmhNRE10Wm1VMyIsInJlZmVyZW5jZV9pZCI6IjBjOTE3MmU0LTFhMjgtNGMzNC04ZmI4LTRhZGFjMzdiZDhhYiIsImlzcyI6Imh0dHBzOlwvXC9pZGJyb2tlci1iLXVzLndlYmV4LmNvbVwvaWRiIiwidXNlcl9tb2RpZnlfdGltZXN0YW1wIjoiMjAyMzA1MjYwNzQ2MDAuMTY5WiIsInJlYWxtIjoiYjY1N2ZjZjMtNmIwNi00NmE0LWFiMGUtZjIzZmNlYjdhNDQ3IiwiY2lzX3V1aWQiOiJiNzJiY2FmNi0zZjMwLTQ3YmEtODAzOC0zMzhkOGQwZTU3NzIiLCJ0b2tlbl90eXBlIjoiQmVhcmVyIiwiZXhwaXJ5X3RpbWUiOjE3MTU4MDkwNTI4MzcsImNsaWVudF9pZCI6IkM2NGFiMDQ2MzllZWZlZTQ3OThmNThlN2JjM2ZlMDFkNDcxNjFiZTBkOTdmZjBkMzFlMDQwYTZmZmU2NmQ3ZjBhIn0.PP_W4FjXPSTbLP2FJJ5Z1z59dQ1WIiZlQtKnW3V4giKJsHI6vxRyPZNArYxq0a1cWSrw2gi_UPRQH62PnztQLMsdHQ1ONVPBWtudkpOkiui1BNSca6Uyu3u2IEYt3Qvyer7wI5P2PDbkqkLlJ52Wh4G-BDYyxGJKgOTxtoAKLIbL8_BHWBCdkYGWi_APJYzkZhkYsBc_KksdMow92wGnCQnqNvs4wVn0ApzrUOtAVZZT-nIiA181oPmL5Tk7royyFlyH3csuR9hDb-G-u8KKszs5TqFF9_YbcKN7iXyUnXOM8OQ_kPDnuu4wenyTN_yUO4CZ5vlQo_9BP1AkZ7wGkQ"; + if (userType === "customer") { + access_token = "{CUSTOMER_ACCESS_TOKEN}"; } else { - access_token = 'eyJhbGciOiJSUzI1NiJ9.eyJjbHVzdGVyIjoiUDBBMSIsInByaXZhdGUiOiJleUpqZEhraU9pSktWMVFpTENKbGJtTWlPaUpCTVRJNFEwSkRMVWhUTWpVMklpd2lZV3huSWpvaVpHbHlJbjAuLlFoMzdWRW1PN05mVGhUdnVrRnpHUWcuelNkejVid1UxZlhwZkkxQU1xZUlMc1FuV2ZhYjQ4ZHp4NGc1TTNKaGtfblJtbUZpcXRJTjBmLUItYzBWWERmUmZ1VUt6T25NTU1iVWFHaXVqR1lJZUJnZmhUR0h2MVlNd01KdUxKeTJfTXRINm1HR1hZN3Z5TjR3UFFsMHBqSUVEMVplZkd2enRsUkFoVmhPdVRIM2FvZ2xwbG50YlJwWFJSYzA5a0dNRnh6ZldhbnZKRXBXalhwMlBKN3FtRU1YYlBpdkF4dF82Z3F6dGwweXZfdDV6MGkxOWRvTlhUX2hfUWp6djdCa0gtOXpKSENrRjZ4TWw3MnNSRGR6WmtyOTVyOXZnVjhuSVRqelFvQzA1SElPNk5Xb20tbnFYdzNENXVoRDc2T05jeU9LVTJwTE5pSkpPUDdvZ25TVERCX0tuQXRRT29GSHVDT0ptN1pNYWkwZUJyajRGNnZpUlZRbkJ0ZlZGTjBtaTRBY3BFWVlTS3ZYeHVpZVNzWXNna1p3QWRSVUU5eHl1RFpfMFVESlRfdjNfTkZNMUs3NzJNOEpCcUNPSzVVVXR4M2I2LTZqa1dWRUpPZkFkSmNGb05DeWdzV25PcnZ1UHRhWWFCdmI3Zl8xWm5MVUdLZjh1SXhDa1BQaC1fRVZwRlliSlpJSFNMbVFpSFAzc1FjUFFLcnkwQlFESFg5XzlCeXRWRkhvdmp0eVI3VVhfUmkxNHA1ellIcXlfOThVTXFKTWVmV3hHX1Y5UzBOc3ZqZmFMUkFXSTdGME5sN0dMVmVhaGhFZmdZN0xMWXFwV1NJTWZpbmlTc2k0WG5oRGNPWU9vNmFSR2RCSW9Ia3pIcGxYa0ZrT3NhcFpXM1NkNmp1UFV0TXlZNmljaTFKOGd3eEs5V016VTRMT2h5NHBQRXlvUjdnRTJkRGs1UXJpbmoxVkp0ZWpmbC1Xemw2V3AySlZuV3FmV05yQjVuT2QzU1hkZUQ5cVFOUGF5RDFjSThVTmlUZU81R0x2UzA0NmFxS0FuV3ZENFBTeThDUzlvNFVfZkdmbTB6Rm1aRDVzUXhxRzloVlhaQ0drUGI0eXJKZy5jeGE4bFZTRC1DUGVvVGpBZG9ja2V3IiwidXNlcl90eXBlIjoidXNlciIsInRva2VuX2lkIjoiQWFaM3IwTkRVellqSmtPV010WmpKaE15MDBNemM0TFdFeFpXUXRPVGd4TVdJeE1tSm1NMkU0TXpCalpqRXdORGt0TVRBeSIsInJlZmVyZW5jZV9pZCI6ImI5MTA0ZWFiLWFhNWEtNDI4MC04MjAxLTRhYWE3YzcxYjhkOSIsImlzcyI6Imh0dHBzOlwvXC9pZGJyb2tlci1iLXVzLndlYmV4LmNvbVwvaWRiIiwidXNlcl9tb2RpZnlfdGltZXN0YW1wIjoiMjAyMzA2MDkxMDAyNDQuMzgyWiIsInJlYWxtIjoiYjY1N2ZjZjMtNmIwNi00NmE0LWFiMGUtZjIzZmNlYjdhNDQ3IiwiY2lzX3V1aWQiOiIwM2NmOWQzNC02ZGE5LTQxNTctYmRlZS1iODg0NzQ3Zjk1Y2IiLCJ0b2tlbl90eXBlIjoiQmVhcmVyIiwiZXhwaXJ5X3RpbWUiOjE3MTU4MDg5NjAyOTMsImNsaWVudF9pZCI6IkM2NGFiMDQ2MzllZWZlZTQ3OThmNThlN2JjM2ZlMDFkNDcxNjFiZTBkOTdmZjBkMzFlMDQwYTZmZmU2NmQ3ZjBhIn0.aJ_JzMqlSSA8s3IGU8_R-FPmVFmvbqkwUNOIR6o-gc9l6IkNPaczsyfjGvovkAtmHISPJRNxnq0Qfgam9fCKkDPwJH173uN1jNkm_baJ7qmin-1SrCKazM1xzfxNdv5FABO6kZEa1RBcF0238-soJ5Dbc-bVEsNZHNSX0rklKJLh6ediY2Fs1Bk4hhlkrgLf_ZPJslOVO_DaG2t6lnHA6x_ohwMbZKL9LZNrkhu7UDGdu5UnmjpYnCtUNZb2zjRm9R2iNxXiwobGaVpKea_84FvhNUvmI2yhqu1Itz8zQNxQHbT7QSRLS1uZpGR9-2T_x6Ra2OItoJ1Rza2vcnm04w'; + access_token = "{AGENT_ACCESS_TOKEN}"; } - + const webexConfig = { config: { logger: { @@ -130,91 +153,89 @@ function getWebexConfig(userType) { }; return webexConfig; -} +} function getCallingConfig() { - const clientConfig = { - calling: true, - callHistory: true, - }; - - const loggerConfig = { - level: "info", - }; - - const serviceData = { indicator: "calling", domain: "" }; - - const callingClientConfig = { - logger: loggerConfig, - discovery: { - region: "", - country: "", - }, - serviceData, - }; - - const callingConfig = { - clientConfig: clientConfig, - callingClientConfig: callingClientConfig, - logger: loggerConfig, - }; - - return callingConfig; + const clientConfig = { + calling: true, + callHistory: true, + }; + + const loggerConfig = { + level: "info", + }; + + const serviceData = { indicator: "calling", domain: "" }; + + const callingClientConfig = { + logger: loggerConfig, + discovery: { + region: "", + country: "", + }, + serviceData, + }; + + const callingConfig = { + clientConfig: clientConfig, + callingClientConfig: callingClientConfig, + logger: loggerConfig, + }; + + return callingConfig; } function openCallWindow(num) { - if (num === '5007') { - agentNumpad.classList.add('hidden'); - secondCallNotification.toggle(); - } else { - callNotification.toggle(); - } + if (num === "5007") { + agentNumpad.classList.add("hidden"); + secondCallNotification.toggle(); + } else { + callNotification.toggle(); + } } function openKeypad() { - agentNumpad = document.getElementById('agent-numpad'); - agentNumpad.classList.contains('show') ? agentNumpad.classList.remove('show') : agentNumpad.classList.add('show'); + agentNumpad = document.getElementById("agent-numpad"); + agentNumpad.classList.contains("show") + ? agentNumpad.classList.remove("show") + : agentNumpad.classList.add("show"); } function closeCallWindow() { - callNotification.toggle("close"); - secondCallNotification.toggle("close"); + callNotification.toggle("close"); + secondCallNotification.toggle("close"); } function updateBtnText(btnType) { - switch (btnType.innerText) { - case "Mute": - btnType.innerText = "Unmute"; - break; - case "Unmute": - btnType.innerText = "Mute"; - break; - case "Hold": - btnType.innerText = "Resume"; - break; - case "Resume": - btnType.innerText = "Hold"; - break; - default: - console.log("No case matched"); - } + switch (btnType.innerText) { + case "Mute": + btnType.innerText = "Unmute"; + break; + case "Unmute": + btnType.innerText = "Mute"; + break; + case "Hold": + btnType.innerText = "Resume"; + break; + case "Resume": + btnType.innerText = "Hold"; + break; + default: + console.log("No case matched"); + } } - + function renderCallHistoryItem(call) { - const avatarInitial = "Harvey Specter".charAt(0).toUpperCase(); - const directionIcon = - call.direction === "OUTGOING" ? "fa-arrow-up" : "fa-arrow-down"; - const callDate = new Date(call.startTime).toLocaleDateString(); - - return ` + const avatarInitial = "Harvey Specter".charAt(0).toUpperCase(); + const directionIcon = + call.direction === "OUTGOING" ? "fa-arrow-up" : "fa-arrow-down"; + const callDate = new Date(call.startTime).toLocaleDateString(); + + return `
${avatarInitial}
-
${ - call.other.name === "Priya Kesari" - ? "Harvey Specter" - : "Jane Doe" - }
+
${call.other.name}
${call.other.phoneNumber}
@@ -227,71 +248,74 @@ function renderCallHistoryItem(call) {
`; } - + function showHideCallHistory() { - var container = document.querySelectorAll(".call-history-container")[0]; - - if (container.classList.contains("visible")) { - container.classList.remove("visible"); - container.style.height = "40px"; - } else { - container.classList.add("visible"); - container.style.height = "30rem"; - } + var container = document.querySelectorAll(".call-history-container")[0]; + + if (container.classList.contains("visible")) { + container.classList.remove("visible"); + container.style.height = "40px"; + } else { + container.classList.add("visible"); + container.style.height = "30rem"; + } } - + function renderCallHistory(callHistoryData) { - const callHistoryList = document.getElementById("callHistoryList"); - let callHistoryHTMLHeader = ` + const callHistoryList = document.getElementById("callHistoryList"); + let callHistoryHTMLHeader = `
Call History
`; - let callHistoryHTML = callHistoryData.map(renderCallHistoryItem).join(""); - callHistoryList.innerHTML = callHistoryHTMLHeader + callHistoryHTML; - callHistoryList.classList.add("show-history"); + let callHistoryHTML = callHistoryData.map(renderCallHistoryItem).join(""); + callHistoryList.innerHTML = callHistoryHTMLHeader + callHistoryHTML; + callHistoryList.classList.add("show-history"); } -function updateAvailability(){ - profileOnline.classList.add('online'); +function updateAvailability() { + profileOnline.classList.add("online"); } - + document.querySelector(".dropbtn").addEventListener("click", (event) => { - if (profileDropDown.classList.contains("show")) { - profileDropDown.classList.remove("show"); - } else { - profileDropDown.classList.add("show"); - } - event.stopPropagation(); + if (profileDropDown.classList.contains("show")) { + profileDropDown.classList.remove("show"); + } else { + profileDropDown.classList.add("show"); + } + event.stopPropagation(); }); - - // Close the dropdown menu if the user clicks outside of it + +// Close the dropdown menu if the user clicks outside of it window.onclick = () => { - profileDropDown.classList.remove("show"); + profileDropDown.classList.remove("show"); }; -document.addEventListener('DOMContentLoaded', function () { - var tooltipTriggers = document.querySelectorAll('.tooltip-trigger'); - var tooltip = document.querySelector('.tooltip-calling'); - - tooltipTriggers.forEach(function(trigger) { - trigger.addEventListener('mouseover', function() { - var tooltipText = this.getAttribute('data-tooltip'); - tooltip.textContent = tooltipText; - - var triggerRect = this.getBoundingClientRect(); - var tooltipRect = tooltip.getBoundingClientRect(); - - tooltip.style.left = (triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + 10) + 'px'; - tooltip.style.top = triggerRect.top - tooltipRect.height - 25 + 'px'; // 10px for a little space above the tooltip - - tooltip.classList.add('show-tooltip'); - }); - - trigger.addEventListener('mouseout', function() { - tooltip.classList.remove('show-tooltip'); - }); +document.addEventListener("DOMContentLoaded", function () { + var tooltipTriggers = document.querySelectorAll(".tooltip-trigger"); + var tooltip = document.querySelector(".tooltip-calling"); + + tooltipTriggers.forEach(function (trigger) { + trigger.addEventListener("mouseover", function () { + var tooltipText = this.getAttribute("data-tooltip"); + tooltip.textContent = tooltipText; + + var triggerRect = this.getBoundingClientRect(); + var tooltipRect = tooltip.getBoundingClientRect(); + + tooltip.style.left = + triggerRect.left + + (triggerRect.width - tooltipRect.width) / 2 + + 10 + + "px"; + tooltip.style.top = triggerRect.top - tooltipRect.height - 25 + "px"; // 10px for a little space above the tooltip + + tooltip.classList.add("show-tooltip"); }); -}); + trigger.addEventListener("mouseout", function () { + tooltip.classList.remove("show-tooltip"); + }); + }); +}); diff --git a/sdk/calling-sdk.js b/sdk/calling-sdk.js index 33cfc3b..a1361a5 100644 --- a/sdk/calling-sdk.js +++ b/sdk/calling-sdk.js @@ -1,4 +1,3 @@ - // Globals let calling; let callingClient; @@ -9,224 +8,234 @@ let call; let incomingCall; let localAudioStream; -const makeCallBtn = document.querySelector('.call-support-btn'); -const muteBtn = document.getElementById('mute-unmute-btn'); -const holdBtn = document.getElementById('hold-resume-btn'); +const makeCallBtn = document.querySelector(".call-support-btn"); +const muteBtn = document.getElementById("mute-unmute-btn"); +const holdBtn = document.getElementById("hold-resume-btn"); -const callNotifyEvent = new CustomEvent('line:incoming_call', { - detail: { - callObject: call, - }, +const callNotifyEvent = new CustomEvent("line:incoming_call", { + detail: { + callObject: call, + }, }); // Step 1: Initialize Calling, pass calling config with relevant values to setup different clients available in the Calling SDK // Step 2: Fetch the calling client, fetch the lines created for the user whose access token has been shared and register the line async function initCalling(userType) { - const webexConfig = getWebexConfig(userType); - const callingConfig = getCallingConfig(); - - // Initializing Calling - calling = await Calling.init({ webexConfig, callingConfig }); - - try { - - // Listen for ready event to identify if calling is ready - calling.on("ready", () => { - // register with webex calling - calling.register().then(async () => { - - // Fetch the calling client - callingClient = window.callingClient = calling.callingClient; - - // Fetch lines - line = Object.values(callingClient?.getLines())[0]; - - // Trigger Line Registration - setupLineListeners(); - line.register(); - - if (userType === "agent") { - if (window.callHistory === undefined) { - callHistory = window.callHistory = calling.callHistoryClient; - callHistory.on( - "callHistory:user_recent_sessions", - (sessionData) => { - console.log( - "Users recent session data : ", - sessionData.data.userSessions.userSessions[0] - ); - } - ); - - const numberOfDays = 7, - callHistoryLimit = 20, - callHistorySort = "ASC", - callHistorySortBy = "startTime"; - - const callHistoryResponse = await callHistory.getCallHistoryData( - numberOfDays, - callHistoryLimit, - callHistorySort, - callHistorySortBy + const webexConfig = getWebexConfig(userType); + const callingConfig = getCallingConfig(); + + // Initializing Calling + calling = await Calling.init({ webexConfig, callingConfig }); + + try { + // Listen for ready event to identify if calling is ready + calling.on("ready", () => { + // register with webex calling + calling.register().then(async () => { + // Fetch the calling client + callingClient = window.callingClient = calling.callingClient; + + // Fetch lines + line = Object.values(callingClient?.getLines())[0]; + + // Trigger Line Registration + setupLineListeners(); + line.register(); + + if (userType === "agent") { + if (window.callHistory === undefined) { + callHistory = window.callHistory = calling.callHistoryClient; + callHistory.on( + "callHistory:user_recent_sessions", + (sessionData) => { + console.log( + "Users recent session data : ", + sessionData.data.userSessions.userSessions[0] ); - - renderCallHistory(callHistoryResponse.data.userSessions); } - } - }); - }); - } catch (err) { - console.log("DEMO: failed to finish initCalling", err); - } + ); + + const numberOfDays = 7, + callHistoryLimit = 20, + callHistorySort = "ASC", + callHistorySortBy = "startTime"; + + const callHistoryResponse = await callHistory.getCallHistoryData( + numberOfDays, + callHistoryLimit, + callHistorySort, + callHistorySortBy + ); + + renderCallHistory(callHistoryResponse.data.userSessions); + } + } + }); + }); + } catch (err) { + console.log("SDK: failed to finish initCalling", err); + } } // Step 3: Setup listeners on the registered line function setupLineListeners() { - try { - line.on('registered', (lineInfo) => { - line = lineInfo; - updateAvailability(); - }); - - // Start listening for incoming calls - line.on('line:incoming_call', (callObj) => { - openCallNotification(callObj); - incomingCall = callObj; - }); - } catch (err) { - console.log("DEMO: Failed while setting up line listeners"); - } + try { + line.on("registered", (lineInfo) => { + line = lineInfo; + updateAvailability(); + }); + + // Start listening for incoming calls + line.on("line:incoming_call", (callObj) => { + openCallNotification(callObj); + incomingCall = callObj; + }); + } catch (err) { + console.log("SDK: Failed while setting up line listeners"); + } } - - // Create microphone stream which will be used as local audio stream for calls async function getMediaStreams() { - try { - const localAudioElem = document.getElementById('local-audio'); - localAudioStream = await Calling.createMicrophoneStream({audio: true}); - - localAudioElem.srcObject = localAudioStream.outputStream; - } catch (err) { - console.log("DEMO: failed to get media"); - } + try { + const localAudioElem = document.getElementById("local-audio"); + localAudioStream = await Calling.createMicrophoneStream({ audio: true }); + + localAudioElem.srcObject = localAudioStream.outputStream; + } catch (err) { + console.log("SDK: failed to get media"); + } } // Step 5: Create a call instance, get the stream and initiate an outbound call. Setup call listeners are the same time to the call progressing different states async function initiateCall(number) { - try { - const destination = { - value: number - }; - openCallWindow(number); - await getMediaStreams(); - - // Create call object - call = line.makeCall({ - type: 'uri', - address: destination.value, - }); - - call.on('caller_id', (CallerIdEmitter) => { - updateCallerId(CallerIdEmitter); - }); - - call.on('progress', (correlationId) => { - // Add ringback on progress - }); - - call.on('connect', (correlationId) => { - if(number === "5007"){ - secondCallNotification.startTimer(); - secondCallNotification.enableCompleteTransfer(); - } - else{ - if(window.location.href.includes('mytrips')){ - callNotification.startTimer(); - } - } - }); - - call.on('remote_media', (track) => { - document.getElementById('customer-remote-audio').srcObject = new MediaStream([track]); - }); - - call.on('disconnect', (correlationId) => { - closeCallWindow(); - }); - - call.dial(localAudioStream); - } catch (err) { - console.log("DEMO: Failed in initiating call"); - } + try { + const destination = { + value: number, + }; + openCallWindow(number); + await getMediaStreams(); + + // Create call object + call = line.makeCall({ + type: "uri", + address: destination.value, + }); + + call.on("caller_id", (CallerIdEmitter) => { + updateCallerId(CallerIdEmitter); + }); + + call.on("progress", (correlationId) => { + // Add ringback on progress + }); + + call.on("connect", (correlationId) => { + if (number === "5007") { + secondCallNotification.startTimer(); + secondCallNotification.enableCompleteTransfer(); + } else { + if (window.location.href.includes("mytrips")) { + callNotification.startTimer(); + } + } + }); + + call.on("remote_media", (track) => { + document.getElementById("customer-remote-audio").srcObject = + new MediaStream([track]); + }); + + call.on("disconnect", (correlationId) => { + closeCallWindow(); + }); + + // Initiate an outbound call + call.dial(localAudioStream); + } catch (err) { + console.log("SDK: Failed in initiating call"); + } } // Step 6: Fetch the call instance from the call notification, setup call listeners, create media stream and answer the incoming call async function answerCall() { - try { - fetchCallerBooking(); - - await getMediaStreams(); - - incomingCall.answer(localAudioStream); - callNotification.startTimer(); - - incomingCall.on('caller_id', (CallerIdEmitter) => { - callerName.innerText = 'Harvey Spector'; - callerNumber.innerText = CallerIdEmitter.callerId.num; - }); - - incomingCall.on('remote_media', (track) => { - document.getElementById('agent-remote-audio').srcObject = new MediaStream([track]); - }); - - - incomingCall.on('disconnect', (correlationId) => { - closeCallWindow(); - }); - } catch (err) { - console.log("DEMO: failed to answer the call."); - } + try { + fetchCallerBooking(); + + await getMediaStreams(); + + //Accept incoming call + incomingCall.answer(localAudioStream); + callNotification.startTimer(); + + incomingCall.on("caller_id", (CallerIdEmitter) => { + callerName.innerText = "Harvey Spector"; + callerNumber.innerText = CallerIdEmitter.callerId.num; + }); + + incomingCall.on("remote_media", (track) => { + document.getElementById("agent-remote-audio").srcObject = new MediaStream( + [track] + ); + }); + + incomingCall.on("disconnect", (correlationId) => { + closeCallWindow(); + }); + } catch (err) { + console.log("SDK: failed to answer the call."); + } } // Step 7: Put the call on hold and resume back function holdResume() { - try { - incomingCall.doHoldResume(); - callNotification.holdToggle(); - } catch (err) { - console.log("DEMO: Failed in hold/resume"); - } + try { + incomingCall.doHoldResume(); + callNotification.holdToggle(); + } catch (err) { + console.log("SDK: Failed in hold/resume"); + } } // Step 8: Disconnect the call function disconnectCall() { - try { - call.end(); - closeCallWindow(); - } catch (err) { - console.log("DEMO: failed to disconnect the call"); - } + try { + call.end(); + closeCallWindow(); + } catch (err) { + console.log("SDK: failed to disconnect the call"); + } } - // STEP 1-6 are the same. // Step 7: Initiate the call transfer by putting the existing call on hold and initiating new call with transfer target function initiateTransfer() { + try { holdResume(); callNotification.transferToggle(); openKeypad(); + } catch (err) { + console.log("SDK: failed to hold transferee or open dialpad"); + } } // Step 8: Finish the consult transfer by connecting the caller with the transfer target function commitConsultTransfer() { - incomingCall.completeTransfer('CONSULT', call.getCallId(), undefined); + try { + incomingCall.completeTransfer("CONSULT", call.getCallId(), undefined); callNotification.toggle(); secondCallNotification.toggle(); + } catch (err) { + console.log("SDK: failed to complete transfer"); + } } // Mute or unmute the call function toggleMute() { + try { incomingCall.mute(localAudioStream); callNotification.muteToggle(); + } catch (err) { + console.log("SDK: failed to mute/unmute"); + } } diff --git a/sdk/demo.js b/sdk/demo.js deleted file mode 100644 index da11bab..0000000 --- a/sdk/demo.js +++ /dev/null @@ -1,220 +0,0 @@ -// Globals -let calling; -let callingClient; -let correlationId; -let callHistory; -let line; -let call; -let incomingCall; -let localAudioStream; - -const makeCallBtn = document.querySelector('.call-support-btn'); -const muteBtn = document.getElementById('mute-unmute-btn'); -const holdBtn = document.getElementById('hold-resume-btn'); - -const callNotifyEvent = new CustomEvent('line:incoming_call', { - detail: { - callObject: call, - }, -}); - -// Demo Flow 1 -// Step 1: Initialize Calling, pass calling config with relevant values to setup different clienets available in Calling SDK -// Step 2: Fetch the calling client and fetch the lines created for the user whose access token has been shared and register the line -async function initCalling(userType) { - const webexConfig = getWebexConfig(userType); - const callingConfig = getCallingConfig(); - - // Initializing Calling - calling = await Calling.init({ webexConfig, callingConfig }); - - - try { - calling.on("ready", () => { - // register webex calling - calling.register().then(async () => { - - // Fetch the calling client - callingClient = window.callingClient = calling.callingClient; - - // Fetch lines - line = Object.values(callingClient?.getLines())[0]; - - // Trigger Line Registration - setupLineListeners(); - line.register(); - - if (userType === "agent") { - if (window.callHistory === undefined) { - callHistory = window.callHistory = calling.callHistoryClient; - callHistory.on( - "callHistory:user_recent_sessions", - (sessionData) => { - console.log( - "Users recent session data : ", - sessionData.data.userSessions.userSessions[0] - ); - } - ); - - const numberOfDays = 7, - callHistoryLimit = 20, - callHistorySort = "ASC", - callHistorySortBy = "startTime"; - - const callHistoryResponse = await callHistory.getCallHistoryData( - numberOfDays, - callHistoryLimit, - callHistorySort, - callHistorySortBy - ); - - renderCallHistory(callHistoryResponse.data.userSessions); - } - } - }); - }); - } catch (err) { - console.log("DEMO: failed to finish initCalling", err); - } -} - -// Step 3: Setup listeners on the registered line -function setupLineListeners() { - try { - line.on('registered', (lineInfo) => { - line = lineInfo; - }); - - // Start listening for incoming calls on the line - line.on('line:incoming_call', (callObj) => { - openCallNotification(callObj); - incomingCall = callObj; - }); - } catch (err) { - console.log("DEMO: Failed while setting up line listeners"); - } -} - -// Step 4: Create the microphone stream to be used on the call. -async function getMediaStream() { - try { - const localAudioElem = document.getElementById('local-audio'); - localAudioStream = await Calling.createMicrophoneStream({audio: true}); - - localAudioElem.srcObject = localAudioStream.outputStream; - } catch (err) { - console.log("DEMO: failed to get media"); - } -} - -// Step 5: Create a call instance, get the stream and initiate an outbound call. Setup call listeners are the same time to the call progressing different states -async function initiateCall(number) { - try { - const destination = { - value: number - }; - openCallWindow(); - await getMediaStreams(); - - // Create call object - call = line.makeCall({ - type: 'uri', - address: destination.value, - }); - - call.on('caller_id', (CallerIdEmitter) => { - updateCallerId(CallerIdEmitter); - }); - - call.on('progress', (correlationId) => { - // Add ringback on progress - }); - - call.on('connect', (correlationId) => { - callWindowHeaderTimer.start(); - }); - - call.on('remote_media', (track) => { - document.getElementById('customer-remote-audio').srcObject = new MediaStream([track]); - }); - - call.on('disconnect', (correlationId) => { - closeCallWindow(); - }); - - call.dial(localAudioStream); - } catch (err) { - console.log("DEMO: Failed in initiating call"); - } -} - -// Step 6: Fetch the call instance from the call notification, setup call listeners, create media stream and answer the incoming call -async function answerCall () { - try { - callNotification.toggle(); - swapDivs(); - openCallWindow(); - callWindowHeaderTimer.start(); - - await getMediaStreams(); - - incomingCall.answer(localAudioStream); - - incomingCall.on('caller_id', (CallerIdEmitter) => { - callerName.innerText = 'Harvey Spector'; - callerNumber.innerText = CallerIdEmitter.callerId.num; - }); - - incomingCall.on('remote_media', (track) => { - document.getElementById('agent-remote-audio').srcObject = new MediaStream([track]); - }); - - - incomingCall.on('disconnect', (correlationId) => { - closeCallWindow(); - }); - } catch (err) { - console.log("DEMO: failed to answer the call."); - } -} - -// Step 7: Put the call on hold and resume back -function holdResume() { - try { - incomingCall.doHoldResume(); - updateBtnText(holdBtn); - } catch (err) { - console.log("DEMO: Failed in hold/resume"); - } -} - -// Step 8: Disconnect the call -function disconnectCall() { - try { - call.end(); - closeCallWindow(); - } catch (err) { - console.log("DEMO: failed to disconnect the call"); - } -} - -// Demo Flow 2 -// STEP 1-6 are the same. -// Step 7: Initiate the call transfer by putting the existing call on hold and initiating new call with transfer target -function initiateTransfer() { - holdResume(); - openKeypad(); -} - -// Step 8: Finish the consult transfer by connecting the caller with the transfer target -function commitConsultTransfer() { - incomingCall.completeTransfer('CONSULT', call.getCallId(), undefined); -} - -// Mute or unmute the call -function toggleMute() { - incomingCall.mute(localAudioStream); - updateBtnText(muteBtn); -} - diff --git a/w3layouts-License.txt b/w3layouts-License.txt deleted file mode 100644 index 9f18860..0000000 --- a/w3layouts-License.txt +++ /dev/null @@ -1,55 +0,0 @@ -/* -A Design by W3Layouts -Author: W3layouts -Author URL: http://w3layouts.com -License: Creative Commons Attribution 3.0 Unported -License URL: http://creativecommons.org/licenses/by/3.0/ -*/ ----------------------------------- -NOTE : FREQUENTLY ASKED QUESTIONS ----------------------------------- - -1. What is W3layouts? - - W3layouts is an initiative of AgileITs to provide free web designs which are cross device supported. - -2. Is W3layouts Templates Really Free? - - Yes, all our templates free to use for both commercial and non-commercial, but you have provide a back link to w3layouts.com which is already included in footer design by w3layouts.com don’t edit or remove it. - -3. I want to Help W3layouts, How can I? - - You can help w3layouts By - 1. Donate Some $’s, Any Amount your wish - 2. Contribute Design inventory like stock photos, Icons or PSD designs with full rights to w3layouts - -4. I want to remove w3layouts.com back link from footer? - - We have two plans for that per template and unlimited. - Donate us $10 per template. If you want templates for multiple domains or bulk templates please contact support@w3layouts.com - -5. Will these templates work on iPhone, Android platforms, Tabs like kindle and Ipads? - - Yes, w3layouts templates work with all Smartphones and Tablets. To, support all the devices we are providing bootstrap Responisve designs WEB Template. - -6. What is Web Template? - - WEB template is a responsive design which can be used for desktop users. Users visiting website from desktop browsers can view WEB template - - -7. Do I need a separate version for Smartphones and Tablets? - - No, WEB Template is compatible in all web browsers, Smartphones and Tablets. - -8. Do I need any database? - - No, it is not necessary. - -9. Do you provide WordPress Themes? - - Yes, we are working on it. Check WPMthemes.com - -10. Under which license you are providing these templates? - - W3layouts templates are under Creative Commons Attribution 3.0 unported -