Technical Archives - Online Group Chat Room Plugin for Websites and Live events https://rumbletalk.com/blog/index.php/category/technical/ Embed a social group chat for communities and events. Grow your online audience with the next evolution of HTML chat room. Attach files, Mobile, Audio and Video calls. Tue, 14 Oct 2025 04:03:40 +0000 en-US hourly 1 https://wordpress.org/?v=6.2.2 How To Integrate A Chat Room Into Your WordPress Members Plugin? https://rumbletalk.com/blog/index.php/2024/04/21/wordpress-members-plugin/ Sun, 21 Apr 2024 08:18:21 +0000 https://www.rumbletalk.com/blog/?p=3280 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, […]

The post How To Integrate A Chat Room Into Your WordPress Members Plugin? appeared first on Online Group Chat Room Plugin for Websites and Live events.

]]>
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.

The post How To Integrate A Chat Room Into Your WordPress Members Plugin? appeared first on Online Group Chat Room Plugin for Websites and Live events.

]]>
27 Easy Chat CSS Tricks for Designing your Own Chat Room (WEB & MOBILE) https://rumbletalk.com/blog/index.php/2023/10/31/chat-css-tricks/ Tue, 31 Oct 2023 02:19:00 +0000 http://www.rumbletalk.com/blog/?p=560 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 […]

The post 27 Easy Chat CSS Tricks for Designing your Own Chat Room (WEB & MOBILE) appeared first on Online Group Chat Room Plugin for Websites and Live events.

]]>
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;
}

The post 27 Easy Chat CSS Tricks for Designing your Own Chat Room (WEB & MOBILE) appeared first on Online Group Chat Room Plugin for Websites and Live events.

]]>
Integrating a chat into your WordPress website https://rumbletalk.com/blog/index.php/2020/07/10/wordpress-website/ Fri, 10 Jul 2020 09:38:00 +0000 https://www.rumbletalk.com/blog/?p=8471 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 […]

The post Integrating a chat into your WordPress website appeared first on Online Group Chat Room Plugin for Websites and Live events.

]]>
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?

The post Integrating a chat into your WordPress website appeared first on Online Group Chat Room Plugin for Websites and Live events.

]]>
Chat Customization — Make Every Chat Room Unique! https://rumbletalk.com/blog/index.php/2019/06/18/chat-customization/ Tue, 18 Jun 2019 01:07:10 +0000 https://www.rumbletalk.com/blog/?p=2954 As far as online chats and chat customization go, we are all familiar with the premise. We open a window, type what we want to say, and then we wait for a reply from the other end. Chats are similar in their goal, to communicate with each other, but have a different feel. They’re used […]

The post Chat Customization — Make Every Chat Room Unique! appeared first on Online Group Chat Room Plugin for Websites and Live events.

]]>
As far as online chats and chat customization go, we are all familiar with the premise. We open a window, type what we want to say, and then we wait for a reply from the other end. Chats are similar in their goal, to communicate with each other, but have a different feel. They’re used in social media, in customer support, and pretty much anywhere else. Be it education, sports, or even stock trading, online chats are everywhere these days.

Do you think that all of that caters to each platform? Well, the answer is no. That’s why RumbleTalk offers its users the ability to customize their chat.

When you think of design, you always think of skins and themes, right? But for RumbleTalk, that’s just the tip of the iceberg. You can do more than just that. From backgrounds to changing fonts and colors, you can design your chat dedicated to your expertise.

Design your chat

You can customize the appearance of your chat room anytime. There are no restrictions when it comes to changing your design, so choose the one that suits your chat room best!

We’ve made it like that so you can customize the RumbleTalk group chat to fit your brand and site. In addition, you can also customize the look of both web and mobile versions.

We offer a quick editor for easy point-and-click customization of the web group chat in the “Design” tab of the new admin panel.

If you want to change the background of your chat, you can do so. Fonts and font sizes are also customizable. With the customization offers of the RumbleTalk group chat, you’ll never get bored of the same design.

With CSS, RumbleTalk group chats can also be fully customized in both web and mobile versions. CSS lets you change any aspect of the chat appearance. Web and mobile CSS changes are done separately, allowing another layer of custom design. We also shared some tips and tricks for web and mobile CSS so you can use it on your group chat.

chat customization

Chat Customization Options

