Agent API Integration
Integration
Available as an NPM package, access to be provided by Cyara.
npm i @cyaradesign/cyara-livevq-sdk
e.g.
├── index.html ├── connect-streams-min.js ├── connect-rtc.min.js ├── cover.css ├── css │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map ├── cyara │ ├── cyara-livevq.js │ └── ui │ ├── cyara-livevq-ui.bundle.js │ └── assets │ ├── base-health-hover-down.png │ ├── base-health-hover-up.png │ ├── base-health-pressed-down.png │ ├── base-health-pressed-up.png │ ├── base-health-static.png │ ├── base-health.png │ ├── base-hover-down.png │ ├── base-hover-up.png │ ├── base-pressed-down.png │ ├── base-pressed-up.png │ ├── base-static.png │ ├── base.png │ ├── good-hover-down.png │ ├── good-hover-up.png │ ├── good-pressed-down.png │ ├── good-pressed-up.png │ ├── good-static.png │ ├── material-icons.woff2 │ ├── ok-hover-down.png │ ├── ok-hover-up.png │ ├── ok-pressed-down.png │ ├── ok-pressed-up.png │ ├── ok-static.png │ ├── poor-hover-down.png │ ├── poor-hover-up.png │ ├── poor-pressed-down.png │ ├── poor-pressed-up.png │ └── poor-static.png ├── img │ ├── AssureBankLogoBlackLarge.png │ └── AssureBankLogoWhiteLarge.png ├── js │ ├── bootstrap.bundle.min.js │ └── bootstrap.bundle.min.js.map ├── favicon.ico └── robots.txt
Amazon Connect
Initialise Amazon Connect CCP
Load both the streams library and the rtc library from Amazon Connect repositories
<script defer type="text/javascript" src="connect-rtc.min.js"></script> <script defer type="text/javascript" src="connect-streams-min.js"></script>
Amazon Connect Streams >>
Amazon Connect RTC >>
Following best practices from Amazon on how to initialise CCP while enabling StreamJS integration by using the following parameters to ensure you can integrate with LiveVQ.
- Replace the softphone parameter (within the second parameter of
connect.core.initCCP()
) withallowFramedSoftphone: false
- After initCCP, add
connect.core.initSoftphoneManager({allowFramedSoftphone: true});
to allow your page to handle softphone calls with the connect-rtc-js loaded by your page. - Add an HTML element to your web page
<audio id="remote-audio" autoplay></audio>
. Streams will find this element and inject it into RTC to play downstream audio through this element.
// initialize the ccp connect.core.initCCP(uiCcp, { ccpUrl: instanceURL, // REQUIRED loginPopup: true, // optional, defaults to `true` loginPopupAutoClose: true, loginOptions: { // optional, if provided opens login in new window autoClose: true, // optional, defaults to `false` height: 600, // optional, defaults to 578 width: 400, // optional, defaults to 433 top: 0, // optional, defaults to 0 left: 0 // optional, defaults to 0 }, // region: "eu-central-1", // REQUIRED for `CHAT`, optional otherwise softphone: { // optional allowFramedSoftphone: false, // optional // disableRingtone: false, // optional // ringtoneUrl: "./ringtone.mp3" // optional } }); connect.core.initSoftphoneManager({ allowFramedSoftphone: true });
<main role="main" class="inner cover">
<div id="uiCcp" style="width: 400px;height: 500px; margin: auto;"></div>
<audio id="remote-audio" autoplay></audio>
</main>
Include LiveVQ in the HEAD
<!-- CYARA LIVEVQ --> <script src="cyara/cyara-livevq.js" async></script> <!-- CYARA LIVEVQ UI--> <script src="cyara/ui/cyara-livevq-ui.bundle.js" async></script>
or import
the LiveVQ module
<!-- CYARA LIVEVQ --> import'@cyaradesign/cyara-livevq-sdk';
This will make the variable CyaraLiveVq
available globally.
Ensure this is loaded before Amazon Connect Streams and RTC libraries.
Initialise LiveVQ API (blackbox)
<script> // Setup Cyara LiveVQ SDK CyaraLiveVq.SetKey('type','aws'); // Blackbox mode is default CyaraLiveVq.Aws.Region = 'your-aws-region'; CyaraLiveVq.Aws.Instance = 'your-aws-instance'; CyaraLiveVq.Aws.Domain = 'awsapps.com'; CyaraLiveVq.Initialize(<Gateway>, <AppId>, <Key>); </script>
Initialise LiveVQ API (whitebox)
<script> // Setup Cyara LiveVQ SDK CyaraLiveVq.SetKey('type','aws'); CyaraLiveVq.SetKey('mode','whitebox'); CyaraLiveVq.Aws.Region = 'your-aws-region'; CyaraLiveVq.Aws.Instance = 'your-aws-instance'; CyaraLiveVq.Aws.Domain = 'awsapps.com'; CyaraLiveVq.Initialize(<Gateway>, <AppId>, <Key>); </script>
ensuring you have also loaded your own custom injector file based on the example.
<!-- CYARA STREAMS INJECTOR WHITEBOX --> <script type="text/javascript" src="cyara/injector-amazon-connect-white.js?20201231" defer></script>
Comments
0 comments
Please sign in to leave a comment.