How To Integrate A Chat Room Into Your WordPress Members Plugin?

If your WordPress hosted website has a membership option (plugin), there is a 50% chance that you are using a WordPress members plugin. As you probably know, members-only chat room is something that is essential for community engagement, whether a daily chat or once in a while.

Before we dig into the group chat plugin, let’s first understand the member’s plugin concept. There are several WordPress member plugins, though they all essentially perform the same function. Plugins allow a webmaster to set up a members-only area on their website with exclusive content and special features.

Choosing the right plugin for your site is important, as the various features the plugins offer can affect how many people stay engaged on your website.

Below, we will answer a few questions you may have regarding the integration of a chat room into your WordPress members’ plugins.

What Are Members Chat Rooms?

A members chat room is a chat room that can only be accessed by website members.

Having a members chat room on your website can be helpful. It can encourage site visitors to become members in order to participate in conversations and join the site community.

A chat of today includes also video and audio messages and video and audio live calls.

What Types of WordPress Members Plugin to use?

When in the market for a plugin, it is important to do a little research before making a decision. There are many options out there and we will discuss a few below.

  • MemberPress – MemberPress is a good option when looking for a plugin. It is simple to set up and has quite several features. Webmasters can have a lot of control over who accesses what on their site and at what time. This plugin also conveniently allows for integration with other services you may want to use on your website. Some of these include MailChimp, MadMimi, and BluBrry. The company uses PayPal and Stripe, making it easy for members to make payments. You can choose from two versions of this plugin, either the Business Edition or the Developer Edition. Users of MemberPress often say that this plugin is one of the simplest to use with WordPress, especially for beginners.
  • Paid Memberships Pro – This plugin offers a couple of options. There is a basic version that is entirely free to use, as well as the standard version for a yearly fee and the plus version. Keep in mind the basic free version does not offer many features but may give users a taste of what they can expect in the more advanced versions. Paid Membership Pro also allows for integration with various other services and WordPress members plugins, as well as adding in the Plus version. For users who don’t have a lot of experience working with websites and plugins, this particular one may be rather difficult to use.
  • Ultimate Member – Ultimate Member is yet another option when it comes to plugins. This plugin is extremely simple to use, as no knowledge of coding is required to integrate it into your website. It adapts to mobile devices, allowing users to access members-only content from their computers as well as their mobile devices. Ultimate Member offers a number of extensions that webmasters can pay for, such as Instagram, MailChimp, and User Reviews. There are also a couple of free extensions, like the ability to display what users are online.

How to Integrate a Plugin Into Your Website

We built the RumbleTalk chat room plugin to integrate with most members plugins.
Most WordPress members plugins use the WordPress built-in user management.

RumbleTalk chat room service is integrated with WordPress built-in users management. This means that both the chat and members use the same users base and therefore are integrated by nature, the integration can take practically 1 minute.. (Note, Integration on the chat side is done with one checkbox click, we made it extra easy).

 

So In practice, what’s next?

You will need the two components installed in your WordPress to create chat room integration.

This can be quite handy because if you have a WordPress Members plugin installed, you can easily incorporate the Rumbletalk plugin into your WordPress website. This will allow you to have a members-only chat room.

The steps to do so are below (we just use ultimate member as an example).

members plugin with a chat room

Step 1
1 – Install the Member plugin and follow the setup instructions.

2 – Install the  RumbleTalk chat room plugin and follow the setup instructions.

Performing these two steps will automatically integrate the chat with the Members Plugin users base. By doing so, we will allow only members of the site to log in automatically to your chat with their username.

Step 2
After the installation of the plugins has finished, you then must create an account via the RumbleTalk chat plugin.

Account wordpress setup

Step 3
Once done, you will see the window below. Make sure to check the “Member” box to complete the process.

detailed info on the wp plugin

For more information and troubleshooting, check this link

You are done! 

As you can see, it is quite a simple process!  If you need more information about settings or the installation process, you can check out the introductions in here.

For any additional questions or comments, please contact us at support@rumbletalk.com.

27 Easy Chat CSS Tricks for Designing your Own Chat Room (WEB & MOBILE)

Controlling your chat design using group chat with custom CSS is easy with our advanced design features.

RumbleTalk sets itself apart from the competition by being the most customizable group chatroom available on the market. The latest custom css tips and tricks can be found in here.

A lot of our customization features are built into our settings menu, making this customization available to anyone at any tech-literate level, and or CSS experts. RumbleTalk group chat with custom CSS can be completely transformed.

