From 171f3c91e0efd7389af723779dfdda5650727077 Mon Sep 17 00:00:00 2001 From: omsour Date: Thu, 14 Mar 2019 11:04:43 -0700 Subject: [PATCH] Added ng-webchat sample file in Readme --- samples/03.host-with-angular/README.md | 82 ++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 samples/03.host-with-angular/README.md diff --git a/samples/03.host-with-angular/README.md b/samples/03.host-with-angular/README.md new file mode 100644 index 0000000000..5fdc5216d2 --- /dev/null +++ b/samples/03.host-with-angular/README.md @@ -0,0 +1,82 @@ +# Sample - Integrating Web Chat using Angular 6+ + +> This is a great sample for first-time Web Chat users. + +A simple web page with a WebChat in a flex-box maximized sidebar hosted using Angular. + +# Test out the hosted sample + +[Try out the Angular sample code here](https://stackblitz.com/github/omarsourour/ng-webchat-example) + +# How to run locally + +- Fork the [repository containing the sample code.](https://github.com/omarsourour/ng-webchat-example) +- Follow the README.md in the forked repo. + +# Code + +> The completed code can be found in the [sample repo.](https://github.com/omarsourour/ng-webchat-example) + +## Goals of this sample + +The sample repo has three main goals + +- Import WebChat into our Angular application. + - The manner in which the library is imported differs between Angular versions. Check the `CHANGELOG.md` file in the [sample repo](https://github.com/omarsourour/ng-webchat-example) for more information. +- Create a WebChat container in a component template file. +- Attach template container to a directline instance. + +We'll start by adding the CDN to the head of our Angular application's `index.html` template. + +`index.html` + +```diff +… + ++ + +… +``` + +> For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js". When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js", or lock down on a specific version with the following format: "/4.1.0/webchat.js". + +To create a WebChat container, create an empty `div` in the component's template file and assign it a template variable to reference it from this component's `.ts` file. + +`app.component.html` + +```diff +... ++
+... +``` + +Create a directline instance and attach it to the WebChat container via Angular's `ViewChild` construct. + +`app.component.ts` + +```ts +@ViewChild("botWindow") botWindowElement: ElementRef; + +public ngOnInit(): void { + const directLine = window.WebChat.createDirectLine({ + secret: "", + webSocket: false + }); + + window.WebChat.renderWebChat( + { + directLine: directLine, + userID: "USER_ID" + }, + this.botWindowElement.nativeElement + ); +} +``` + +> It is **never recommended** to put the Direct Line secret in the browser or client app. To learn more about secrets and tokens for Direct Line, visit [this tutorial on authentication](https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication). + +# Further reading + +## Full list of Web Chat hosted samples + +View the list of [available Web Chat samples](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)