How to use Microsoft Bot Framework web chat in Angular5 application

Question

I need a way to embed web chat in my angular 5 application. I have tried the non react website way described here: https://github.com/Microsoft/BotFramework-WebChat and it works.

Is there a way to use the components only rather than loading the entire js file to get the chat window in my Angualar 5 app?

Answer 1

If you install the BotFramework-WebChat version greater than 0.10.7, you can directly use the BotFramework-WebChat in ng application.

• Install the webchat sdk: npm install botframework-webchat

• fill the style files in .angular-cli.json file:

  "styles": [
    "../node_modules/botframework-webchat/botchat.css",
    "../node_modules/botframework-webchat/botchat-fullwindow.css"
  ],
  

• Try the sample in component as discussed at https://github.com/Microsoft/BotFramework-WebChat/issues/478:

  import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
  import {App} from "botframework-webchat";
  @Component({
    selector: 'app-root',
    template: `<div id="bot-chat-container" #botWindow></div>`,
  })
  export class AppComponent implements OnInit {
  
    @ViewChild("botWindow") botWindowElement: ElementRef;
  
    ngOnInit(): void {
      App({
        directLine: {secret: 'secret goes here'},
        user: {id: 'user'},
        bot: {id: 'bot'},
      }, this.botWindowElement.nativeElement)
    }
  }