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

Embracing The Return of Chat Rooms for Online Communities

Chat rooms seem to be popping up everywhere these days. You may be curious about the reasons behind this phenomenon and why website and app owners find the chat room arena so appealing. The return of chat rooms is an interesting phenomenon, especially in the AI era.

Chat Rooms for Online Communities has evolved from simple text rooms to moderated pre-approve messages (queued messages) to video calls and polls.

Let’s start with the evolution of chat rooms. Chat has become an integral part of our daily work routine. Surprising statistics indicate that, over the past three years, chat communications have accounted for nearly 50% of all digital communication mediums.

Key reasons for chat rooms’ return

In the realm of the digital age, chat rooms initially dominated, but in 2011, a shift towards one-on-one chats, particularly through support chat, emerged. Subsequently, the mobile era facilitated seamless communication through individual chats. Concurrently, team chats and gaming chats began to flourish.

However, we are now witnessing the return of social rooms, commonly called group chat or chat rooms, as both open and closed communities increasingly embrace them.

The main reason for the return of chat rooms post-Corona is the changes in the business community, here are the reasons in a nutshell:

Community Building:

Many businesses have recognized the importance of leveraging communities to boost sales and foster customer loyalty. Consequently, creating customer communities has emerged as a significant trend. Businesses are utilizing these communities to gather customer feedback and facilitate peer-to-peer interactions among customers.

Privacy and Anonymity:

Previously, chat rooms were predominantly associated with niche industries and attracted specific types of individuals. However, in the present day, as chat rooms are widely utilized for diverse purposes, the emphasis on privacy and encryption in communication has instilled a sense of reliability.

Multiple Rooms & API:

The advancement of chat room technology has simplified the process of integrating chat rooms into websites or applications through API calls, such as REST Angular. In today’s era, the Software as a Service (SaaS) industry enables users to create numerous chat rooms using APIs and provides the flexibility to control various aspects of the rooms directly from their servers.

The COVID-19 and world instability:

The Corona pandemic has acclimated us to increased reliance on online communication, with chat platforms becoming an important way of communicating for various interactions, be it group discussions or team collaborations. The return of chat rooms got a huge boost by the Corona period and chat rooms became familiar to most individuals.

Topic-Specific Focus:

Many chat rooms are dedicated to specific interests or niches, allowing users to engage in discussions tailored to their passions, hobbies, or professional fields.

Get a free chat room now

When customers are asked about the reasons behind the widespread use of chat interaction, an overwhelming majority of 79% express a strong preference for its immediate response.

This statistic underscores the growing demand for quick and efficient communication in today’s fast-paced world. Chat interactions offer the convenience of real-time engagement for both customer support and chat rooms, allowing customers to obtain information, resolve issues, and receive in-person support, AI support, or community support without the delays associated with traditional communication channels.

The instant nature of chat provides a sense of immediacy and responsiveness, empowering customers with timely solutions and enhancing their overall experience. As a result, businesses are increasingly adopting chat platforms to meet customer expectations and gain a competitive edge in the market.

request a demo


Open or members-only chat room?

When it comes to building a community and engaging audiences, businesses have the option of creating a members-only chatroom or utilizing an open chat platform. Each approach offers distinct advantages, and the choice depends on the specific goals and requirements of the business. Let’s explore the key points to consider when making this decision.

Building a Community for Members Only: A members-only chatroom provides businesses with a higher degree of control over the interactions within the community.

By limiting access to registered members, businesses can ensure a more focused and exclusive environment. This exclusivity can foster a sense of belonging among members, creating a stronger bond and encouraging deeper engagement.

Additionally, a members chat room allows users to communicate directly with each other, facilitating networking, collaboration, and the exchange of valuable insights.

Members only group Chat for closed communities

Utilizing an Open Community: On the other hand, an open chat platform offers businesses versatility in its usage.

It can be seamlessly integrated into various scenarios, such as live events, alongside broadcasting videos, or during open radio shows.

