This custom widget provides Agents/Supervisors with the ability to:

• Set the Caller ID before starting an outbound voice interaction, transferring to, or consulting an external number, utilizing the Workspaces Widget Framework methods.

💡 This sample application is provided for demonstration purposes only and is not intended for production use. We assume no responsibility for any issues arising from its use.

The widget primarily uses AXP Admin - Voice APIs, alongside the Workspaces Widget Framework SDK.

• onDataEvent("onAgentStateEvent", callback): Subscribe to changes in the Agent's state (logged in, ready, not ready, etc.).
• getConfiguration().user: Retrieve the full logged-in Agent configuration.
• getCapabilities(): Determine if the Agent can use VOICE channels.

• Authorization: Acquire an access token for all API calls.
• List Phone Numbers: Retrieve available administered phone numbers.

The widget comprises two components: the widget itself (bundles.js) and a backend component for authorization and proxying Admin API requests. Both components are not multi-tenanted and require individual deployment per tenant.

Pre-requisites include acquiring AXP Client Credentials (CLIENT_ID and CLIENT_SECRET) and an AXP API Application Key (AXP_API_APP_KEY). Node.js v18.0+ is also required.

Refer to the AXP Proxy API build & deploy guide available here.

The bundle.js file is built out of this react-app

• Navigate to src/app/config.js and update the configuration to match your tenant, for example:

        export default {
            env: {
                AXP_CLIENT_ID: "YOUR_AXP_CLIENT_ID",
                AXP_PROXY_BASE_URL: "https://your_server_fqdn_running_axp-proxy-api:3001",
                AXP_ACCOUNT_ID: "ABCDEF",
                AXP_API_APP_KEY: "YOUR_AXP_API_APP_KEY"
            },
        };

• After updating, run yarn install to install dependencies
• Run yarn build to build the bundle.js file, to be located in the build/ folder.

• Node.js version 18+.
• Docker & Docker Compose.
• SSL Certificate & Key.
• Upload the clid-selector-widget.json file to the Avaya Experience Platform Admin Portal -> Widget Management.

1. Update docker-compose-dev.yml with SSL certificate paths.
2. Run the following commands:

   yarn install
   yarn build
   docker-compose -f docker-compose-dev.yml up # add -d to run in a background process

3. After any change, run npm run build and refresh your workspaces.

If you've done everything correctly, It should look something like this (default view without any changes).

The widget can be served using any web server. Below is an NGINX configuration example:

server {
    listen 8443 ssl;
    ssl_certificate /etc/nginx/cer.cer;
    ssl_certificate_key /etc/nginx/key.key;
    add_header Access-Control-Allow-Origin *;
    root /home/username/Projects/clid-dialing-widget/build; # Path to the folder including bundle.js file
    autoindex on;
}