More than just the visual aspects of a chat, RumbleTalk also offers customization for the following:

  • How much of a history of your chat saves,
  • Banning and limiting users,
  • Sending system messages,
  • Setting up admins,
  • And more! While we have most of them covered, we’re always listening to our customers’ feedback and suggestions!

Exporting your chat history

Who can export the chat history? This depends on you as the chat owner. By default, anyone can export the chat history. However, the chat owner can turn off the export button.

Another chat customization hack is the chat owner can select a date range, and then export the group chat history by using the export archive option.

Limiting users

Why limit users?

  • It can be very hectic and busy when there are too many chatters in one chat room. So, you cannot control everyone who goes in and out.
  • This may lead to some unfortunate happenings like bullying or harassment in the chat.

To avoid this, you can limit your users per chat room.

To do this, you need to click “Settings” on your admin panel. Next, click “Users.”

Click on “Add new user” and choose a role. Make sure to choose “Rooms” so that the user will only be allowed in a specific chat room.

That’s it for limiting users!

Banning users

To ban a user, you can do the following.

First, you need to log-in as an admin. Click the profile of the user you wish to ban. You will be presented two levels of banning.

  • Disconnect – The user will be disconnected to the chat, but he/she can immediately go back and log-in again. This is only a temporary ban, more like a warning or a suspension.
  • Ban by IP – A permanent ban. If a user is banned by IP address, whenever he/she logs in with any credentials, as long as it’s from the same IP address, he/she will not be able to enter the chat. This is great for bullies or harassers that can’t understand the rules of the chat.
chat customization

You can remove users from the Ban IP list by going to your admin panel, to the banned IP list and remove the IP.

When does it make sense to ban a user? As aforementioned, this can serve as a warning if it is a one-time affair. But, if a user prevails and uses the same foul language or bad behavior in the chat, then it’s probably best to just let go of this user instead of endangering the other members of the chat. This is what’s great about the chat customization features of RumbleTalk.

Sending System Messages

If you’re still not satisfied with the above features, there’s still more! RumbleTalk also allows you to customize the system message in your chat room. This means that people who enter your chat room will see this message when they enter your chat or even when you’re not around. A simple hello and when you’ll be back can be a big difference! The customization for system messages includes

  • An announcement for a virtual event,
  • A global update about something,
  • And a friendly hello!
offline message

System messages will be seen by everyone in the chat, so you’ll be sure that they are notified.

Setting up admins

Just like the previous option on banning and limiting users, setting up admins has the same procedure. By default, you’re the only admin of your chat. As time goes by, many users will become members. So, you will need help in terms of managing chatters. To set up admins, you have to do the following.

First, click on “Settings” and choose “Users.”

upload profile picture

Second, click “Add new user” and choose admin. Select what role they will be playing in the chat. It can be for rooms only or global access. This means that, if an admin only has room access, he/she can only access a specific chat room. On the other hand, when an admin has global access, he/she has access to each and every chat room.

Make sure that you’re handing access to someone you trust because he/she will be the one who will be managing the chat when you’re not around. An admin has to be responsible for everything that’s happening in the chat. May it be a positive or a negative scenario, he/she must act on it fast. Plus, you need to ensure the safety of every user in your chat; therefore, he/she must always report to you.

Web and Mobile CSS

By being the most customizable chat room available in the market, we also offer controlling your chat design by using chat CSS. If you’re a tech and design expert, CSS will be easy for you. We’ve made it even easier for CSS beginners by sharing some tips and tricks for both web and mobile CSS.

To copy and paste your CSS code, all you have to do is the following:

  1. Copy the chat CSS code from the aformentioned tips and tricks.
  2. Log-in to your RumbleTalk admin panel.
  3. In the chat settings, under “Design,” click on “Add CSS for Web Browsers”. The same goes for mobile, but choose “Add CSS for Mobile Browsers.”
  4. Paste your code and close the box.
chat customization
chat customization

Chat customization advantages

Using RESTful API, you can go more than just customizing your chat.
It lets you manage and design your chat rooms. Not only that, but it also lets you manage your admins and users. The API also allows you to monitor your audience, as well as keep a log of who’s attending and participating.

When it comes to moderating your individual chats, you also have the option to blacklist and whitelist IPs. You can order and regulate access by doing this. You can manage these lists even while the chat is live, which allows you to dynamically moderate at any time. With different access levels for different users (from user rooms to admin rooms), you’ve already got a complete package in your hands.

