Development and Packaging

Getting Started

The Infinity Elements SDK provides a complete local development environment with CLI tools and testing capabilities:

Install SDK Globally

Install the Infinity Elements SDK CLI globally:

# Install the SDK globally
npm install -g @avaya/infinity-elements-sdk

Create a New Element Project

The CLI scaffolds a complete Element project with the Element API already included:

# Create a new project
infinity init my-element
cd my-widget

# Start development server
infinity dev

# Build for production
infinity build

1. Create a new Infinity Element Project

   infinity init my-widget
   cd my-widget

2. Start a Development Server
   Launches a local development server with:

   1. Hot module replacement for instant feedback
   2. Live reload on file changes
   3. Debug mode enabled by default

      infinity dev

3. Build for Production
   Generates production-ready output in the dist/ directory:

   1. ES module format (.es.js) - For modern browsers
   2. UMD format (.umd.js) - For compatibility with older environments
   3. Optimized and minified bundle with CSS inlined

      infinity build

The scaffolded project automatically includes @avaya/infinity-elements-api as a dependency, so you can immediately start using the Element API.

Import the Element API

In your Element component:

import { ElementAPI, DialpadDigit } from '@avaya/infinity-elements-api';

Initialize the API

Create an instance of the Element API in your component:

const api = new ElementAPI({
  elementId: 'my-element',      // Unique identifier for your element
  timeout: 5000,                 // Request timeout in milliseconds
  debug: true                    // Enable console logging for development
});

Note: Element names must follow W3C Custom Elements specification (lowercase, contain a hyphen, start with a letter). Valid: my-element, user-profile. Invalid: myelement, MyElement.

Basic Usage Example

// Get current agent information
const userInfo = await api.getUserInfo();
console.log('Agent:', userInfo.displayName);
console.log('Status:', userInfo.agentStatus);

// Listen for interaction events
api.onInteractionAccepted((interactionId) => {
  console.log('New interaction accepted:', interactionId);
  // Load customer data, initialize UI, etc.
});

api.onInteractionEnded((interactionId) => {
  console.log('Interaction ended:', interactionId);
  // Clean up resources, save state, etc.
});

Error Handling

The Element API provides consistent error handling across all methods:

api.onError((error) => {
  console.error('Error Code:', error.code);
  console.error('Message:', error.message);
});

try {
  const interaction = await api.getInteraction();
} catch (error) {
  if (error.code === 'NO_ACTIVE_INTERACTION') {
    console.log('Waiting for interaction...');
  }
}

Common Error Codes

Development Workflow

1. Initialize Your Project
   As mentioned above.
2. Project structure
   my-widget/
   ├── package.json # Project configuration
   ├── tsconfig.json # TypeScript configuration
   ├── vite.config.ts # Build configuration
   ├── index.html # Development preview page
   └── src/
   ├── Component.tsx # Your React component (main logic here)
   ├── Component.module.css # Scoped CSS styles
   └── index.ts # Web component registration
3. Project Structure Permissions
   InfinityElements operate with carefully scoped permissions:

<iframe
  sandbox="allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox"
  src="component.js">
</iframe>

 

Granted Permissions:

Resources

Installation Guide | SDK NPM | API NPM