How to Add a Chatbot in Angular Js ( Easy Steps)
Tags: chatbot, javascript, beginners, programming
Published: 2023-03-19 17:45:25

<!-- wp:paragraph -->
<p>AngularJS is a very popular Javascript framework, with some of the most popular websites including those of Upwork, Deutsche Bank and IBM written on it. Some of the key features that make AngularJS special are its support of parallel development, two-way data binding, faster loading, speed and performance of its websites.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this blog post, we learn how to build a Kompose chatbot and add it to an AngularJS website.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let’s jump right into it.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Phase 1: Create a chatbot in <a href="https://www.kommunicate.io/product/kompose-bot-builder">Kompose</a> and setup the answers</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Step 1: Setup an account in Kommunicate</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you do not have an account in Kommunicate, you can create one <a href="https://dashboard.kommunicate.io/signup">here</a> for free.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, log in to your Kommunicate dashboard and navigate to the Bot Integration section. Locate the Kompose section and click on Integrate Bot.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh5.googleusercontent.com/8hxMCrHgoxG_Pl72bF2WawQmOsxvBOrfnk92z0PGiVs8ulH9jOVyiC8ec4poZ8WR6CFQYfLXLi8xQGefLltZcXKx-10VAh-O9cWbVV-KEucJmpzNQ4ItkUNcfcGKPlk8KKp7CQSRE2oV5wE9Mw" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If you want to build a bot from scratch, select a blank template and go to the Set up your bot section. Select the name of your Bot, your bot’s Avatar, and your bot’s default language and click “Save and Proceed”.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh3.googleusercontent.com/YjsEi8-BPWKi2OkcsPcJs3YLMMYTRzZEtjyzCyYuqTCT7YbAaHg9Bu8mGMp_cnOYCVyXXXCCOsCyJvY81Erpxpkluro9F1CS5DuSFNJEoEcxyLqeuTzW_sPgVVe6rzoFMlxwXkm1zfBuq4G2mw" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>You are now done creating your bot and all you have to worry about now is to “Enable bot to human transfer” when the bot encounters a query it does not understand. Enable this feature and click “Finish Bot Setup.”</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh4.googleusercontent.com/bnnsJxd5bHeuIsYlsunNYfmbtoB6HTQtYOIwhZ6xD7EKwPe9AWBVhZr94t0-8pUm0lLIIE-q7TMlXKDxgbHyiQViZ0VsklGwycRkvC9F9gVEy0zbP7r6Ye2C-9Mi0ZAsfZTI5jsHqXGjgFnf0Q" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>From the next page, you can choose if this bot will handle all the incoming conversations. Click on “Let this bot handle all the conversations” and you are good to go.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh4.googleusercontent.com/v-YrXZGlwXq7RpM07gg9V8GOAcdSs-ACdna_0yQyrDFz2iwnUxyAiCkBhd-ZBn0MnBJHBH9pfvR5MytxKPS8dP1T4Ai0S4OY9BbuQUMSVtbuAZufq_1nI8VMByuIjRf28WeAnag73spe6LJBQw" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Newly created bot here: Dashboard →Bot Integration → Manage Bots.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Step 2: Create welcome messages &amp; answers for your chatbot</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Go to the <a href="https://dashboard.kommunicate.io/bots/bot-builder/">‘Kompose – Bot Builder’</a> section and select the bot you created.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>First, set the welcome message for your chatbot. The welcome message is the first message that the chatbot sends to the user who initiates a chat.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Click the “Welcome Message” section. In the “Enter Welcome message – Bot’s Message” box, provide the message your chatbot should be shown to the users when they open the chat and then save the welcome intent.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After creating the welcome message, the next step is to feed answers/intents. These answers/intents can be the common questions about your product and service.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The answers section is where you’ve to add all the user’s messages and the chatbot responses.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Go to the “Answer” section, click +Add, then give an ‘Intent name’</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the Configure user’s message section – you need to mention the phrases that you expect from the users that will trigger.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh3.googleusercontent.com/QFmiyOZBy8yfcOlzWXrCPmHIpfeU1j0SWLHAWFeYWQRqnRAVZObRKL9PJuqkzfHx9TslCplr70YSyJVCOPvoGmMBYKVf2gY1u-K2658M37GzM8Ab5DuR0vNFnermNIgEWn0BNIXAsEH1bcu1jA" alt="Kommunicate create welcome messages"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Configure bot’s reply section – you need to mention the responses (Text or as<a href="https://docs.kommunicate.io/docs/message-types"> Rich messages</a>) the chatbot will deliver to the users for the particular message. You can add any number of answers and follow-up responses for the chatbot. Here, I have used custom payload by selecting the “Custom” option in the “More” option.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Once you have configured the responses, you need to click on “Train Bot” which is at the button right and to the left of the preview screen. Once successfully trained, a toast “Anser training completed” will come at the top right corner.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh5.googleusercontent.com/4GH61HIQXs91i4VotioOT2TF8sEGrqNgsKqznfv-HnOTIYuD4M3AHNWSa9N3oq-zbF2WGGlmT6wWurW1LgvdUjDy0MSpF2FG0x7JNTJQpK71zNTb8pF9dOYVyaVrAO6Nu2ZKGAQK7MzbbCxbRQ" alt="Kommunicate create welcome messages"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2><strong>Phase 2: Add the created chatbot to your Angular Js:</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Follow the given steps.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Step: 1 Install the Angular CLI globally</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To install the CLI using npm, open a terminal/command prompt and enter the following command:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>npm install -g @angular/cli</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, create a new workspace and initial app project. Run the CLI command ng new and provide the name my-app, as shown here:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>ng new my-app</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, navigate to the workspace folder (my-app).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Launch the server by using the CLI command ng serve, with the –open option.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>cd my-app</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>2ng serve --open</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Step 2:</strong> <strong>Add Kompose bot</strong> </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now you have successfully launched the Angular site, the next step is to add Kompose chatbot to your angular website.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Open the Angular project directory on your computer and add the following Kommunicate script in your <em>app.component.ts</em> file.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;(function(d, m){</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var kommunicateSettings = {"appId":"Kommunicate APP ID","popupWidget":true,"automaticChatOpenOnNavigation":true};</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s.src = "https://widget.kommunicate.io/v2/kommunicate.app";</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var h = document.getElementsByTagName("head")[0]; h.appendChild(s);</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(window as any).kommunicate = m; m._globals = kommunicateSettings;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;})(document, (window as any).kommunicate || {});</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Replace&nbsp; your Kommunicate APP ID in the above script.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><em>The app.component.ts file</em> should look like this;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>import { Component } from '@angular/core';</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>@Component({</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;selector: 'app-root',</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;templateUrl: './app.component.html',</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;styleUrls: ['./app.component.css']</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>})</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>export class AppComponent {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;title = 'my-app';</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ngOnInit() {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;(function(d, m){</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var kommunicateSettings = {"appId":"Your App ID","popupWidget":true,"automaticChatOpenOnNavigation":true};</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s.src = "https://widget.kommunicate.io/v2/kommunicate.app";</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var h = document.getElementsByTagName("head")[0]; h.appendChild(s);</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(window as any).kommunicate = m; m._globals = kommunicateSettings;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;})(document, (window as any).kommunicate || {});</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Save the file and run the following command in the command prompt to run the code:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>ng serve --open</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As soon as you run the above command, the angular website will open in the browser with the Kompose chat widget.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><img width="602" height="340" src="https://lh5.googleusercontent.com/7apU5FUe3L8x58ed3wMNWwOjRcFuSOSSNDbGzMjE18uU6VpHPVnPYsDgnOlJVnT4kJtR_lKW8lV2MHAO85USN-2Cr8RLOuOJX3rdKM4Xgu-aPEJTkaaQAHDRbHu3n5H9PDJwrkH61uWRjIB9orBU5Zyg7ZvAjAYha7ErDa4YkmGPt9tTFO_ymEGfSMMNfQ"></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Select the Kompose chatbot in the<a href="https://dashboard.kommunicate.io/settings/conversation-rules"> RULES</a> section of the Kommunicate dashboard to handle the incoming conversations.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There you go!! You have successfully built a chatbot for your AngularJS website. Keep watching this space to learn more about building bots for various platforms.</p>
<!-- /wp:paragraph -->