Paremeters prefixed with 'km:' will use Knowledge Management using the {contentID}(migratableReference)/{lang}. For example, integrationCardDoc=km:DvudRWR4yd2iRSDtlboDp8/en-US.

name	description
ani	Automatic Number Identification
dnis	Dialed Number Identification Service
queue	Queue the Call was in before it was delivered to the agent
direction	INBOUND, OUTBOUND etc.
channel	AmazonConnect etc.
type	Voice, Voicemail etc.
transferSummary	Mock of Transfer Summary
integrationCardTitle	Title over Integration card
integrationCardDoc	HTML document for contents of integration card
crsScore	Call Risk Score (0-100)
authenticated	Authenticated in IVA/IVR (true/false)

Installing into an Innovation Lab

Prerequisites

Make sure npm is installed and node us up to date

sudo apt update
sudo apt install -y npm
sudo npm install -g n
sudo n stable
hash -r

Build the project

Clone this project, install and build.

cd /opt/em/projects/current/demo/static
git clone https://git.mortons.site/verint.com/ca_vue_apps.git
cd ca_vue_apps
npm install
touch .env

Edit the .env file to hold the Channel Automation api username & password we cannot use the '__Host-VRNTOTCT' cookie because it is HttpOnly and not passed to browser side javascript. So we use the oidc-token-service to grant us a token using username/password.

// file .env
VITE_API_USERNAME=apiclient
VITE_API_PASSWORD=apiclient
ASSET_URL=/ca_vue_apps

Build the distribution

npm run build

The 'static' directory is already served by Apache so this Application is now available. Configure the Web Integration URL to use it. See Screenshot below:

Development

Install

npm install

Running

List options using:

npm run

Overrided API Values using a .env file. For example:

VITE_API_ORIGIN=https://em20.verint.live
VITE_API_USERNAME=apiclient
VITE_API_PASSWORD=apiclient

CORS Work Around

When developing this on localhost against Channel Automation APIs hosted elsewhere, you will need to apply a work around for CORS because the preflight check will fail with a 401 Not Authorized error.

The fix is to use Apache Rewrite on the API host server to respond OK to the preflight check. For example, with 'tenant-properties-service' API:

<Location /tenant-properties-service>
         ProxyPass https://${HOSTNAME}:8312/tenant-properties-service
         ProxyPassReverse https://${HOSTNAME}:8312/tenant-properties-service

         // The following lines allow for un-'Authorization' header
         // preflight checks to pass
         RewriteEngine On
         RewriteCond %{REQUEST_METHOD} OPTIONS
         RewriteRule ^(.*)$ /blank.html [QSA,L]
</Location>

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

Disable the built-in TypeScript Extension
1. Run Extensions: Show Built-in Extensions from VSCode's command palette
2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
Reload the VSCode window by running Developer: Reload Window from the command palette.

README.md

Example Vue Applications

Example Routes

/debug

/telephonyContext

Parameters