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

Table of Contents

1. Features
2. How do I get set up?
3. Components
   • ChatWidgetComponent
   • TalkdeskChatComponent
   • GenesysScriptComponent
   • AuviousCobrowseComponent
4. Models
   • ChatConfig
   • ChatWidgetType
5. Build
6. Publishing
7. Running unit tests

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.

How do I get set up?

Local Development

• Run npm run build-chat-widget from the root project to build, or npm run watch-chat-widget for 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

Components

ChatWidgetComponent

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

Selector: lib-chat-widget

Inputs:

| Input | Type | Required | Description | |-------|------|----------|-------------| | chatType | ChatWidgetType | Yes | Determines which chat platform to render | | chatConfig | ChatConfig | Yes | Configuration object for the selected chat platform |

Usage:

import { ChatWidgetType, ChatConfig } from '@corvesta/chat-widget';

chatType = ChatWidgetType.TALKDESK;
chatConfig: ChatConfig = {
  chatClientId: 'your-client-id',
  chatClientRegion: 'us-east-1',
  chatBranding: { /* Talkdesk branding options */ }
};

<lib-chat-widget
  [chatType]="chatType"
  [chatConfig]="chatConfig">
</lib-chat-widget>

TalkdeskChatComponent

Implements Talkdesk chat widget functionality with full SDK integration and customizable branding options. This component is used internally by ChatWidgetComponent when chatType is set to ChatWidgetType.TALKDESK.

Selector: lib-talkdesk-chat

Inputs:

| Input | Type | Required | Description | |-------|------|----------|-------------| | chatClientId | string | Yes | Talkdesk touchpoint ID | | chatClientRegion | string | Yes | Talkdesk region (e.g. us-east-1) | | chatBranding | object | Yes | Talkdesk SDK branding/config options |

Note: You typically don't use this component directly. Use ChatWidgetComponent with ChatWidgetType.TALKDESK instead.

GenesysScriptComponent

Dynamically injects Genesys chat scripts with configurable environments and deployment settings. This is a standalone component used directly in your template.

Selector: lib-genesys-script

Inputs:

| Input | Type | Required | Default | Description | |-------|------|----------|---------|-------------| | deploymentId | string | Yes | — | Genesys deployment ID | | environment | string | No | 'prod-usw2' | Genesys environment identifier | | genesysScriptUrl | string | No | 'https://apps.usw2.pure.cloud/genesys-bootstrap/genesys.min.js' | URL for the Genesys bootstrap script |

Usage:

import { GenesysScriptComponent } from '@corvesta/chat-widget';

<lib-genesys-script
  deploymentId="your-deployment-id"
  environment="prod-usw2">
</lib-genesys-script>

AuviousCobrowseComponent

Provides co-browsing functionality through the Auvious platform. Supports automatic positioning alongside chat widgets and cross-domain session restore.

Selector: lib-auvious-cobrowse

Inputs:

| Input | Type | Required | Description | |-------|------|----------|-------------| | applicationId | string | Yes | Auvious application ID for accepting connections | | isTalkdeskChatEnabled | boolean | Yes | Adjusts widget margin to accommodate Talkdesk chat | | primaryColor | string | No | Customizes the widget icon color (CSS variable --av-color-primary) | | accentColor | string | No | Customizes the popup button color (CSS variable --av-color-accent) | | connectionMessage | string | No | Custom message displayed above the code input field | | tooltipText | string | No | Tooltip text on the widget launcher button | | restoreStateParam | string | No | State string for cross-domain session restore |

Outputs:

| Output | Type | Description | |--------|------|-------------| | stateRestored | EventEmitter<void> | Emits after state has been restored from restoreStateParam |

Public Methods:

| Method | Returns | Description | |--------|---------|-------------| | getRestoreState() | Promise<string> | Returns the widget's current state string for cross-domain transfer | | restoreState(state: string) | void | Restores the widget from a previously exported state string |

Usage:

import { AuviousCobrowseComponent } from '@corvesta/chat-widget';

<lib-auvious-cobrowse
  applicationId="your-app-id"
  [isTalkdeskChatEnabled]="true"
  primaryColor="#007bff"
  accentColor="#0056b3"
  connectionMessage="Enter the code provided by your agent."
  tooltipText="Start co-browsing">
</lib-auvious-cobrowse>

Cross-Domain Session Restore:

To transfer a co-browsing session across domains:

1. On the source domain, call getRestoreState() to get the session state string
2. Pass the state string to the target domain (e.g. via URL query parameter)
3. On the target domain, either:
   • Set the restoreStateParam input to auto-restore on widget ready, or
   • Call restoreState(state) manually

// Source domain: export state
const state = await cobrowseComponent.getRestoreState();
window.location.href = `https://target-domain.com?cobrowseState=${encodeURIComponent(state)}`;

// Target domain: auto-restore via input
const params = new URLSearchParams(window.location.search);
restoreStateParam = params.get('cobrowseState') ?? undefined;

<!-- Target domain template -->
<lib-auvious-cobrowse
  applicationId="your-app-id"
  [isTalkdeskChatEnabled]="false"
  [restoreStateParam]="restoreStateParam"
  (stateRestored)="onStateRestored()">
</lib-auvious-cobrowse>

Models

ChatConfig

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

ChatWidgetType

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

Build

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

Publishing

After building the library, run npm run deploy-chat-widget to build and publish in one step. Alternatively, build first with npm run build-chat-widget, then cd dist/corvesta/chat-widget and run npm publish.

Running unit tests

Run npm test to execute the unit tests via Karma.