New Feature: Left Floating Group Chat

Floating Group Chat

We are happy to announce a new feature that lets users add their floating group chat on the left, in appose for being on the right. Till now the only option was to place the chat on the right. This was an issue for some customer and was communicated to us several times in the past months. The complain was: Adding a group chat on the right have some effect on the website design. For example, their right part was already occupied by other widgets or that a floating chat on their right is ruining their design.

The new feature is simply allowing the change of the chat size with a click on a radio button.

Floating Group Chat on the Left
Floating Group Chat on the Left

Changing the Floating Group Chat Side

In order to change your floating group chat to the left, you can now choose a side on the
Settings -> Floating tab.

The floating chat have additional features that one can enjoy.

– Set the height,width of the floating chat.
– Set the number of times the image will bounce up and down.
– Set a new image instead of the default, to show on the right bottom corner.

If you wish to understand the difference between a floating chat and an embed chat version.
Please look at this previous post.

Share Button

15 CSS chat tricks to style up your group chatroom theme

Webmasters using RumbleTalk are often need to change their chatroom style (theme).
RumbleTalk admin panel, let you change any aspect of your chatroom, meaning changing fonts, borders, images background, user colors and much more.

Advance users: Web designers and developers, can use CSS techniques that will help them achieve their layout goals. The list of these techniques / tricks is an ever expanding one, however, the most common essential tricks that are essential can be found in this post.

Today, we will review 6 excellent css chat techniques to keep in mind when styling your chatroom theme.

In order to change your chat theme, you will need to login to Rumbletalk admin panel. Than you should choose the Advance Design button and click the CSS check-box.

Note that with Rumbletalk you can choose to use the advance design admin or the css option.
Moving back from CSS to the advanced design will not save your CSS changes.

1. Changing the default image of a guest user

User icon guest   You may change the guest user to any image by using your own image url.

