1. Introduction
Chatbots have become an essential part of modern customer support systems. They provide 24/7 assistance, automate repetitive queries, and improve user engagement. In enterprise applications, especially customer portals, integrating a chatbot offers instant support and reduces manual load on customer service teams.
In this article, we’ll learn how to build and integrate a chatbot into an Angular-based customer portal using the Microsoft Bot Framework and ASP.NET Core as the backend.
We’ll also cover how to handle authentication, context-based responses, and communication between the chatbot and Angular components step by step.
2. Why Chatbot Integration Matters in Enterprise Portals
Before diving into the implementation, let’s understand why chatbot integration is valuable for enterprises:
Instant Support: Customers receive instant responses to FAQs or ticket-related queries.
Operational Efficiency: Reduces the dependency on live support agents for repetitive questions.
Scalable Communication: Supports multiple languages, intents, and business workflows.
Data-Driven Insights: Chat transcripts can help improve customer satisfaction analysis.
For example, an enterprise service portal can have a chatbot that assists users in checking order status, raising support tickets, or retrieving invoice details from APIs.
3. Technical Workflow
Here’s the workflow diagram that shows the data flow between Angular, the Bot Framework, and the backend APIs.
Flowchart: Chatbot Integration Workflow
User (Customer Portal UI)
|
v
Angular Chat Widget
|
v
ASP.NET Core Bot Controller (Direct Line / Bot Connector)
|
v
Microsoft Bot Framework SDK
|
v
Business Logic / Knowledge Base / API Calls
|
v
Response sent back to Angular Chat Interface
4. Architecture Overview
Frontend (Angular)
Embeds the chatbot widget using Direct Line API or Web Chat SDK.
Handles authentication tokens from backend.
Displays chat interface and messages in real time.
Backend (ASP.NET Core)
Hosts the bot using the Microsoft.Bot.Builder SDK.
Connects to services like QnA Maker, Azure Cognitive Services, or OpenAI API for AI-powered responses.
Exposes a token generation API for Angular frontend.
Bot Framework
Manages conversation flow, state, and NLP.
Supports both text and adaptive cards for richer responses.
5. Setting up the Bot in ASP.NET Core
Let’s start by building a bot using Microsoft Bot Framework SDK v4 in an ASP.NET Core project.
Step 1: Create a New Bot Project
Use Visual Studio or the CLI:
dotnet new webapp -n CustomerSupportBot
cd CustomerSupportBot
dotnet add package Microsoft.Bot.Builder.Integration.AspNet.Core
dotnet add package Microsoft.Bot.Builder.AI.QnA
Step 2: Configure the Startup Class
In Program.cs:
var builder = WebApplication.CreateBuilder(args);
// Add Bot Framework services
builder.Services.AddControllers().AddNewtonsoftJson();
builder.Services.AddSingleton<IBotFrameworkHttpAdapter, AdapterWithErrorHandler>();
builder.Services.AddTransient<IBot, CustomerSupportBot>();
var app = builder.Build();
app.MapControllers();
app.Run();
Step 3: Create Bot Logic
Create CustomerSupportBot.cs:
using Microsoft.Bot.Builder;
using Microsoft.Bot.Schema;
using System.Threading.Tasks;
public class CustomerSupportBot : ActivityHandler
{
protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
{
var userMessage = turnContext.Activity.Text?.ToLower();
if (userMessage.Contains("order"))
await turnContext.SendActivityAsync("Please provide your order ID, I’ll check the status for you.");
else if (userMessage.Contains("ticket"))
await turnContext.SendActivityAsync("You can raise a new ticket from the Help section.");
else
await turnContext.SendActivityAsync("I'm here to help! Try asking about your order or ticket.");
}
}
This basic logic can be extended to connect with APIs or external services.
6. Generating Direct Line Token API
To connect your Angular frontend securely, you must generate a Direct Line token.
In BotController.cs:
[ApiController]
[Route("api/[controller]")]
public class BotController : ControllerBase
{
private readonly IConfiguration _config;
public BotController(IConfiguration config)
{
_config = config;
}
[HttpGet("token")]
public async Task<IActionResult> GetDirectLineToken()
{
var secret = _config["BotSettings:DirectLineSecret"];
using var client = new HttpClient();
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", secret);
var response = await client.PostAsync("https://directline.botframework.com/v3/directline/tokens/generate", null);
var content = await response.Content.ReadAsStringAsync();
return Ok(content);
}
}
This endpoint returns a secure token to the Angular app for starting a chat session.
7. Integrating the Bot with Angular
Step 1: Install Microsoft Web Chat
In your Angular project:
npm install botframework-webchat
Step 2: Create Chat Component
chat.component.html:
<div #botWindow style="height: 500px; width: 400px; border: 1px solid #ccc;"></div>
chat.component.ts:
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import * as WebChat from 'botframework-webchat';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-chat',
templateUrl: './chat.component.html'
})
export class ChatComponent implements OnInit {
@ViewChild('botWindow', { static: true }) botWindow!: ElementRef;
constructor(private http: HttpClient) {}
ngOnInit() {
this.http.get<any>('https://localhost:5001/api/bot/token').subscribe(tokenResponse => {
const token = tokenResponse.token;
WebChat.renderWebChat({
directLine: WebChat.createDirectLine({ token }),
userID: 'customer123',
locale: 'en-US',
styleOptions: { backgroundColor: '#f7f7f7' }
}, this.botWindow.nativeElement);
});
}
}
This creates an embedded chat window that connects directly to your ASP.NET Core bot.
8. Enhancing the Bot with AI
You can integrate Azure OpenAI Service, Cognitive Search, or QnA Maker to make your chatbot more intelligent.
Example using QnA Maker
var qnaEndpoint = new QnAMakerEndpoint
{
KnowledgeBaseId = _config["QnA:KnowledgeBaseId"],
EndpointKey = _config["QnA:EndpointKey"],
Host = _config["QnA:Host"]
};
var qnaMaker = new QnAMaker(qnaEndpoint);
var response = await qnaMaker.GetAnswersAsync(turnContext);
if (response != null && response.Length > 0)
await turnContext.SendActivityAsync(response[0].Answer);
else
await turnContext.SendActivityAsync("I couldn’t find an answer to that question.");
9. Securing Chat Sessions
To maintain security and context:
Generate tokens per user session.
Pass user identity claims when requesting the Direct Line token.
Use HTTPS only for all communication.
10. Testing the Integration
You can test your chatbot using:
Bot Framework Emulator (for local testing)
ng serve in Angular to check the chat widget
Real-time debugging in Azure Bot Service if deployed
11. Deployment and Hosting
Option 1: Azure App Service
Option 2: On-Premises / IIS
12. Best Practices
Use Adaptive Cards: For structured responses like forms, buttons, or status updates.
Log Conversations: Store user queries and bot responses for analytics.
Handle Fallbacks: Always have a default “I couldn’t understand” message.
Integrate APIs: Fetch order/ticket data directly via REST APIs.
Support Multi-Language: Use localization for global customer portals.
Conclusion
By integrating the Microsoft Bot Framework with Angular, you can create a seamless conversational experience for your enterprise customer portal.
This approach allows businesses to automate support, reduce response time, and enhance user satisfaction — all while maintaining security and scalability through the ASP.NET Core backend.
As enterprises continue to invest in digital transformation, chatbot integration is no longer optional it’s a core capability for modern customer experience systems.