Website Chatbot Widgets: Get the inside scoop on KaraboAI’s story
It has been a while since my last article, I know, but to my defense, our team has been hands-on working on the most exciting product to have come out of our company.
There will be cool, interesting tutorials coming in the next few weeks and months as I share a lot of what I learned during this exciting journey building KaraboAI.
Most of the people who follow me know I write a lot on Python programming and Django applications. But to create KaraboAI, I had to dig deep, put on my JS hat, write some PHP, and explore a lot of programming styles that I had never explored before. So stay tuned, because I will regularly release lessons learned, code snippets, and how we put it all together into this amazing platform.
But before going too far, do show some love on our launch page here: https://www.producthunt.com/posts/karaboai
Conversational State Management
When coding chatbots, you need to have robust state management that helps you determine the state and context of the conversation. Unlike traditional web development where you use routes to manage your requests, in chatbot programming, all requests are routed through one endpoint. When you get a request, you need to know where you are in the conversation and what conversation you are having.
I have been experimenting with many forms of state management in chatbot design since my early days developing WhatsApp applications. I have built upon those principles and evolved some of the practices to develop the logic behind the KaraboAI engine.
This will probably be one of the first tutorials I will cover on the topic.
Javascript Browser Coding
You cannot develop any type of website chatbot without understanding and being proficient at JS coding. You need the browser to run certain scripts to do the following:
- Display the chatbot
- Manage chatbot state — Up, Down
- Upload chatbot conversation (ensuring you are uploading the correct conversation)
- Manage the actual chat
- Post messages to your server and receive responses
I will dig deep into some of the best practices we used to implement these functionalities in KaraboAI.
Chatbot Design Features, CSS and Styling
Of course, we invested a lot of time and attention in creating designs that pop, draw attention, and leave a lasting impact. We also wanted users to be able to select their design, pick their colors, and create a bot that resonated with their brand identity.
At the same time, because we are building a platform, we had to incorporate all of that in a real-time, interactive way that is intuitive for the user. Check out a demo video showing how flawless our creation process is.
https://www.youtube.com/watch?v=R-ArR9LXyLc
I will share some of the tips and tricks used here. I must make a disclaimer that this was in-house developed logic. I conceptualised the idea and made it happen with some clever JS and Python coding.
All the functionalities
In our team, we are known to go over the top in many things. With every product we release, we try as much as possible to maximize functionalities and features, and KaraboAI was no different.
I think we are probably the first chatbot platform with the level of functionality that we have launched. Most companies have focused on Knowledge Retrieval AI bots and drag-and-drop customer service bots.
We wanted a Chatbot as a Service for ALL bots, so we have the following bots with our first launch:
- Data Room Chatbot — A talking Google Drive, basically. Over and above just talking to the docs, you can also request and download specific documents.
- Calendar Scheduling — A chatbot that can integrate with your Google Calendar and help schedule appointments, like Calendly.
- Data Collection — A form, basically, but with a chatbot, collect data in an intuitive and simple way.
- eCommerce Sales — Integrate WooCommerce to boost sales.
There is a bit more, but I will leave it here for now. In the coming weeks, I will dig deeper and share some of the tools and logic used in developing some of this stuff, so stay tuned.
Please feel free to leave me some comments on your thoughts.
