This widget serves as a boilerplate for developing Avaya Workspaces Widgets. It demonstrates functionalities and capabilities from the Workspaces Widget Framework SDK and Avaya Experience Platform APIs. This widget is specifically designed for use within the Avaya Experience Platform.
๐ก 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.
onAgentStateEvent
: Subscribe to changes in Agent's state (logged in, ready, not ready, etc.).onAnyInteractionEvent
: Subscribe to any new Interaction on the agent's desktop.onMediaEvent
: Subscribe to Chat, SMS, Messaging, Email, or Social media data like participants or previous messages.
getConfiguration().user
: Retrieve the full logged-in Agent configuration.getTeamData()
: Get the Agent's team data (colleagues & supervisors).getInteractionData()
: Obtain details of the current interaction.
For more events & methods, visit the documentation.
The widget is built using React, Redux, and Webpack.
โโโ build // Build output folder
โโโ src
โ โโโ app
โ โ โโโ config.js // Configuration file
โ โ โโโ store.js // Combined Store
โ โโโ assets // Static Assets (Images, Files, etc.)
โ โ โโโ images
โ โโโ features
โ โ โโโ sample-content // Sample Component
โ โ โโโ SampleContent.js // React Component
โ โ โโโ SampleContent.module.css // Styling
โ โ โโโ sampleContentAPI.js // API Client Calls
โ โ โโโ sampleContentSlice.js // State Manager
โ โ โโโ sampleContentSlice.spec.js // Test File
โ โโโ services
โ โ โโโ Auth.js // Authorization Service
โ โโโ shared-components // Shared React Components
โโโ secrets // Includes SSL certificates
โโโ server.conf
โโโ sample-widget.json // Widget JSON file to import to WS
โโโ webpack.config.js // Webpack configuration
To create your own feature:
- Copy the
sample-component
folder format, adding required Components, API Calls, and WS Widget SDK Calls. - Update
store.js
with your new component reducer.
Build and deploy your widget with the following steps after making necessary changes.
- Node.js version 18+.
- Yarn.
- Docker & Docker Compose (optional).
- SSL Certificate & Key for serving built files.
- Upload
sample-widget.json
to Avaya Experience Platform Admin Portal and Widget Management.
- Update
docker-compose-dev.yml
with SSL certificate locations. - Build and deploy the widget:
yarn install npm run build docker-compose -f docker-compose-dev.yml up # add -d for background process
- To apply changes, run
npm run build
and refresh workspaces.
- Install dependencies and build:
yarn install npm run build
- Serve the
build/
folder contents (especiallybundle.js
) using your preferred web server (NGINX, TomCat, IIS, etc.).
All Done!
If you've done everything correctly, it should look something like this.
Contributions are welcome!