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:

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)

Backend (ASP.NET Core)

Bot Framework

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:

10. Testing the Integration

You can test your chatbot using:

11. Deployment and Hosting

Option 1: Azure App Service

Option 2: On-Premises / IIS

12. Best Practices

  1. Use Adaptive Cards: For structured responses like forms, buttons, or status updates.

  2. Log Conversations: Store user queries and bot responses for analytics.

  3. Handle Fallbacks: Always have a default “I couldn’t understand” message.

  4. Integrate APIs: Fetch order/ticket data directly via REST APIs.

  5. 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.