But not everyone knows CSS, so we’ve put together this list of easy chat CSS tricks that anyone can copy and paste into the advanced design tab of their RumbleTalk account to get the benefits of a fully customized group chat room.  (Note, for the mobile version, we have other CSS tricks).

All you have to do is:

  1. Copy the chat CSS code from this list.
  2. Log in to your RumbleTalk admin panel.
  3. In the chat settings, under “Design”, click on “Add CSS for Web Browsers”.
  4. Paste your code and close the box.

Group Chat Css tricks

In this post, we’ll cover the following chat CSS tricks:

User Icons – Chat CSS tricks

  1. Change the default guest user icon image
  2. Change the user icon size in the user list
  3. Change the user icon size in the chat area
  4. Hide the user icons in the user list
  5. Hide the user icons in the chat area

Functions – Chat CSS tricks

  1. Hide system messages
  2. Hide message date & time
  3. Hide all option buttons
  4. Hide specific option buttons
  5. Insert a clear chat area button
  6. Hide the number of viewers and listeners
  7. Hide the “Go To Facebook Profile” button
  8. Change the emojis

Text – Chat CSS tricks

  1. Change the group chat administrators’ text color
  2. Change the text displayed in the guest login button
  3. Remove the login type label from the user profile
  4. Add borders to the username text
  5. Add borders to the message text
  6. Add an element above the chat in full-screen
  7. Hide the QR box
  8. Add a closing icon to the floating bouncing icon
  9. Remove the field image and description in the register
  10. Set max image size in a chat
  11. Set max YouTube size in a chat
  12. Hide Twitter Link in Users Profile
  13. Disable group chat and allow only private chats
  14. Hide scrolling for non-moderators

1. Change the default guest user icon image

You can change the guest user icon to any image by inserting the
image URL into the following code.
.guest-default-image {
background: url("https://www.test.com/storage/usericon.png");
}

Group Chat Custom Avatars

2. Change the user icon size in the user list

.user-image {
width: 16px;
height: 16px;
}

large custom user icons

3. Change the user icon size in the chat area

.message-user-image {
width: 16px;
height: 16px;
}

large user icons

4. Hide the user icons in the user list

.user-image { display: none; }

hide user icons in group chat

5. Hide the user icons in the chat area

.message-user-image { display: none; }

hide chat user icons

Note, if you like to remove the white tooltip next to each message, you can use this code
.main-message-container::before,
.main-message-container::after { content: none; }

6. Hide system messages

System messages such as “user joined the conversation” and “user
left the conversation” appear in the group chat area.

.system-message-text { display: none; }

system messages can be turned off

7. Hide message date & time

Each message by default will be stamped with the date and time it
was sent. Use this code to remove this feature.

.message-date { display: none; }

group chat time stamps

8. Hide all option buttons

#options { display: none !important; }

Hide Buttons

9. Hide specific option buttons

Choose the buttons you want to hide. Each of these lines of code
can be copied and pasted individually.

.options-dialog .export {
display: none !important;
}
export chat transcript
.options-dialog .popup {
display: none !important;
}
chat fullscreen
.options-dialog .toggle-sound {
display: none;
}
chat menu

.options-dialog .qr-option { display: none !important; }

qr code

.options-dialog .logout { display: none !important; }

/* This option only applies to mobile */

logout mobile

.options-dialog .toggle-private {
display: none;
}
chat menu

.options-dialog .font-size {
display: none;
}
chat menu

.options-dialog .admin-mode-switch {
display: none !important;
}

/* This option can only be applied by admins */chat tool

.options-dialog .clear-messages {
display: none !important;
}

/* This option can only be applied by admins. */clear chat messages

10. Insert a clear chat area button

By default, the clear all button is hidden. Insert this button if you
want to have the option to clear all options without deleting them.

#options #clear { display: inline-block !important; }Group Chat Clear All Button

11. Hide the number of viewers and listeners

By default, the number of viewers and listeners is displayed in the
chat. Add this code to remove it.

#info { display: none !important; }

Group Chat Audience

12. Hide the “Go to Facebook Profile” button

When a user uses Facebook to log into the chat, a button will by
default appear in their group chat profile for others to go to their
Facebook profile. Use this code to remove that option.

#user-info .facebook-button { display: none !important;}

Facebook Profile Button

No Facebook Profile Button

13. Change the emojis

Use the following code for each emoji, where the number 10 represents one of the emojis (from 1 to 33, excluding 6), and the URL represents the image you want to replace it with.

.smiley-10 {
width: 0 !important;
padding-right: 30px;
background-image: url("https//www.exampleurl.com/smile2.gif");
height: 30px;
}

Customize Group Chat Emoji's

14. Change group chat administrators text color

