@courseecho/ai-widget-angular

Angular standalone component for AI chat widget - Modern AI assistance for Angular 19+ apps.

Overview

A production-ready Angular component with:

• Angular 19+ standalone components
• Full TypeScript support
• RxJS reactive patterns
• Zero external dependencies
• Minimize on load
• Go offline mode
• Pre-chat form
• AI suggestions
• Booking integration

Installation

npm install @courseecho/ai-widget-angular @courseecho/ai-core-sdk

Quick Start

import { Component } from '@angular/core';
import { AiChatWidgetComponent } from '@courseecho/ai-widget-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AiChatWidgetComponent],
  template: '<ai-chat-widget [config]="widgetConfig"></ai-chat-widget>'
})
export class AppComponent {
  widgetConfig = {
    apiKey: 'your-api-key',
    context: { pageType: 'course', entityId: 'course-123' }
  };
}

v2.1+ Features

Minimize on Load

widgetConfig = {
  apiKey: 'your-api-key',
  context: { pageType: 'course' },
  defaultMinimized: true
};

Go Offline + Booking

widgetConfig = {
  apiKey: 'your-api-key',
  context: { pageType: 'course' },
  goOfflineEnabled: true,
  limitExpiredConfig: {
    offlineForm: { 
      title: 'Get in touch', 
      submitEndpoint: '/api/contact' 
    },
    booking: { 
      title: 'Schedule', 
      calendarUrl: 'https://calendly.com/...' 
    }
  }
};

Pre-Chat Form

widgetConfig = {
  apiKey: 'your-api-key',
  context: { pageType: 'course' },
  preChatFormEnabled: true
};

Usage Examples

With Routing

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AiChatWidgetComponent } from '@courseecho/ai-widget-angular';

@Component({
  selector: 'app-course-details',
  standalone: true,
  imports: [AiChatWidgetComponent],
  template: '<ai-chat-widget [config]="widgetConfig"></ai-chat-widget>'
})
export class CourseDetailsComponent implements OnInit {
  widgetConfig: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.widgetConfig = {
        apiKey: 'your-api-key',
        context: { pageType: 'course', entityId: params['courseId'] }
      };
    });
  }
}

With Service Integration

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class CourseService {
  constructor(private http: HttpClient) {}

  getCourseContext(courseId: string): Observable<any> {
    return this.http.get(`/api/courses/${courseId}/context`);
  }
}

Authentication

API Key (Recommended):

config = { apiKey: 'key', context: { pageType: 'general' } };

JWT Token:

config = { context: { pageType: 'general' } };
// Pass jwtToken via property binding

Support

• Docs: https://courseecho.com/docs
• Issues: https://github.com/COURSEECHO/courseecho-ai-widget-sdk/issues
• Email: [email protected]

License

MIT 2026 CourseEcho