With RumbleTalk, every chat, every video, and every event is a unique experience. If you aren’t convinced yet, give it a try and see for yourself just how amazingly customizable nearly every aspect of RumbleTalk is! If you have any questions about customization, just connect with us on Twitter or Facebook. We’ll be glad to address your concerns.

The post Chat Customization — Make Every Chat Room Unique! appeared first on Online Group Chat Room Plugin for Websites and Live events.

]]>
11 CSS tricks to style up your mobile group chat theme https://rumbletalk.com/blog/index.php/2018/10/21/mobile-css-group-chat-theme/ Sun, 21 Oct 2018 02:05:30 +0000 http://www.rumbletalk.com/blog/?p=1779 When you want to design your chat theme using CSS, you can design your web version with the admin panel. This will change the chat’s look on your PC & laptop. See here instructions on how to do it. Now, since the mobile version is totally different than the web version, one has the option to create […]

The post 11 CSS tricks to style up your mobile group chat theme appeared first on Online Group Chat Room Plugin for Websites and Live events.

]]>
When you want to design your chat theme using CSS, you can design your web version with the admin panel. This will change the chat’s look on your PC & laptop. See here instructions on how to do it. Now, since the mobile version is totally different than the web version, one has the option to create their own custom mobile CSS design.  RumbleTalk introduced a feature that allows customers to design also their mobile group chat theme using CSS.

All you have to do is:

  1. Copy the CSS code you find suitable from this post.
  2. Log into your RumbleTalk admin panel.
  3. In the chat settings, under “Design”, click on “Add CSS for Mobile Browsers”.
  4. Paste your code and close the box.

learn more about CSS tricks here

Using CSS adjustment is an advanced feature that is available for customers with CSS knowledge. You can see below some common tricks asked by customers to control their mobile design.

1. Changing the default image of a guest user using CSS

User icon guest   You may change the default guest user for your mobile group chat to any image by using your own image URL.

#list > div:not(.admin) .user-image,
.main-message-container:not(.admin) .message-user-image {
  width: 0 !important;
  padding-right: 32px;
  background-image: url("//rumbletalk-images-upload.s3.amazonaws.com/cc244d13c0e7e7bb6c4b63830314dc61/1444667334-usericon-blue.png");
  background-repeat: no-repeat;
}

user image change via css

2. Changing the ADMIN image

User icon admin   You may change the default ADMIN user to any image by using your own image URL.
.admin .user-image,
.admin .message-user-image {
background-image: url("//rumbletalk-images-upload.s3.amazonaws.com/cc244d13c0e7e7bb6c4b63830314dc61/1444667334-usericon-white.png");
}

2. Changing the ADMIN text color

You may change the default ADMIN text color.
.admin .message-user-name,
.admin .user-name {
color: #2DA8E0 !important;
}

3. Changing the Top and/or Bottom Bar color

You may change the color of the header and footer area of your mobile chat.
.top-bar,
#top-bar-left,
#top-bar-right { background-color: #3D5B9B; }
#bottom,
#bottom button { background-color: #3D5B9B; }

header and footer color change

4. Changing the chat background color

You may change the chat background from white to any color you want.
#chat { background-color: #607D8B; }

5. Load the background image

You may load any image as your mobile chat background.
#chat { background: url("//d1pfint8izqszg.cloudfront.net/images/skins/40000/background.jpg") no-repeat scroll center center; }

change chat background color

6. Change Fonts size

You may change the size of the font to your own liking.

Font of the messages a user sends:
#chat { font-size: 20px; }
 
Username font in the chat area (next to the messages):
.message-user-name { font-size: 20px; }
 
The username font in the user’s list:
.user-name { font-size: 20px; }
 
The font in the setting buttons:
#options-mobile li a span { font-size: 20px; }

 

7. Hide Buttons in the chat menu

You may hide buttons in the mobile menu view.

Hide Full-Screen button
.options-dialog .popup {
display: none !important;
}

Hide QR code button
.options-dialog .qr-option {
display: none !important;
}

Hide font size buttons

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

Hide pin the position button
.pin-li { display: none; }

Hide sound on/off button
.options-dialog .toggle-sound {
display: none;
}

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

Hide export transcript button

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

8. Change Message Background Color

