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.

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

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

RumbleTalk sets itself ahead of the competition by being the most customizable group chatroom available on the market.

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 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 into 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 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 closing icon to the floating bouncing icon
  9. Remove the fields 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 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

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 fields image and description in the register dialog box

Remove the fields 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 maximum size of an image added to the chat conversation. Clicking on a small image will open it in the original size.
.message-text a img {
max-width: 200px !important;
max-height: 200px;
}

24. Set max YouTube size in a chat

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

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

}

25. Hide Twitter Link in Users Profile

Hide Twitter Link in Users 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 having a group discussion than 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;
}

Case Study: DittyTV using chat box features worth knowing

I know, this is a case study, but first let’s talk about good design. Just before we start, let’s clear up the fact that this is a design post about the ability to design your own chat box style. This means that one may use the various chat box features to integrate and design his own chat theme.

Deign chat box features

Here is an example of how simple to create a great design using the powerful tool that let you DIY. In general, there are 4 ways to design your own chat style.

  1. Chat Skins – choose from our pre-made chat room designs
  2. Chat advanced design – easy to create your own style via quick visual settings.
  3. Easy CSS  – this is for advanced designers. If you know CSS you can create your own custom chat room.
  4. Floating icon – if you choose to use a floating chat (in oppose to in-page embedded chat) you can also design your own icon style.

From time to time we see a great chat design made by capable people.
One that worth mentioning is the chat box designed in the dittytv  (American music television) website (see above). They use advanced CSS design in addition to designing their own floating icon. They choose to have a transparent background so the chat looks as part of the actual website design.

If you like the design, you can give them a like.