diff --git a/CHANGELOG.md b/CHANGELOG.md index 112e37c37a..9cb774fc9f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Fixed +- Fix [#1423](https://github.com/Microsoft/BotFramework-WebChat/issues/1423). Added sample for hosting WebChat in Angular, by [@omarsourour](https://github.com/omarsourour) in PR [#1813](https://github.com/Microsoft/BotFramework-WebChat/pull/1813) + ## [4.3.0] - 2019-03-04 ### Added diff --git a/README.md b/README.md index 04654c6b1b..df038cd780 100644 --- a/README.md +++ b/README.md @@ -218,7 +218,7 @@ npm run prepublishOnly | [`02.a.getting-started-minimal-bundle`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.a.getting-started-minimal-bundle) | Introduces the minimized CDN with only basic dependencies. This does NOT include Adaptive Cards, Cognitive Services dependencies, or Markdown-It dependencies. | [Minimal Bundle Demo](https://microsoft.github.io/BotFramework-WebChat/02.a.getting-started-minimal-bundle) | | [`02.b.getting-started-minimal-markdown`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown) | Demonstrates how to add the CDN for Markdown-It dependency on top of the minimal bundle. | [Minimal with Markdown Demo](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) | | [`03.a.host-with-react`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/03.a.host-with-react) | Demonstrates how to create a React component that hosts the full-featured Web Chat. | [Host with React Demo](https://microsoft.github.io/BotFramework-WebChat/03.a.host-with-react) | -| [`03.b.host-with-Angular5`](https://github.com/Microsoft/BotFramework-WebChat/issues/1423) | Demonstrates how to create an Angular component that hosts the full-featured Web Chat. | | +| [`03.b.host-with-Angular`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/03.b.host-with-angular) | Demonstrates how to create an Angular component that hosts the full-featured Web Chat. | [Host with Angular Demo](https://stackblitz.com/github/omarsourour/ng-webchat-example) | | [`04.a.display-user-bot-initials-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/04.a.display-user-bot-initials-styling) | Demonstrates how to display initials for both Web Chat participants. | [Bot initials Demo](https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/04.a.display-user-bot-initials-styling/)| | [`04.b.display-user-bot-images-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/04.b.display-user-bot-images-styling) | Demonstrates how to display images and initials for both Web Chat participants. | [User images Demo](https://microsoft.github.io/BotFramework-WebChat/04.b.display-user-bot-images-styling) | | [`05.a.branding-webchat-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/05.a.branding-webchat-styling) | Introduces the ability to style Web Chat to match your brand. This method of custom styling will not break upon Web Chat updates. | [Branding Web Chat Demo](https://microsoft.github.io/BotFramework-WebChat/05.a.branding-webchat-styling) | diff --git a/samples/03.b.host-with-angular/README.md b/samples/03.b.host-with-angular/README.md new file mode 100644 index 0000000000..5fdc5216d2 --- /dev/null +++ b/samples/03.b.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) diff --git a/samples/README.md b/samples/README.md index f5159f97a7..a16cffc801 100644 --- a/samples/README.md +++ b/samples/README.md @@ -14,7 +14,7 @@ Here you can find all hosted samples of [Web Chat](https://github.com/Microsoft/ | [`02.a.getting-started-minimal-bundle`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.a.getting-started-minimal-bundle) | Introduces the minimized CDN with only basic dependencies. This does NOT include Adaptive Cards, Cognitive Services dependencies, or Markdown-It dependencies. | [Minimal Bundle Demo](https://microsoft.github.io/BotFramework-WebChat/02.a.getting-started-minimal-bundle) | | [`02.b.getting-started-minimal-markdown`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown) | Demonstrates how to add the CDN for Markdown-It dependency on top of the minimal bundle. | [Minimal with Markdown Demo](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) | | [`03.a.host-with-react`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/03.a.host-with-react) | Demonstrates how to create a React component that hosts the full-featured Web Chat. | [Host with React Demo](https://microsoft.github.io/BotFramework-WebChat/03.a.host-with-react) | -| [`03.b.host-with-Angular5`](https://github.com/Microsoft/BotFramework-WebChat/issues/1423) | Demonstrates how to create an Angular component that hosts the full-featured Web Chat. | | +| [`03.b.host-with-Angular`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/03.b.host-with-angular) | Demonstrates how to create an Angular component that hosts the full-featured Web Chat. | [Host with Angular Demo](https://stackblitz.com/github/omarsourour/ng-webchat-example) | | [`04.a.display-user-bot-initials-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/04.a.display-user-bot-initials-styling) | Demonstrates how to display initials for both Web Chat participants. | [Bot initials Demo](https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/04.a.display-user-bot-initials-styling/)| | [`04.b.display-user-bot-images-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/04.b.display-user-bot-images-styling) | Demonstrates how to display images and initials for both Web Chat participants. | [User images Demo](https://microsoft.github.io/BotFramework-WebChat/04.b.display-user-bot-images-styling) | | [`05.a.branding-webchat-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/05.a.branding-webchat-styling) | Introduces the ability to style Web Chat to match your brand. This method of custom styling will not break upon Web Chat updates. | [Branding Web Chat Demo](https://microsoft.github.io/BotFramework-WebChat/05.a.branding-webchat-styling) |