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()) with allowFramedSoftphone: 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>
                

<!-- CYARA LIVEVQ -->
<script src="cyara/cyara-livevq.js" async></script>
<!-- CYARA LIVEVQ UI-->
<script src="cyara/ui/cyara-livevq-ui.bundle.js" async></script>
                

<!-- CYARA LIVEVQ -->
import'@cyaradesign/cyara-livevq-sdk';
                

<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>
                

<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>
                

<!-- CYARA STREAMS INJECTOR WHITEBOX -->
<script type="text/javascript" src="cyara/injector-amazon-connect-white.js?20201231" defer></script>