Set yourself apart as the group chat administrator by changing the
color of your username and message text. By default the color is red.

Group Chat Administrator

In the user list

.admin .user-name { color: orange; }

In the group chat

.admin .message-user-name { color: orange; }

15. Change the text displayed in the guest login button

Replace the text “new name” but be certain to leave the (‘) marks
around it.

“color: #000” is the color of the text. In this case, the text will
be black. You can change this with any hex code.

“-20px” is the relative horizontal location of the text. Play with
this value until the text sits in the center.

#login-guest span {
color: transparent !important;
position: relative;
}
#login-guest span:after {
content: 'Join Us!';
position: relative;
color: #fff;
left: -20px;
}

Custom Guest Login Text

16. Remove the login type label from the user profile

.login-type { display: none; }

Group Chat Login Option

17. Add borders to the username text

This code will add black and bold borders to the usernames in the chat message area.

.message-user-name{
font-weight: bold;
color:rgba(0,150,245,1.00);
text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black;
}

Bold User Names

18. Add borders to the message text

This code will add black and bold borders to the text in the chat area.

.message-text{
color:#fff;
text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black;
font-weight: bold;
}

Bold Message Text

19. Add an element above the chat in full screen

Many ask us how I can add a player on top of the chat area.
The following code will be added to your HTML (not on the RumbleTalk CSS area) in full screen.

<style>
<inner element height> - the height of the extra element
#wrapper { height: 100%; }
#extra-element {
width: 100%;
height: <inner element height>;
padding: 0px;
}
#chat-wrapper {
position: relative;
width: 100%;
height: 100%;
}
<chat-iframe> {
max-height: calc(100% - <inner element height>);
}
</style>
<div id="wrapper">
<div id="extra-element">THE CODE YOU WANT TO BE ON TOP OF THE PAGE </div>
<div id="chat-wrapper">THE CHAT CODE</div>
</div>

add external player on top of your chat.

20. Hide the QR box

When you want to hide the QR option in your chat.

QR code hide

To remove the button, add the following:

.options-dialog .qr-option { display: none !important; }

To keep the button for chat moderators only, add the following:

.moderator #options #opts { display: list-item; }

21. Add closing icon to the floating bouncing icon

If you want to add a closing icon to the floating icon. You can add this code and make sure you change the hash code (in red).
(function(){
var hash = 'YOUR_HASH',
handle;


handle = setInterval(
function () {
if (
!window.RumbleTalkChat ||
!window.RumbleTalkChat[hash] ||
!window.RumbleTalkChat[hash].mainDiv
) {
return;
}


clearInterval(handle);
if (hash == 'YOUR_HASH') {
throw new Error('Someone forgot to replace the place holder "YOUR_HASH" with your chat\'s hash');
return;
}


var img = new Image();
img.src = 'https://d241b8qep9dzid.cloudfront.net/20190625083406/italic.png';
img.style.cursor = 'pointer';
img.style.position = 'absolute';
img.style.bottom = 0;
img.style.right = 0;
img.onclick = function () {
window.RumbleTalkChat[hash].mainDiv.parentNode.removeChild(window.RumbleTalkChat[hash].mainDiv);
};


window.RumbleTalkChat[hash].mainDiv.appendChild(img);
},
100
);


}());

22. Remove the image and description of the field in the register dialog box

Remove the field image and description from the registration form.
.register-login-dialog form .row:nth-child(n+4) {
display: none;
}

23. Set max image size in a chat

Add the maximum size of an image to the chat conversation. Clicking on a small image will open it in its original size.
.message-text a img {
max-width: 200px !important;
max-height: 200px;
}

24. Set max YouTube size in a chat

Add the maximum size of a YouTube video in a chat. Clicking on a small image will open it in its original size.

.message-text .youtubeWrapper {
max-width: 300px !important;
max-height: 300px;
  padding: 0;
height: auto;
}
.youtubeWrapper > iframe {
height: auto;
position: static;

}

25. Hide the Twitter Link in user profile

Hide Twitter Link in user profile (when clicking on the gear icon in the private chat ).
.twitter-button {
display: none;
}

26. Disable group chat and allow only private chats

If you want to allow only private chat discussion so all can talk in private but not have a group discussion then choose a chat type “Group chat”, and then add the following CSS to both the web and mobile CSS versions.
#content,
#text:not([readonly]),
#chat-extra,
#send-button
{ display: none !important; }

27. Hide scrolling for non-moderators

If you want to prevent the scrolling of the chat message area – which will prevent regular users from accessing old messages, add the following CSS code to both the web and mobile CSS versions:

body:not(.moderator) #chat {
overflow-y: hidden;
}

