How to Build a Chat App With Next.js & Firebase
In this tutorial, we will guide you through building a simple chat application with Next.js and Firebase.
Do you want to start generating revenue from your WordPress site?
WordPress is best known as a blogging platform, but the easiest way to monetize your website is through user-generated content.
Today, some of the world’s most lucrative tech companies produce very little of their own content. Facebook, Twitter, LinkedIn, TripAdvisor and Trustpilot all found success by providing a platform for user-generated content, and then monetized that content using tools such as advertisements and subscriptions.
Want to break into this potentially lucrative market? One popular option is to create a business directory.
In this tutorial, I’ll show you how to create a business directory where tutors can offer their services to prospective students, and where students can find the teacher that’s the perfect fit for them.
Did you have a different industry in mind? You can use the instructions in this article to create virtually any business directory. With just a few tweaks, you could create a directory that helps people connect with plumbers, freelancers, accountants, or simply find the best restaurants, cafes, and bars in their local area!
To start, we need to give teachers a way to register with our website.
Once a teacher has created their account, they’ll be able to submit a listing by completing a form. This listing will then appear in our public directory.
Students can browse the directory, either by searching for relevant keywords, filtering by category, or scrolling through the entire directory.
When a student finds a listing that catches their interest, they’ll be able to click through for more information.
Out-of-the-box, students will be able to send their chosen teacher a message using a contact form but to provide a better user experience we’ll also give students the ability to communicate with teachers in real-time, by exchanging instant messages.
You can quickly and easily add a business directory to your website, using the free Business Directory plugin:
The Business Directory plugin will now create a page where prospective students can view and search your website’s listings, and where tutors can register with your website and start submitting their own listings.
By default, the automatically-generated directory page has the title “Business Directory.” You may want to change this title to something that better reflects your website:
Reload the Business Directory page; it should now be using your updated title.
Since the directory will form the core of our website, we need to ensure it’s the first thing visitors see, by setting it as our homepage:
Try reloading your website - the business directory should now be the very first thing you see.
Try loading your website in a browser or tab where you aren’t currently logged into your WordPress account, and then give the “Create a listing” button a click.
You should now be asked to log into your account, but there’s a problem - currently, there’s no way to register with the website. How are people going to submit listings, if they can’t even create an account?
You can quickly add the missing membership functionality, using the free Ultimate Member plugin:
Ultimate Member will now create all of the following pages: Account, Login, Logout, Members, Password Reset, Register, and User.
Next, we need to make sure the Business Directory plugin is using Ultimate Member for its login and registration functionality:
Try clicking the “Create a listing” button again.
You should now be redirected to Ultimate Member’s login page, where you can log in to an existing account, create a new account or recover a lost password.
Currently, a registered user can only access their account by selecting the “Create a listing” button and then clicking “Login.” This isn’t exactly a great user experience, so let’s make our website easier to navigate by creating a menu, and then displaying different options depending on whether the person is logged into their account:
Spend some time interacting with your new menu - the menu items should change depending on whether you’re logged in, or logged out of your account.
Now, visitors will be able to browse your website’s listings, get more information about any listing that catches their eye, and get in contact with registered tutors using the attached contact form.
However, your typical Internet user is impatient and increasingly expects an answer right now. To provide your tutors and students with the best experience, who not let them communicate in real-time, by exchanging instant messages?
In this final section, I’ll show you how to add powerful live chat to your website, using the CometChat Go plugin.
If you haven’t already purchased CometChat Go, then you can grab your license now. We also offer a 7 day trial, so you can add CometChat Go to your website for free and see exactly what our plugin has to offer, before deciding whether it’s right for you.
To add live chat to your site:
If you reload your website, then you’ll see that it already has live chat functionality.
Anyone who visits your website can now view a list of everyone who’s online, and send instant messages to any of these people in real-time.
However, we want to facilitate one-on-one conversations between prospective students and the teacher they’re interested in working with - not just whoever happens to be online at that particular moment!
To provide a better user experience, I’m going to add an “Instant chat with me!” link to every listing, so students can launch a private CometChat Go conversation with that specific teacher.
First, we need to add a docked chat window to the “User” page:
[cometchat layout='docked' width='990' height='600']
Every time someone clicks the “Instant chat with me!” link, CometChat Go needs to identify the person behind this particular listing, and then launch a private chat session with that person.
Extracting the tutor’s name does require us to add some code to the Business Directory plugin, but I’ll be providing the exact code you need, so you can copy/paste it straight into the plugin’s template:
And that’s it! A live chat button will now appear on every listing.
Since we’ve just setup our website, chances are it doesn’t contain any listings yet, so if you want to see live chat in action then you’ll need to create a test listing.
Imagine you’re a tutor who’s visiting this website for the very first time, and you’ve decided to create a post offering your services.
To create a listing, you’ll need to complete the following steps:
By default, Business Directory requires an admin to approve each listing, so:
If you want to delete this test listing, then log into your WordPress account and navigate to “Directory > Directory.” Find the listing you just created, hover over it and then click “Trash.”
Since all listings require admin approval, you may want to receive an email every time a new listing is submitted. To start receiving email notifications:
You’ll now receive a notification every time someone submits a new listing.
In this tutorial, we setup a network for students and teachers, without writing any code.
If you’ve been following along, then tutors will now be able to register with your website and submit listings offering their services. Students who visit your website can browse these listings, and communicate directly with teachers using either the contact form or CometChat Go.
We’ve laid the foundation for a teacher and student network, but there’s lots more you can do with this website. How about adding a map so students can search for tutors in their local area? Or you could turn your directory into a complete learning hub by adding a blog, forum, education guides, and other resources that students and teachers will find helpful.
Have you used Business Directory, Ultimate Member and CometChat Go to create a learning network? Let us know in the comments below, or connect with us on Twitter or Facebook.