An open chatroom allows businesses to reach a broader audience, including both members and non-members, maximizing their potential reach and visibility. This accessibility can attract new users, encourage participation from a diverse range of individuals, and provide an opportunity for businesses to showcase their expertise to a wider audience.

Ultimately, the decision between a members-only chatroom and an open chat depends on the specific objectives of the business. If the primary goal is to build an exclusive community with controlled interactions, a members-only chatroom is ideal.

On the other hand, if the aim is to leverage the chatroom in various contexts and engage a broader audience, an open community approach may be more suitable.

Engagement in chat rooms.

One of the main reasons for the return of chat rooms is the fact that technological advancement made chat more robust and feature-rich.

Most chat room platforms offer a range of unique features that can significantly enhance engagement among participants. These features go beyond basic text-based communication, providing interactive elements that foster meaningful interactions. Let’s explore some of the key features that make chat rooms a powerful tool for engagement.

Polls:

One compelling feature of chat rooms is the ability to conduct live polls. This feature allows businesses to gather real-time feedback from their community members, enabling them to make informed decisions based on collective opinions. Polls encourage active participation, spark discussions, and give participants a sense of involvement in shaping the direction of the conversation.

Pre-moderation in chat rooms:

Some chats have this option of queued chat where the admin approves messages before they’re visible, ensuring a safe and respectful environment for participants.

If the message is approved, it is published in the chat room for all participants to see. However, if the admin deems the message inappropriate, it will be rejected and not shown to anyone in the chat room.

Video and Audio Messages:

Incorporating video and audio message capabilities into chat rooms can significantly enhance engagement. Users can express themselves more effectively by sharing visual or auditory content, adding a dynamic and interactive element to the conversation. This feature enables participants to convey emotions, provide visual demonstrations, or share multimedia content, resulting in a more immersive and engaging experience.

chat rooms features including polls and video calls

Private Chats:

Another valuable feature is the option for private one-on-one conversations within the chat room. Private chats enable users to have more personal and confidential discussions, fostering a deeper level of engagement. This feature is particularly useful for businesses looking to provide personalized support, address individual concerns, or facilitate networking opportunities among community members.

Private Video Calls:

Chat rooms can also facilitate private chat with video calls, allowing users to connect face-to-face in a secure environment. Private video calls are ideal for conducting virtual meetings, providing personalized consultations, or hosting exclusive events within the community. This feature enhances engagement by promoting direct and interactive communication, fostering stronger relationships among participants.

By incorporating these unique features into chat rooms, businesses can create a vibrant and interactive space that promotes engagement. Whether through live polls, private chats, video and audio messages, or private video calls, these features offer diverse ways for participants to connect, collaborate, and actively participate in the conversation.

SaaS chat room platforms

There are many SaaS chat platforms. When you wish to consider the right solution for you, you will need to consider the next points

Stability – this is the most important thing when choosing a platform.
Website load – some services might slow down your website.
Pricing – is very important especially when many rooms are needed.
Features – Check that you have the features you need in the service.

chat rooms automatic tools

As part of the return of chat rooms overview, you may see below some of the selected SaaS services out there (there are more for sure):

RumbleTalk

RumbleTalk is ideal for any type of website or app. It is equipped with a powerful unique pre-approve messages feature in addition to polls and video calls.

It can be added to any website through an HTML copy-and-paste code or chat APIs.

An interesting option is creating your chat page without having a website using RumbleTalk’s admin panel. The page can be used as a minisite or landing page for a business or offered services.

RumbleTalk’s pricing has 4 tiers: Free, Professional, Business, and Enterprise. The Free plan includes a basic plan where you can try out the features before you proceed with the other 3 tiers.

If you’re holding large-scale events such as international conferences or virtual events, you can talk to Rumbletalk sales to arrange an Enterprise plan.

Cometchat

CometChat offers an array of solutions for developers looking to quickly integrate app chat, video, voice messaging, and moderation tools across a variety of industries. With support for 10 SDKs and pre-built chat plug-ins, CometChat offers flexibility and ease of use.

