How to Integrate a Dialogflow Chatbot With Angular JS

Hey everyone, welcome to another video.

In this video, we’ll see how you can integrate a Dialogflow chatbot with AngularJS using Kommunicate.

To get started, you’ll need a Dialogflow chatbot, working knowledge of Dialogflow and AngularJS, and a Kommunicate account. If you don’t have a Kommunicate account yet, there is a registration link in the description box below. You can register now for a 30-day free trial.

To begin, you can either create a chatbot in Dialogflow or edit one of the sample chatbot templates provided by Dialogflow. You can also create your own intents and entities based on your use case.

For the next step, log in to your Kommunicate account and click on Bot Integrations. From the Bot Integrations section, choose your version of Dialogflow and log in to your Dialogflow CX console.

As you can see in Step 2, there is a link that takes you directly to the service account key page. Click Create Service Account Key. After that, you will land on this page.

From the dropdown list, click New Service Account. Give your service account a name, and then, under Role From Project, select the role as Owner. Once that is done, make sure the key type is set to JSON, and then click Create. Your key will be downloaded automatically.

Now, move back to Kommunicate. Here, you need to upload your service account key. You can either drag and drop the file or click to upload it.

The next part is entering the agent ID. For that, go back to your Dialogflow console. From here, click on the menu button and select Copy ID.

Now, move back to Kommunicate and paste your agent ID. After pasting it, make sure you remove the path before the ID. You need to remove everything up to agents. The remaining part is your actual agent ID.

After that, click Save and Proceed.

The next step is to give your bot a name and choose a profile photo for it. You can also upload your own photo if you want. Once done, click Save and Proceed.

In the next step, you can choose whether to enable or disable the bot-to-human handoff feature. Once you have made your choice, click Update Bot Setup.

After integrating Dialogflow with Kommunicate, let’s move to the next step: installing the Angular CLI globally.

For the next few steps, I recommend opening the AngularJS blog tutorial so that you can directly copy and paste the commands we’ll need. The direct link to the blog is available in the description box below.

For these commands to work, make sure you have Node.js installed on your PC.

Now, let’s begin installing Angular CLI. Copy the install command from the blog page, then open Terminal or Command Prompt. Make sure you run it as an administrator. Paste the copied command into the command prompt window and press Enter.

Wait for the installation to complete.

Once the installation is done, copy the command to create a new workspace and initial app project. Paste it into the command window and press Enter.

After the workspace creation is complete, copy the server launch commands and paste them into your command window. Once you press Enter, the compilation process will begin.

After compilation is complete, a browser window will automatically open, and you will be able to see the status of your app.

Now comes the final part.

Open your file explorer and find your workspace folder. For me, it was inside the System32 folder. Here is the my-app folder. Open it, go to src, and then click on app.

Once you open your app folder, you will see a file named app.component.ts. Right-click on this file, go to Open With, and open it with your preferred text editor.

The file should look something like this. You will also be able to see the title of your app, which you gave while installing it.

Once that is done, go back to your browser window and copy the code from the blog. You don’t need to copy the entire code because the title section is already present in your file.

Starting from ngOnInit, copy the code all the way up to the second-last bracket. I repeat, leave the last bracket out. You’ll see why in a moment.

Right-click and click Copy.

Now, go back to your text editor and paste the code just below the title line. As you can see, there is already a closing bracket present. That is why we left out the last bracket earlier.

Now, pay attention to the appId field. You will see a placeholder app ID written there.

So, where can you get your app ID?

Log in to your Kommunicate dashboard. From there, go to Settings, then click Install. On the Install page, you will be able to see your app ID. Click Copy.

Go back to your text editor and replace the placeholder text with your actual app ID. Paste it there, and that’s it.

Now, simply save your document.

After saving the file, go back to your browser window and refresh the page. You will now be able to see that you have successfully integrated your Dialogflow bot with AngularJS.

That’s it for this video. See you in the next one.

‍