.guest-default-image {
background: url(;

2. Hide system messages such as “user left the chat room”

In large chatrooms with over 10 people talking, it is a bit annoying to see who is logged in and log-out during the conversation. Now you can remove these.

display: none;

3. Hiding all the buttons in the chat

If you wish your users to see no buttons, you may hide them using:

#options { display: none !important; }

4. Hiding only one button

Sometimes you might wish to hide one button.
Here is a list of all buttons and the way to hide them:

#options #pause { display: none !important;  }
#options #export { display: none !important; }
#options #popup { display: none !important; }
#options #sound { display: none !important; }
#options #opts { display: none !important; }
#options #logout { display: none !important; }

* This feature that clear the chat screen (not deleting) is hidden by default.
#options #clear { display: inline-block !important; }

5. Hide the “Invite friends” Icon

  This is a simple way to hide the ability to invite friends to the chat.
Add the next code to the bottom of your CSS and save:

Can now be done in chat settings -> Login -> Show “Invite Friends” button.

6. Change ADMIN Color

When you wish that your administrator “Sayings” to be colored differently (in another color). You can simply add this at the end of the css settings and change the color to your liking.

In the chat:

.admin .message-user-name { color: red; }

In the list:

.admin .user-name { color: red; }

By default the admin color is red.

7. Hide Viewers and Listeners

When you do not want to show the amount of users logged-in or just viewing the chatroom.
You may add this code:

#info-row div

In some designs you may use this one instead:

#info td

8. Hide Facebook buttons (new)

When you do not want to show the Facebook buttons in the private chat page.

You may add this code:

#user-info .facebook-button { display: none; }

9. Hide the dates on each line

When you do not want to show the date and time next to each line of text.

You may add this code:


10. Change user icon size in the user list

When you wish to change the size of a user icon in the users list.

You may add this code:

.user-image {
width: 16px;
height: 16px;

11. Change user icon size in the chat area

When you wish to change the size of a user icon in the chat area.

You may add this code:

.message-user-image {
width: 16px;
height: 16px;

12. Hide user icon in the user list

When you wish to hide the user icon in the users list.

You may add this code:

.user-image { display: none; }

13. Hide user icon in the chat area

When you wish to change the size of a user icon in the chat area.

You may add this code:

.message-user-image { display: none; }

14. Change the Guest text in the login button.

When you wish to change the text on the button of the guest login.

You may add this code:

#login-guest span {
color: rgba(0, 0, 0, 0) !important;
position: relative;
#login-guest span:after {
content: ‘new name’;
position: relative;
color: #000;
left: -20px;

* “new name” is the word that will replace “guest”
* “#000” is the color of the word; in this instance, i think he wants it black (#000)
* “-20px” is the relative horizontal location of the “new name”. Play with this value until the word sits in the center “new name”

15. Remove the Guest name in the private chat message.

When you wish to remove the guest name from the private message screen.

You may add this code:

​#user-info label:nth-child(6),
#user-info span:nth-child(7){ display: none; }​


Share Button

Case Study: Chat box features worth knowing

Lets talk about good design. Just before we start, lets clear up that RumbleTalk chat room service lets you design your own chat room style. This means that one may use the integrated options to design his own chat room. Add to it a creative mind and you can build amazing chat room designs.

dittytv chat room

Here is 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 appose 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.

Share Button

Case Study: Customers Designing their own Tool-bar Chat Icon

RumbleTalk chat room can be added to a website or blog in 2 ways.

Embedded chat Room in a page

Add a chat room as part of the page, as can be seen in here

Tool-bar chat Room
A second option is  floating tool-bar chat room, which is the “jumping” green icon in our home page. Clicking on it will open the chat room for a group discussion.

Since we launched the ability to customize the chat room floating Icon 8 months ago, we saw that thousands of chat rooms used it to created their own style . Here are some examples from our customers.


Some chose to use small and delicate icons that are “jumping” up and down based on the floating chat settings.


Some chose to use a bigger versions of the floating chat icon.


Some used simple Icons without text .

If you want to set your own Icon with your own style, you can follow this quick steps.

Step 1: go to the admin panel –> in the chat settings section the new tab called, floating.
Step 2: Set your own icon and width, height and bounce rate.

Share Button


When you run a small business (SMB), you have to be a juggler, Juggling between giving customers support, accounting, marketing and dealing with technical issues. But of all the jobs, finding a way to engage your small business community will bring more customers to your SMB. After all, if you have limited budget for marketing, than engaging your community and getting them the help you spread the word, Is one important issue!
You spend time to create a killer website, spend money on marketing and hiring a customer support chat on your website.
Now you can wait.   ……WRONG!

Get your community engaged using a Chat Room
Chat rooms are probably one of the best ways to engage your users, Community or customers. When you are conduct group conversation on a regular basis you earn twice.
First, you get a true intermediate response on your products, the issues, the bugs. You sense in real time your customers view on every change you made in your product or service.
Second, when conducting a group conversation, your audience tends to get overview on the product from other customers. This create buzz and with the right chat room, your audience will invite others out of your direct circle to join the conversation.

Webinars are great for way to keep your customer involved.
One of the best ways to create customer loyalty is to make sure they are aware of changes in your product or service. Webinars are one of the most powerful tools to create such sessions and share with your audience new features and news.

Engage your users in a virtual Live Event
Live events are important for your brand. When you create and plan a live event, you will see what topics tend to be more interesting for your customers. When you set it up virtually, borders and time are irrelevant. You can create video event or chat events. But it is important to set it up in advance and share with your audience the scope and content of the event.

Share Button

News: RumbleTalk Affiliate Program is Officially Open

This is Exciting!

We Finally launched our New Affiliate Program. Now you may join the RumbleTalk success and earn a steady income from RumbleTalk Sales (Recurring sale). Help us be the number one chat room software for websites.


We intended to launch it a while ago but we kept running into priority issues.
Now, it is finally here: We’ve been working so hard in the past couple of weeks, and we are ready and happy to announce our new Affiliate Program!!

Why is this so exciting, you ask? Because YOU can earn monthly steady income by promoting RumbleTalk! Yes, we share the profit with you. You get a 20% of the payment we get, On a monthly basis (as long as the customer pays for his chat room), with no limit. mmmmm…Nice, But this is not all, Our affiliate program is based on the MLM oriented affiliate program (Multi Level Marketing), where you can recruit other affiliates (3 tier) and get a portion of their sales on a monthly basis.

How does it work:

Click the link below for full details, but here’s the basic rundown…
1. Sign up for the Affiliate Program
2. Spread the word about RumbleTalk Chat room.
3. Earn 3 tiers recurring commission on all sales you generate!

You can profit from it and your friends will join the RumlbleTalk rapid growth of 250,000 people that already use an awesome top of the art chat-room on their websites.

Click here to join up.

The RumbleTalk Affiliate team
Top Chat Room for Websites

Share Button