Their pricing is divided into three tiers: Essentials, Pro, and Custom, with a significant difference in cost until your app starts to scale.

PubNub

Compared to other real-time app development platforms, PubNub offers a lower-level approach that doesn’t include pre-built visual components for the front end. This means that developers will have to invest time and resources to create their own chat experience.

On the pricing front, PubNub offers a Starter plan and for larger-scale projects, there is a custom-priced Enterprise plan that offers volume-based discounts.

Twilio

Twilio’s Conversations API is a versatile tool that enables businesses to interact with their customers via voice, SMS, video, chat, and email. With the API, developers can integrate chat functionality into their apps, and extend the feature-richness of an in-app chat experience to an omnichannel communication and user engagement strategy.

Agora

Agora’s chat platform provides developers with flexible customization, reliable network quality, and ease of implementation to create a high-quality chat experience for their users. With over eight SDKs available, developers can add customized messaging features to real-time video and voice apps.

Stream

Stream’s Edge infrastructure and 99.999% SLA uptime power activity feeds and chat for both enterprise organizations and billions of end-users worldwide.

Stream provides custom UI kits, extensive documentation, and tutorials for its React, React Native, iOS, Android, Flutter, Compose, Unity, and Unreal SDKs. Its easy-to-integrate solution typically takes only a few days to a week to implement, while other chat APIs can take months.

Sendbird

Sendbird is a chat provider that offers APIs, SDKs, and UI kits to enable customers to quickly create a feature-rich messaging experience.

Sendbird’s pricing is divided into four plans: Developer, Starter, Pro, and Enterprise. Each plan is priced based on the predicted number of monthly active users (MAU) and peak concurrent connections for your app.

Price compare

There are two pricing models SaaS chat room services use:

MAU – Monthly active users. In this case, any unique user that opens the chat or the page where the chat was embedded will be considered as 1 unique user.


Concurrent Users – maximum number of users in a chat room at a given moment. In this case, there is no importance in how many users there were in the entire month, but rather how many can be opening the chat in a given moment (concurrently).

Although all the solutions we listed are more cost-effective than developing an in-house chat system, RumbleTalk stands out as the most affordable, supportive, and feature-rich option. The table above compares other chat platforms’ monthly prices per MAU with those of its competitors that have similar features.

It’s worth noting that RumbleTalk’s plans (starting from Professional) include customer support, while CometChat, Agora, PubNub, and Twilio charge separately for this service.

As your MAUs and peak concurrent connections grow, RumbleTalk becomes increasingly cost-effective compared to its competitors if you’re looking for a scalable, enterprise-ready chat solution.

If you’re currently using another provider’s API and want to migrate to RumbleTalk, they’ve got you covered. Learn more about it here.

Stay tuned for the evolution of chat rooms

chat rooms themes and design

Chatting in real-time with someone else is fun and addictive. It lets you connect with people from all over the world at no cost. They’re here to stay, but they might be evolving into something new than ever before as we’ve seen with video games or social networks like Facebook (which has its chat app).

The comeback of chat rooms could be exciting for those who want to build a brand community or just hang out with friends!

This was The Return of Chat Rooms article that tries to explain the evolution and reason for chat rooms coming back. If you want to try it out, send us a demo request and we will be happy to show you how to use it.

request a demo


Privacy Policy          Contact us          Content Policy           ​​​​​​​About Us

Need more information, write us at support <at> rumbletalk.com
RumbleTalk LTD, har hatzofim 18 rh, 7662030, IL

Create a predator Safe Chat Room for your community

When a conversation is open to everyone on the web, a predator safe chat room is necessary.

As we’ve all come to know, the internet is a place to create communities and make new friends. A tiring day becomes easier when you can chat with someone. However, when creating a chat room for your community, you have to take extra precaution, especially with kid-oriented chat rooms. If you create a chat room for your website/blog or any social media page, you should set it in a way that will lower the risks (e.g trolls or online predators).

