All the Reasons You Need Chat Security Using HTTPS

RumbleTalk’s customers trust our group chat to be private and secure. We understand that social stock trading, exclusive clubs, and other private online communities prioritize security so we’ve made it our priority to engineer advanced security features into our service.
In this post we will focus on the SSL/TLS security layer. But, did you know that using secured connections is good for more than just security?
We will discuss the multiple benefits of using secured connections and how you can better secure your group chat.
Why do you need to care about HTTPS?

Well, let me explain. SSL/TLS and HTTPS have been an industry standard for a long time but is becoming increasingly more important.

Previously, security was only a concern to those who wanted to ensure their online data was kept in strict confidentiality. Today, more and more platforms are looking at the security of websites and web apps to determine if it should be rewarded with better search rankings or functionality at all.

Simply put, if your website is not properly secured it could be ignored or not work.

Why does security matter, beyond security?

Let’s take a step back and talk about the “Edward Snowden Effect”. In 2013, Edward Snowden, known as either a traitor or whistle blower, stole and leaked classified government documents revealing the scope of United States data collection programs. Many countries reacted by ending contracts and trade deals with the US, and people from around the world changed their own online security practices fearing (or in some cases having confirmed) their information was being collected by the NSA.

With this in mind and knowing that someone is eavesdropping, many businesses changed their policies to build trust among users that their data is secure.

Google has taken steps to reward websites that prioritize security with better search rankings. Several web app services are not recognized to operate unless they use secured connections.

Why do I need a secure chat room?

Your website may or may not be secure, but why do you need security for your chat room? Google is a huge factor in this decision.

Because Google says so #1

First, better and more complete security improves your search engine optimization (SEO). If your website is not secured your SEO will suffer. As I’ve said before, google rewards secure websites.

Because Google says so #2

Google is not just a search engine, it much, much, more. Google sets the industry standards and have the most popular web browser, Chrome. If your website is not in line with the Google’s standards, it may not work and respond with Google Chrome or other browsers following their lead.

Because Google says so #3

If you want to use live video and live audio calls using google standard communication, called WebRTC. you will need to use a secured connection. In late December chrome stopped supporting WebRTC communication using HTTP instead of the new standard, HTTPS. (more on this later)

How RumbleTalk group chat works into all of this

For years, RumbleTalk chat rooms have been equipped with the latest HTTPS/SSL technology to ensure chat security for all users.

In order to enable an HTTPS (SSL/TLs) protection for your chat security, you can follow this simple instruction:

Copy the code from your dashboard. If it contains HTTP, please change it to HTTPS. Then, your chat room will be secured and protected with our latest HTTPS/SSL technology.

https link

Currently, our team is working on making secured connections the default option for all of our group chats. This feature will be released in the next few weeks.

Do note, HTTPS is a very fundamental layer of security. You can add various additional levels of security in the chat itself. For example, you can put the group chat behind a special area in your website for members only.

A deeper look at HTTPS/SSL

Simply said, HTTPS is a secured HTTP protocol over SSL, a Secure Socket Layer.

HTTPS/SSL is the standard for secure communication between browsers and servers. Without using this protection, all data transmitted between clients (browsers) and servers are open and visible to anyone looking. Anyone who can tap into the browser-server communication will be able to see the communication.

HTTPS provides another layer of security which encrypts communication end-to-end resulting in only the designated browser and designated web server accessing the data being transmitted between them. Attempts to eavesdrop or tamper with the communication will fail, because the HTTPS/SSL provide a security layer that protect the communication channel between server and browser.

The more advanced version of SSL is Transport Layer Security (TLS), which adds more authentication between server and browser. Both browser and server will connect with a handshake procedure, allowing verification of the server’s authenticity using a digital certificate. Therefore, you will always be sure that you are connected to the right server, and also ensure that the server is secured.

To make sure your URL is secured, check the green icon next to the URL. If it is green, you are good to go. If it is white, you might be secured but links in the chat.

You can always see whether the server is secured or not by looking at the address bar in your browser: the web address will begin with HTTPS and you will see a green lock next to the address. You can click the green lock to obtain more information regarding the server authenticity.

Barriers to HTTPS/SSL

Because of all the reasons discussed above, I can only one reason to not implement HTTPS/SSL, cost.

Sites that do not implement HTTPS/SSL are not prepared to enhance their chat security. Therefore, when they implement HTTPS/SSL, there will be additional cost and added complexities to site management.

A website needs to acquire certification and then must add another layer of security to its server-browser communication. That takes resources, adding more manpower and modification.

Furthermore, after the modification is done, there will be another cost involving bandwidth and CPU. Implementing HTTPS/SSL requires more bandwidth because of its new layer of security. It also needs a higher power server, yet another cost.

Always activate secured room for your confidential conversation

RumbleTalk group chat has been equipped with HTTPS/SSL protection, and it is advisable to activate the secured room for your private chat. Doing so will allow your customers to trust that their conversation is not being eavesdropped, ensure live video and live audio calls work properly, and improve your website’s SEO ranking with Google.

A secured room provides enhanced chat security and protection for information shared among people communicating in the chat room. Enabling secured room will activate the HTTPS/SSL protection into the chat room, adding more security and thwarting any attempt of eavesdropping or interference.

Customize Your Chat Box Style With CSS

One of the most beautiful things in an HTML5 chat box is the ability to fully customize your own chat room. If you are a chat room administrator, you may choose a chat box theme from a variety of themes in your admin panel.

