There are numerous posts about developing a chatbot using Dialogflow. But creating chatbot isn’t enough. Connecting Dialogflow to the web interface is even more interesting and challenging. With Angular being a popular and emerging platform, here is our guide to integrate Dialogflow chatbot with Angular JS. In our quest to simplify chatbot integration with different platforms, we have previously written guides to integrate chatbots with websites and apps. Pre-requisites To get started, you would need a chatbot or working knowledge of Dialogflow and Angular JS. To integrate the chatbots with Angular, you will need a account. All the aforementioned tools have free to try out. Dialogflow Kommunicate Steps to integrate Dialogflow chatbot with Angular JS I am going to explain how I connected Dialogflow and Angular with the help of Kommunicate. Note: To keep it very simple and straight this tutorial explains with really basic and plain code development. Also to mention this project can be found on my Github . To get an in detail tutorial on how to integrate the bot into a website you can check here . Step 1: Create your Dialogflow chatbot To get started, you can easily create a chatbot in Dialogflow or edit one of their provided sample chatbot templates. To go further, you can create your own Intents & Entities. Step 2: Integrate Dialogflow chatbot with Kommunicate Login to your Kommunicate dashboard and navigate to the . If you do not have an account, you can create one . Locate the Dialogflow section and click on Settings. Bot section here Now, navigate to your Dialogflow console and download the service account key file. Here are the steps to locate the file: Select your Agent from the dropdown in the left panel.Click on setting button. It will open a setting page for the agent.Inside general tab search for and click on your service account.After getting redirected to your , create a key in JSON format for your project from the section and it will get automatically downloaded.Now upload the . GOOGLE PROJECTS SERVICE ACCOUNT actions key file If you are using V1 APIs, just copy your client and developer token from Dialogflow console and paste in the fields provided. Click on Save and Proceed. Setup your bot’s name and profile picture and choose whether to allow the for your newly created bot. Click and voila, your bot is now integrated. bot to human handoff Finish bot integration setup You can check/edit your integrated bot using the below path: Dashboard →Bot Integration → Manage Bots: You can check all your integrated bots here. Dashboard → Bot Integration. Once finished, your Dialogflow section will have a green icon with the number of bots are you have successfully integrated. Step3: Install the Angular CLI globally. To install the CLI using npm, open a terminal/command prompt and enter the following command: npm install -g @angular/cli Now, create a new workspace and initial app project. Run the CLI command ng new and provide the name my-app, as shown here: ng my-app new The initial app project contains a simple Welcome app, which is ready to run. Angular includes a server so that you can easily build and serve your app locally. Now, navigate to the workspace folder (my-app). Launch the server by using the CLI command ng serve, with the –open option. cd my-app ng serve --open Step 4: Installing chatbot in the Angular component Install chatbot on the angular component. The CLI will create the first Angular component. It is the root component and is named app-root. Run any code editor and open workspace folder (my-app). Note: Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input. @Component({ : , : , : [ ] }) { title = ; } selector 'app-root' templateUrl './app.component.html' styleUrls './app.component.css' export class AppComponent 'My First Angular App!' To install the chatbot, open Kommunicate and navigate to Dashboard →Settings. Click on under the Configuration section. Copy the JavaScript code to be added either in your website or your application. Install Paste the javascript code into the app.component.ts file. The code of the component should look like this @Component({ : , : , : [ ] }) { title = ; ngOnInit() { ( { kommunicateSettings = { : <CONVERSATION_TITLE>}; var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "https://api.kommunicate.io/v2/kommunicate.app"; var h = document.getElementsByTagName("head")[0]; h.appendChild(s); (window as any).kommunicate = m; m._globals = kommunicateSettings; })(document, (window as any).kommunicate || {}); } } selector 'app-root' templateUrl './app.component.html' styleUrls './app.component.scss' export class AppComponent 'my first app' ( ) function d, m var "appId" ,"conversationTitle": < > YOUR_APP_ID The ng serve command launches the server, watches your files and rebuilds the app as you make changes to those files. The –open (or just -o) option automatically opens your browser to . http://localhost:4200/ If you run the browser, you should see a chat widget screen pop up and that means your chatbot is ready. This is how you integrate Dialogflow chatbot with Angular using Kommunicate in few simple steps. This article was originally published here
![featured image - How to Integrate Dialogflow Chatbot with AngularJS [Step-By-Step Guide]](https://hackernoon.imgix.net/drafts/xq3x32ka.png?auto=format&fit=max&w=3840)
![16 JavaScript Protips [2020 Edition]](https://hackernoon.imgix.net/drafts/q1n3yqk.png?auto=format&fit=max&w=3840)