These are six steps to create a predator safe chat room and, overall, make your chat room safer.

1. Let people log-in with an authenticated user

Nowadays, there is an option where you can log-in as a guest in chat rooms. With respect to kids’ security, you should avoid this kind of log-in option.

You may limit your chat room to log-in only with Facebook login/Twitter login. This is called the social login option. You can also limit the login to your own authenticated users base (via REST API, read more in here). This removes the login interface. As a result, this will reduce dramatically both chat spammers and the risk of predators.

2. Check user credentials and friends

Once a user logged in with social login credentials (Facebook or Twitter user), you may check the social media page of this user by clicking the Twitter/Facebook information button. Then, you can check his/her tweets (if he/she spams or if tweets that are inappropriate) and the number of followers. Are they real users? What is the age bracket and what kind of people are they?

To show the dialog below, click on the user name and click the gear icon.

predator safe chat


3. A predator safe chat starts with creating a trusted user base

When you see that a user is continuously contributing to the discussions in the chat room, you can add them as a user with a password.

This is done in the chat room user management section (you can also set the REGISTER option in the chat). To do this, just go to “Users” and click “Add new user.” Create a user name and password for the chat member. After, tell him/her to use that as his/her login credential. Creating a safe users list is a step by step approach to creating a long-lasting predator safe chat room.

predator safe chat


4. Put it in the open

By preventing private chats, you can set users to chat in the open. This means that they will be forced to chat and talk with each other publicly (lobby). In any instance, you can change the settings of the chat room to enable/disable private chat. Just go to “Advanced” in your chat settings. You will see there the option to allow or disallow private chat between users.

5. Listen and observe carefully

Try to create a dummy account and login with a different browser. You need to change the names and the profile picture to make it believable. Then, start the observation on your chat.

If a current user starts asking you personal or private questions about you, like your location or if you are home alone, then they are not trying to be friends. They’re taking advantage of you like predators. They are trying to find out personal information so that they can easily harm you.
Ban those people by IP.

6. Disconnecting and banning users

As a last resort, you can disconnect and ban users on your chat room. If you see users that are always creating a negative impact on your chat, then don’t hesitate to ban them. Sometimes, warnings are not just enough. With the different login options, some predators might be able to enter the chat. When someone is being harassed or being asked too much personal information, you can use your administrator rights to correct it.

In RumbleTalk, we do not tolerate any form of bullying or harassment. If you do happen to see any form of a predator in the chat, you can do the following.

  • As the admin, you can disconnect and ban the IP of any user from the chat. If users were harassed or stalked, they can turn to you and you can disconnect the user who sent the predatory messages.
ban and disconnect

NOTE: If you want to unban an IP address, you can do so by going to the “Banned IP” section in your chat’s settings.

predator safe chat

  • When an admin is not around, a user can also choose to ignore any message from a predator.
ignore

All of these features can be found by clicking a user on the chat and then clicking the gear icon. To know more about disconnecting and banning users, you can check out the knowledge base.

Why do you need to create a predator safe chat room?

It’s because it’s not safe for anyone, especially kids or teens. When you create a chat room, you don’t know who’s going to be a member of your chat. They might not use their real names or their real age. To keep things safe for everyone, take extra precaution. That’s the use of a predator safe chat room.

This does not only concern your users’ safety but also yours as well. A predator can target anyone on a chat room depending on his likes. To avoid any risk of being targeted by a predator, always keep your chat room safe. Advise your users to not ask too much personal information or they will be banned or kicked out of the chat.

Keep everything under control

With the actions you can do to make your chat room safe, always be alert and don’t panic. You’re the admin and chat owner; you can keep things under control. Don’t let the predators take advantage of your chat room.

If you want to know more about keeping your chat room safe, then you can read our blogs about Blocking Words and Profanity on Your Chat, Limiting Users in the Chat Room, and Users Per Room feature.