New Feature: Customize your Mobile Chat using CSS

Since we launched RumbleTalk HTML chat service for websites. We tried to give our customers a full control over their HTML chat room look and feel. The service was built as a JavaScript chat on the client side with light HTML5 and CSS.

Back then the chat looked exactly the same in mobile and web. However, since mobile has special features and behavior, we found out that web view was causing many mobile users to leave the chat. We then built the Mobile chat version of RumbleTalk which made a huge difference for customers and mobile usage.

When we started RumbleTalk, we created an “Advanced design” feature, where people could change colors, backgrounds, borders, fonts, font size, and more.

However, after a while, we understood that for advanced users and web designers, this was simply not enough. The requests for additional customization options came too often. So we decided to add the option to let customers design the entire HTML chat room look and feel using CSS. It meant back then that users would control any aspect of the chat design simply by letting them control the CSS.

Web Design
Web Style Web Chat Design

In the example image above, we loaded a new background using CSS. This is basically what a customer sees when he/she is using a PC or laptop (using a web browser).

This was a big boost for RumbleTalk as web designers and website developers started to design special customized HTML chat room skins. It was a unique, fresh approach for designers that let them actually, design. It also meant that they could avoid using off-the-shelf flash-like chat room software that always looks strange with respect to their website design.

One more important point, web designers have the option now to design the chat room for customers with the exact look & feel of their website without compromising on the quality and look and feel. This made RumbleTalk very popular with web designers that expressed themself easily and were not forced to use a 3rd party chat software that has none or very limited customization options.

Mobile, here we come

When we were done with the Web CSS feature (Control the chat design for web browsers). We understand that the work is not finished. We knew that in order to give a complete 360-degree solution, we would need to allow customers to change their mobile chat CSS as well.

We are happy to announce that this feature is now released. Yehaaaaee √√√

So, the mobile CSS feature was launched last week. You can now create and customize your mobile chat design. Note, that we gave some technical CSS tips in here to help you start the process of changing the most common items that customers often ask us about.

Quick Example of CSS design option.

To explain it better, let me start with the original idea, RumbleTalk comes with a default mobile theme that was not editable till now.

You may see below how we transform in 3 steps from the default mobile theme to a custom chat room theme.

mobile chat CSS design for websites

So, what do you see here in this example above?

  1. First, you see on the left, the default design that is part of every chat room created.
  2. Then we loaded up the same background we had in the web chat design.
    See here the line we added.#chat { background: url(“https://rumbletalk-images-upload.s3.amazonaws.com/a78f4e7c872dbc2654ea3bb2238ef365/1448364119-colors.jpg”) no-repeat scroll left center; }
  3. Then we changed the header and foot colors.top-bar { background-color: #0373d1 !important; }
    #bottom { background-color: #0373d1 !important; }
  4. At last we increased the font size to 20px.#chat { font-size: 20px !important; }

Customize your Mobile Chat

admin panel mobile css design

Changing your mobile CSS is done in the advanced design menu, in a new tab called Mobile CSS.
You can control all the design aspects of the chat, mainly used to customize your mobile chat looks but also can help in adding functionality (limited though).

The most common requests that we get from clients for mobile customization are:

Background

  • Changing the Top top-bottom bar color
  • Changing the chat background color

Fonts

  • Changing the Font size

Admin User

  • Changing the ADMIN image
  • Changing the ADMIN text color
  • Changing the default image of a guest user using CSS

Business Chat Room is the Most Effective way for Internal Communication

An office is an hectic place. No so long ago, if you needed to talk to someone in another room, you simply went to the other room and talk to the other person. Than latter on you used a phone call and recently in the past decade you send email or send text messages. Than mobile apps came along and the options were unbelievable.

I remember that my colleague were just sitting in-front of me and when I was hungry, I sent them an email with the question “Lunch?“. The reply was “In 5 minutes“. This approach was fine for making a decision for going together to lunch, but when communication involve a group, it get complicated.

Now, we have tons of options to communicate this days like iMessage, Skype, Google Talk and Twitter direct messages. Each have their own usage and you can get business done with them just as much as with a professional business chat app.

A business chat room app is making teams more efficient and combine the communication between the different groups. It gives extra value if :

  • The team seats in different locations, different floors or even different countries.
  • There is time differences between the team members.
  • A company needs to make internal communications richer than emails with attachments, simpler than sending a text, and as easy to search through as your Evernote notebooks.

Check if you need an HTML Business Chat for your Team?

Of course, No one needs to be yelling from office to office, or send a lot of emails with many CC’s and attachments. It’s basically a lost of valuable time. Here are the things you can use a group business chat for.

Share Files and Documents

Working with a team requires a lot of documents sharing. It is important that one can upload his own files and share with his group. The group chat must have an option to share videos and images directly in the business chat (not as a file).

When one upload a file it is automatically detected and presented as attachment or as inline image. For example, if one upload a word document, it will show as a word icon. While when uploading a youtube video, it will show in the chat with a play icon.

Send Short Audio Messages

Record short audio messages to the team, can be very helpful when sent to the group. This can be done by clicking on the attach icon and clicking on the record audio icon.

Live Video Calls Between Chat Members

Live Video and Audio calls is needed for private conversation between two members of the group.

Private chats

Some time we will need to talk in private with one member of the group. We can use the old concept of private text messages done by clicking on the user name that we wish to talk to.

Design

Team chat can be customized to your own liking. So design one that looks good and prefer the ones that let you do it using CSS.

See how it will look like :

Pricing

Pricing is not something a company can ignore. If group chat is needed and the benefits are clear, there are many that offer group business chat for teams. Choose the most attractive one for your team.

Feature: New Improved Ban by IP Chat Feature plus New Spam Filter

We are happy to announce that we implemented a new software mechanism to deal better with spammers and trolls during a chat room discussion. The next features were improved in the back-end. So no effect on the chat owners (e.g no adaptation or changes are needed).

Improved Ban By IP Trolls

Managing users is an essential feature in a chat room. It is used a lot during a live discussion by chat admins. It normally goes like that with spammers or trolls.

  1. A user spam your chat.
  2. You (The administrator) send him a private message to stop. Many of those are just trying out the chat and have no meaning to cause trouble.
  3. Now, if they continue, the administrator may disconnect them as a warning. They see a message telling them that they are warned not to “spam” the chat room.
  4. If they continue to spam the chat room, an administrator may ban the user by IP.
    This means that this user will no longer be able to log into the chat room.

Ban by IP is probably the most used feature with RumbleTalk.
Chat administrators use around ~10,000 bans by IP actions across the entire Rumbletalk chat rooms and about the same number of just sending warnings in shape of a “disconnecting users” option.

ban ip Chat room feature

Improved Filter words

RumbleTalk chat includes a spam filter feature. It actually means that we let customers define a list of unauthorized words. It could be a curse or a competitor name that is not welcomed in the chat.

In the new version, we added the ability to disallow email addresses and specific website URLs.
For example, to prevent users from sending emails to each other, one can define ” @” as a rule. It means that any word with the sign @ will be blocked by the chat room.
Note, that any special chars are included in the new spam filter for RumbleTalk chat rooms.