Botnoi Voice
Dec 1, 2023
Label
UX/UI
Welcome back to another exciting episode of our intern project reviews! Today, we’re shining the spotlight on a stellar chatbot crafted by one of our former interns. Although they wrapped up their internship a while ago, this bot still stands out as a star in our team.
In this episode, we’re jazzing up an earlier version of a chatbot designed for tutoring schools. Instead of the old-school method of using dialogue boxes for Q&A sessions and logging everything into Google Sheets, we’ve upgraded to a more sleek, dedicated web form for data entry.
Check out the image above. What you see on the left is the old dialogue setup from Botnoi.ai platform. Users had to slog through endless questions without a chance to bail midway. Not exactly the best User Experience (UX), don’t you think?
Thankfully, we stumbled upon some awesome inspiration from ‘Teacher Apiwat “Teaches how to create media”’ YouTube channel. You might want to give him a follow even if you don’t speak Thai that well, because his tutorials are super easy to follow and really helpful.
But let us be real with you. Sometimes laziness just strikes, and we forget all about HTML 🤣. That’s where Chat GPT came to our rescue for coding help.
Pro tip: Don’t expect everything to be perfect on the first try. The initial results might be a bit meh. You’ll need to have a few back-and-forths with GPT to tweak the format. It also helps to do a quick Google search for HTML tips because arguing with GPT could take ages and still leave you hanging.
Once you’ve got the web page of your dreams, fine-tune the code with Teacher Apiwat’s guidance (and guess what? He even threw in the source code for us, what a GOAT).
Now, about that TRUE/FALSE field, it’s all about payment status. This setup is designed for booking class seats, and it’s exclusively for students of the tutoring institution. We’re using the Botnoi.ai platform, which, surprise, can pull data through APIs (we'll drop a tutorial on this soon 😎).
When you complete the data entry, the payment status defaults to “False.” Only after payment is made will the link for booking the class magically appear, using the registered first and last name.
For example, when registering, enter information in the "First Name" and "Last Name" fields as a test. When you click reserve a lesson in the Rich Menu, the bot will ask for your first and last name. You need to enter them to verify your payment status/student status.
If verification isn’t done yet, you’ll get a message to hold tight. Once everything’s good to go, a button will pop up, taking you straight to the booking page.
BTW you can totally switch up this process. It doesn’t have to be the TRUE/FALSE method. But we kept it simple because, well, we like it that way. 😂
Our bot has all the deets you need: instructor names, course listings, branch locations, class schedules, recommended courses for different levels, and more. Just like the chatbots from our previous episodes, it's packed with all the information you'll ever need!
กลับ