As an administrator, you have a full access to customize your chat box using simple admin panel actions. These options enable you to change the following:

  • Background color
  • Background image
  • Text color, size, and font

You can access the customize menu at the bottom of your dashboard. In there you will find settings. Click on it and you will have the customization page appear before you.

Admin panel chat box configuration

Now, let us try to customize our chat room box.
If you look at the customization page, you will find 7 customization designs for your chat box. The customization settings consist of 6 basic customizations and 2 advanced customizations using CSS.

Basic chat box customization

There are 6 basic components which you can customize accordingly. They are:

  • General & Background – provide general settings: layout, background, and text.
  • User List – enables you to customize the size of your user list, background, text, border and color with padding and margin.
  • Chat Area – for customizing text, border, and color with padding and margin in the chat box area
  • Message – border, background, padding, and margin.
  • Dialog Boxes – this is a setting to customize the popup message, enables you to customize background, border, along with padding and margin
  • TextBox – setting for the bottom text box, height, background, text, border, padding, margin

Please check the following guide for further explanation:
Changing background in your chat box

Advanced customization with CSS

Advanced CSS customization provides more control to customize your chat box. In the CSS customization, you will be required to have a knowledge of CSS.

There are two CSS customizations you can use for the chat room: CSS, for standard web chat (PC, laptop browsers) and mobile CSS for your chat box through mobile.

To change color appearance, you can use either a color-hex code or a RGBA (Red-Green-Blue-Alpha) value. For instance: a maroon color would use one of the following codes:
Color-hex #5a1414
or
RGBA (90, 20, 20, 100)

The following lists are the most common customization CSS parameters and their variable for changing appearance:

1- Changing icon and color of users

.guest-default-image
Function: Changing default image of guest users
Syntax:
.guest-default-image {
background: url(http://your_image_here);
}

.user-image
Function: Changing size of user icon in user list
Syntax:
.user-image {
width: 60px;
height: 60px;
}

.message-user-image
Function: Changing size of user icon in chat list
Syntax:
.message-user-image {
width: 24px;
height: 24px;
}

.user-image
Function: Hiding user icon in user list
Syntax:
.user-image {
display: none;
}

.message-user-image
Function: Hiding user icon in chat area
Syntax:
.message-user-image {
display: none;
}

.admin .message-user-name
Function: Changing admin color in the chat
Syntax:
.admin .message-user-name {
color: your_color;
}

.admin .user-name
Function: Changing admin color in the user list
Syntax:
.admin .user-name {
color: your_color;
}

2- Changing text in chat box area

.message-user-name
Function: Changing user name appearance in chat area
Syntax:
.message-user-name {
font-weight: bold;
color:rgba(90, 20, 20, 100);
text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black;
}
The above will change your user name into bold maroon color.

.message-text
Function: Changing message text color in chat area
Syntax:
.message-text {
color:#3c5a78;
}
The above code will change your message text into blue text.

After customizing your chat room you can save the setting and see the result in your embedded chat box:
Chat box css for web chat

3- Some useful mobile CSS parameters

The following CSS parameters can be used for mobile chat when you access your chat box through your mobile devices such as smartphone or tablet.

Combination of .user-image and .message-user-image
Function: Changing default image of guest users
Syntax:
.user-image,
.message-user-image {
width: 0 !important;
padding-right: 32px;
background-image: url(“url_to_your_image_here”);
background-repeat: no-repeat;
}

Combination of .admin .user-image and .admin .message-user-image
Function: Changing default image of admin user
Syntax:
.admin .user-image,
.admin .message-user-image {
background-image: url(“url_to_your_image_here”);
}

.top-bar and .bottom
Function: color of top and bottom bar
Syntax:
.top-bar {
background-color: #5e2e2c!important;
}
.bottom {
background-color: #5e2e2c!important;
}

The above will change your top and bottom bar into a brown color. Find the result in your smartphone or tablet
chat box css for mobile chat

Its very simple to customize your chat room….
Now, you can play around and change your chat box appears to be as fancy as you want. This functionality will give you a totally different chat box to serve your purpose.

Private Chat made Simple- User Experience

The general group chat is a lobby chat room.
Within the room, one can private chat with other users.

Private chat look!
We spent a lot of time to talk to users and understand their pain with respect to private chat design. We are happy to introduce a better and intuitive UI for private chat.

Messages will be framed as chat bubbles.
Each message is framed as a single message.
In addition, the user icons will be shown on the right and left sides corresponding to the sender and receiver.
Private chat new UI

Private chat message indicator!
Now, this was long requested by chatters. When you’re on a private conversation with a user, and receiving a message from a different user, a red indicator will be shown on the [different] user image that sent the message.

New chat indicators for messages.

Private Chat Storage!
This is technical, but it is important to many users. Till now when you refreshed the page the private conversation was cleaned. Now private chat history will be saved locally on your computer until you close the browser (refreshing or closing the chat tab won’t delete the history).

Note, we do not store the private conversation and also administrator of the chat cannot see private conversations. Private discussion is kept private.

Private Message – Block option
You can now block specific users from sending you private messages.
Use the block button on the top of the private chat to stop seeing private messages from a certain user.

Private message Live Media
You may send links, images, youtube videos, etc in a private conversation.

*Note,  The private messages settings for allowing images, sounds..etc are based on your general settings.

Red admin user
Admin users color [username] are red by default.
This can be changed using simple CSS rules.

Hide invite friends
The “Invite Friends” button can be easily hidden in the chat settings.