Changing the message background color includes, changing the background, changing the text color and changing the tip of the message (the small triangle pointing to the user image).
.message-bubble { background-color: #333333 !important; }
.message-text { color: #ffffff; }
.main-message-container::after {
border-left-color: #333333;
border-right-color: #333333;
}

9. Change the user’s list background color

Changing the user’s list background.
#list-frame { background-color: #183f07; }

Admin-only CSS tricks

10. Removing the admin mode option from the chat menu

This will remove the admin mode option.

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

11. Removing the option to delete chat messages from the chat menu

This will remove the option to delete chat messages.

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

The post 11 CSS tricks to style up your mobile group chat theme appeared first on Online Group Chat Room Plugin for Websites and Live events.

]]>
WordPress Chat Integration Made Easy – Connect your Usersbase with a Click https://rumbletalk.com/blog/index.php/2018/05/24/wordpress-chat-integration/ Thu, 24 May 2018 07:03:30 +0000 http://www.rumbletalk.com/blog/?p=1526 What if I tell you that a WordPress chat integration is a click away. We have tried to make user base integration easy, so we took all the heavy lifting from you and made one checkbox to allow your chat to be fully integrated with your WordPress database. Now your registered users will be able to […]

The post WordPress Chat Integration Made Easy – Connect your Usersbase with a Click appeared first on Online Group Chat Room Plugin for Websites and Live events.

]]>
What if I tell you that a WordPress chat integration is a click away. We have tried to make user base integration easy, so we took all the heavy lifting from you and made one checkbox to allow your chat to be fully integrated with your WordPress database.

Now your registered users will be able to automatically login to your WordPress chat room. This means that the chat can be accessed only by WordPress users, registered and/or by users, you decide to set as admin or simple users in the RumbleTalk users management.

Chat and User Base Integration made easy

WordPress chat integration is perfect not only for WordPress users base but for all products using it underneath, like members plugins, BBpress or BuddyPress plugin.

integarte your users base with WordPress. WP Chat Integration Made Easy

This feature is for companies that wish to create a private members group chat using their own existing users base.  It is perfect for closed group discussions, social trading websites, health support group, admin areas where discussions are private or any type of private chat rooms for websites.

WordPress chat integration with your users

After installing the RumbleTalk plugin and creating an account, instructions can be found in here.
You now can use our self-explanatory chat settings.

1. The plugin was installed and the chat account was created. You will see one default chat was created (you can add more rooms when you upgrade your plan). Now you want to connect your WordPress users to the chat. Simply check the MEMBERS checkbox (see below), save and you are done. Checking this checkbox will seamlessly set the WordPress chat integration to use WordPress registered users.

2. Embed – Add the chat to a page where users need to login in order to see (in your member’s area). Use the shortcode to do it.

WP plugin short code

3. Test – Login to your WordPress members area, go to the page you added the chat too and you will see that you automatically logged in to the chat with their member’s area login username.

Wordpress chat plugins info

4. Important – Make sure the login option “Guests” checkbox is checked. Note, Although the “Guest login” is checked, it will not allow guests to log in but only the WordPress/BuddyPress/BBpress users.

Wordpress chat integration guest login

5. Settings – Now you can change your chat settings and customize it to your liking. To do it simply click on the settings button (the options are endless).

The chat is integrated with your users base.
Now, let’s see an example of a using the chat. Let’s take an example of a website that has 500 registered users. This site is giving advice for a group of Stock Traders (the registered users). When these traders are logged in to the site (after supplying their users and passwords). They will be immediately and automatically logged in to the chat room. It is that simple.

When using members login your Social Login is now disabled

Now you made your chat members only (private room). It means only allowed registered users may log in to the chat. In addition, users will not be able to log in with their social logins. e.g

  • Guest
  • Facebook
  • Twitter

Set administrators for a members only chat room

To create a chat administrators create a user in RubmleTalk with a username that’s exactly the same as your displayname in your WordPress user base.

To do this, simply go to your chat settings and open the “Users” tab. Click on the + and add a user with a password (make sure you add the admin email).

Login as an administrator

When users will open the chat page, they will be logged in automatically. The chat will identify when a user is also an administrator and will prompt them for a password. The administrator will need to provide the password for the first time in this browser, latter on the login will be automatic.

Note, administrators name are show in red by default.

The post WordPress Chat Integration Made Easy – Connect your Usersbase with a Click appeared first on Online Group Chat Room Plugin for Websites and Live events.

]]>