Chat Widget Library

What is this repository for?

• This repository provides a unified chat widget library supporting multiple chat platforms
• This component should be used across portals to allow for consistent chat functionality and easy integration of different chat providers

Features

Multi-Platform Support Using the ChatWidgetType enum, you can easily switch between different chat platforms including Talkdesk and Genesys, or disable chat entirely.

Co-browsing Integration Built-in support for Auvious co-browsing functionality that can be configured to work alongside chat widgets with automatic margin adjustments.

Dynamic Script Loading All chat platforms are loaded dynamically, ensuring optimal performance by only loading the necessary scripts when needed.

Flexible Configuration Each chat platform can be configured independently through the ChatConfig interface, allowing for customized branding, regions, and client settings.

CSS Variable Integration Automatic CSS variable management for proper widget positioning and responsive design integration.

Components

ChatWidgetComponent Main orchestrator component that renders different chat widgets based on configuration. Uses Angular's ngSwitch to conditionally display chat implementations.

TalkdeskChatComponent Implements Talkdesk chat widget functionality with full SDK integration and customizable branding options.

GenesysScriptComponent Dynamically injects Genesys chat scripts with configurable environments and deployment settings.

AuviousCobrowseComponent Provides co-browsing functionality through the Auvious platform with automatic chat widget integration.

How do I get set up?

Local Development

• Run ng build chat-widget --watch from the main project to build in watch mode
• Assuming the dependency is already in the portal's package.json, add the following code to your tsconfig.json file under paths. Double check that the relative path used for the chat widget library matches your repository location

"@angular/*": [
"./node_modules/@angular/*"
],
"@corvesta/chat-widget": [
"../chat-widget/dist/corvesta/chat-widget"
]

• If the package is not already installed then run npm install "../chat-widget/dist/corvesta/chat-widget", again making sure that the path matches for the chat-widget

Usage Example

// In your component
export class AppComponent {
  chatType = ChatWidgetType.TALKDESK;
  chatConfig: ChatConfig = {
    chatClientId: 'your-client-id',
    chatClientRegion: 'us-east-1',
    chatBranding: {
      primaryColor: '#007bff',
      // ... other branding options
    }
  };
}

<!-- In your template -->
<lib-chat-widget 
  [chatType]="chatType" 
  [chatConfig]="chatConfig">
</lib-chat-widget>

<!-- For co-browsing -->
<lib-auvious-cobrowse 
  applicationId="your-app-id"
  [isTalkdeskChatEnabled]="chatType === ChatWidgetType.TALKDESK">
</lib-auvious-cobrowse>

Relevant Models

ChatConfig

interface ChatConfig {
  chatClientId: string;
  chatClientRegion: string;
  chatBranding: any;
}

ChatWidgetType

enum ChatWidgetType {
  OFF = 'OFF',
  TALKDESK = 'TALKDESK'
}

Build

Run ng build chat-widget to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build chat-widget, go to the dist folder cd dist/chat-widget and run npm publish.

Running unit tests

Run ng test chat-widget to execute the unit tests via Karma.