Integrating a chat into your WordPress website

Since the past years, more and more people are starting their own WordPress websites. WordPress is the most popular website builder.

You can dedicate a WordPress website to any niche that you want. Because WordPress is flexible, it can be used for businesses, blogs, or a personal journal. It holds many possibilities.

As WordPress is user-friendly, beginners and developers can create customized and highly intuitive websites. WordPress has plugins that users can download to enhance their websites.

These plugins help users to personalize their websites and this is what we’ll be talking about today. Since we’re focusing on a WordPress website, how can you integrate a chat on your site?

Here’s a quick and easy guide to the RumbleTalk chat plugin and what features it has.

Guide to your own chat

WordPress has a plugin website for all of the plugins available to use in WordPress. To add RumbleTalk to your WordPress website, here’s what you need to do.

  • Download and install the RumbleTalk chat plugin.
  • Register and create your chat. Go to WordPress Settings, choose RumbleTalk chat, and register (email + password).
  • For users that already have an account, click on “Already have account?“. Then, add your 2 fields token hyperlink and add your account token (two fields can be found in your admin panel under Integration in Account Settings).
  • After registering, your chat code (hash) will show in the chatroom code field. This is a unique string for every chat room.
  • NOTE: In case you do not get the hash code, you will need to manually register at RumbleTalk and get your code.
wordpress blog

  • Setting your chat plugin:
    • Add chat room – Create more chat rooms.
    • Members – Connect your chat to your members’ userbase. Let your members to auto-login to your chat.
    • Size – Resize the chat. In some WordPress themes, the size of the chat might be smaller or longer than expected. In that case, see troubleshooting.
    • Floating – If you want your chat to show as an icon in the lower right corner, choose this.
    • Settings – Change your chat design, add admins, etc.
wordpress website
  • To add RumbleTalk group chat to your site, go to a page or post in your WordPress admin.
  • In case you have only one room, use the phrase (rumbletalk-chat) in your post’s visual mode to position the chat widget where you need it.
wordpress blog

  • If you have more than one room, use the green button or add the exact hash in the phrase (rumbletalk-chat hash=”insert here your chat hash”).
wordpress website

After those steps, see the chat on your WordPress website.

Why should you add a chat on your WordPress website?

Since lots of your site visitors are coming and out of your website, why don’t you grab the opportunity to convert them to followers?

By being followers of your content, they are more than just frequent visitors. They keep up with your latest updates, posts, and follow you on your social media sites.

Visitors usually like what they see on a website. If they visited your site, then it means that they’re interested in your content. What if you made a group chat wherein you can talk with your followers?

If you’re active on your WordPress website, then you can chat with anyone who wants to chat. It can be a visitor or follower. As long as they’re on your WordPress website, then they can join the group chat.

Additionally, if you’re not active, you can open the group chat for anyone. Since the group chat is public, followers and visitors alike can chat with each other.

This can help strengthen your community and leads to higher visitor conversion rates.

Add more than one chat room

If your site is gaining more traffic, then you can add more chat rooms. It’s easy to add chat rooms with the RumbleTalk chat plugin. Just go to your chat settings and add how many rooms you want.

wordpress website

Set entrance and subscription fees for your chat

With PayConnect, you can actually charge users for entering your chat. You can choose an entrance fee, where users have limited chat access.

Or, you can choose subscription fees for unlimited chat access.

rumbletalk

As the chat owner, this depends on you. Do you feel that your users would like to access your chat for a short time only or a longer period of time?

With the RumbleTalk chat plugin, you can add paid access so you can monetize your WordPress website.

Adding InText Keywords to redirect users

Now that you have your chat, you can add keywords where you link URLs to specific keywords. For example, if you use Facebook as a keyword, you can redirect users to your Facebook page.

To add a keyword, go to Settings on your admin panel. Then, choose Manage Keywords.

elearning

Input the keyword and the URL you want it to redirect to. Keywords are shared in all rooms. Therefore, if you have multiple chat rooms, note that your keywords will apply to all chat rooms.

Your WordPress website chat

group chat in wordpress

If you follow the instructions above, it’s easy to add a chat on your WordPress website. With a chat, you can easily connect with your site’s visitors or followers.

No need for third-party websites or social media groups/messaging app. You have it all in one place.

This is what integrating a chat does to your WordPress website. It increases your site’s traffic and the length of stay of your visitors. This gives a higher average than those without a chat.

Interaction is key to these visits. Also, by chatting with your frequent visitors, you can create a community. By building a community, you lead more visitors and followers to become your dedicated circle.

So, what will you choose? A site without a chat or a site with one?