Real-time chat room is a great feature to enable collaboration and increase engagement on a website.

In this tutorial, you’re going to learn how to add a chat room feature into your WordPress site by using CometChat, a robust and fully-featured chat plugin for WordPress that makes your website chat ready in minutes.

CometChat is a ready to use chat application that integrates seamlessly with over 50 CMS platforms. And yes, WordPress is one of them! By adding CometChat plugin into your WordPress website, you’ll have the power of a real-time chat app to enable your community to interact and engage each other.

Top features of CometChat for WordPress include:

• Real-time text messaging
• One-on-one and group chat
• Audio and video call
• Voice notes
• File sharing

And best of all, CometChat is very easy to implement in WordPress! Let me show you how.

Setting up CometChat

In this tutorial, we’ll pretend that we’re creating a programming tutorial website that has a premium membership feature. We’ll make real-time chat a premium feature that connect mentee with mentors that are online on the site.

First, you need to go to CometChat website and register for a free 7 day trial here.

You can sign up for the Lite plan and enter your payment details. Don’t worry, you won’t be charged before the 7 days free trial is up. You’ll even receive an email notification one day before the end of the trial to make sure you don’t forget that it’s almost over.

After you’ve completed the registration, you will receive an email containing your username and password. Use them to login into your account here.

Once inside, you need to insert your domain address and your website technology. Because we’re adding CometChat to WordPress, you can look for it from the dropdown menu.

After the setup is finished, click on “Manage” and you’ll be taken into CometChat admin panel. From this page, go to Settings > Install CometChat > Install CometChat on your website. You’ll find WordPress plugin by scrolling down a bit:

Click on the WordPress tab and download the plugin. By the way, don’t forget to take note of your License Key, API Key and Auth Key from the Api Key menu. You will be required to enter them into your CometChat plugin.

Once the download is finished, head into your WordPress website and login as admin. Upload the plugin through WordPress plugins menu:

Once installed, activate the plugin and go into its menu. It will ask you for your license key. Once verified, you’ll need to put your API Key and Auth Key:

Now you’re ready to use CometChat on WordPress. Create a new site page and name it chat page. You’ll include the shortcode for the chat room into the page:

[cometchat layout='embedded' width='990' height='600']

Here is a screenshot of my page:

Now click on Publish and go to view the page. You should have the chat room ready.

You can test the chat functionalities by opening your website from another browser. With two users, you can try to chat, send files and even do a video call. Easy!

Now that you have the chat page online, you can start making it accessible only by registered members. The rest of this tutorial will help you to disable the chat for guest users and create a paid membership site with WordPress.

This way, only registered users can use the chat page, and in order to register, they need to purchase the site membership. Let’s do it!

Making CometChat a paid feature

Since CometChat is a public chat room by default, both registered users and guests are able to access the chat room you have created. You can make the chat room only accessible by registered members.

Go back to CometChat control panel, and click on Settings > Authentication. Click on No for the option “Would you like guests to login as well”

Now when you go back to your WordPress site, you’ll see the chat room disabled for guests, but still available for your logged in user:

Now we need to add paid membership system to WordPress. Fortunately, there are lots of free membership plugins that we can use to do just that! I’m going to use Simple Membership Plugin for this tutorial, and you can try to use another plugin once you understand the concept.

For now, download the plugin or install it directly from your site’s plugin menu.

Once installed, we need to disable registration from WordPress website itself in the Settings > General menu. Uncheck the “Membership” option like in the picture below:

Now let’s replace it with Simple Membership. To do so, go into the WP Membership settings from your WordPress sidebar and click on Membership Levels > Add level.

You need to enter membership level name and the default WordPress role assigned to this member. The default Subscriber role is fine for this example, but feel free to change it to fit your requirement:

Now that we have a membership level ready, we need to take care of the payment system. To do so, go to WP Membership > Payments > Create New Button.

You can select between PayPal, Stripe and Braintree payment options.

I will show you how to make a Stripe payment button here. Select Stripe Buy Now option and click on Next.

All payment options will need you to fill in the Button Title, Membership Level, Payment Amount and Payment Currency. The rest of the options might vary depending on what payment you select, but these four will be the same.

Once finished, you will be taken into the Manage Payment Buttons tab, where you can get the shortcode needed to display the payment button in WordPress pages:

Grab the button shortcode and go into the Pages tab. Here you’ll see several pages that have been automatically created by Simple Membership. These pages are useful for you to edit as you see fit:

For now, we will add the payment button into the Join Us page, so go ahead and edit the page. Inside this page, you can list the benefits of registering on your website and place the payment button below:

To change the text of the payment button, you can use the button_text parameter. I’ve changed mine to “Pay With Stripe $39” but you’re free to not include the parameter at all.

Your WordPress site is now ready to accept payments using the payment button. If you want to test the payment, you can go into WP Membership > Settings > General Settings menu and scroll down to the bottom to check the Enable Sandbox Testing option.

Please keep in mind to turn off the sandbox testing later, because you won’t get any payment if you forget!

You now have a complete WordPress premium chat feature with a paid membership system integrated. Well done!

Conclusion

You’ve just learned how to add CometChat as a premium feature to WordPress site members without any code at all. With this, you’ve saved time and money that you could’ve spent on creating a fully-featured chat plugin from scratch. Your welcome!