This article has been migrated from my old blog. Things may have changed since that time. If you find any wrong content in this post, please mail that to gouravkhunger18@gmail.com or write in the comments below. Thank you :)
So in this post, I’m gonna tell you how you can build custom Chat Bots(a script that will reply whenever you try talking with it). First of all, we are going to make a chatbot with DialogFlow. It is Google’s service to let developers make Google Assistant like projects for their websites and apps! So without wasting any time, let’s start building our chatbot.
First, go to DialogFlow and sign-up with your Google account. Then build a new Chatbot. On the left sidebar, head over to Small Talks and fill in the answers that the bot will give when asked about simple details. After doing this, go to the Intents tab and add the user expressions for different texts that the user enters. Save everything!
Now, head over to Kommunicate.io. It is a very cool service to integrate DialogFlow bots(or custom Webhooks for other service providers) into your website. Also, you can integrate those bots into your Android/IOS/Wix/Wordpress/etc apps and websites. Just sign-up there and add your first bot there, I will publish a new post for understanding how to use the DialogFlow console:
- Go to Dashboard.
- Click the bot icon on the left sidebar.
- Click Dialogflow integration.
- Copy the Developer Token and Client Token and paste on the fields.
- Save it!
Now you’ve added a bot to the Kommunicate account, now it's time to publish it to the site. Follow me for this
- Log in to your Kommunicate.io account.
- Click the cog(settings) icon on the bottom left of the sidebar.
- Head over to the Install section.
- Click the Copy code button, now the code is copied
- Login to the CPanel/Plesk account linked to your site.
- Edit the index.htm file and paste the code into the tag of the file.
- Save your changes
Now you are good to go. You have installed a custom DialogFlow bot into your website with a very beautiful design.
Thumbnail credits: pch.vector - freepik.com