Color Your Group Chat Experience

image

RumbleTalk group chat is highly customizable. It’s a favorite among web designers and non-experts alike. In this post, we will show you three areas of customization to color your group chat experience.

Why is customization important? Simply put, this ability to design the chat box appearance will make the chat look and feel like it belongs in the website you add it to.

But before we get into the nitty gritty let’s take a step back.

If you are looking for the fastest way to color your group chat experience, we have ready-to-use skins available. If one of these almost suits your design, you can adjust a skin using the admin panel “advance design” option.

For more advanced options, we offer the ability to design via CSS. You can read more about CSS design options here.

I could go on and on about all the different types of customization RumbleTalk offers, but instead I’m going to stay on topic. Like I said before, we’re talking about three areas of design customization:

  1. User name + Text Color
  2. Message Backgrounds
  3. Default Guest Icons

Below is a snapshot of the RumbleTalk group chat customized by our customer.

customized group chat

Changing User Name + Text Color

The user name and text color settings are changed in the advanced design settings menu under “User Colors”.

In this menu you can choose up to 16 colors to be rotated between users, sorted by name.

Here’s how it works:

  • If no color is chosen, the default color, black, will be used.
  • If one color is chosen, all users names and text will be in that one color.
  • If more than one color is chosen, the user names and text will alternate between the multiple colors.

Changing Your Message Background

First, let’s get on the same page: by message background we mean the color that appears in each speech bubble behind the text.

Customizing a message background is similar to changing text colors. Like in the users lists, the colors are rotated if more than one is chosen and you can choose up to 16 colors.

You can find this setting under the Message tab.

The result might look like this:

Group chat result

Changing Your Default Guest Icon

When customers log into your chat, an icon appears next to their name. Participants logging in with Facebook or Twitter will automatically have their profile picture as their chat icon. For guest users, a default icon is used.

Our default user image changes based on the skin you choose for your group chat.

You can customize this in your group chat to be whatever image you like, such as a simple company logo, as long as you are legally permitted to use that image.

You can also customize separate icons for web browsers and mobile browsers. Be sure to check out both settings.

Web CSS:

  1. Login to your administration panel
  2. Go to your chat’s settings
  3. Click on “Advanced design” (on the left navigation panel)
  4. Click on “CSS” (on the newly opened top navigation panel)
  5. Add the following content to the text area and save.
  6. Replace the URL with your image’s URL.
    It is highly recommended to use images in a secure location (https)


.guest-default-image {
background: url(“https://www.yourdomain.com/usericon.png”);
}

Mobile CSS:

  1. Login to your administration panel
  2. Go to your chat’s settings
  3. Click on “Advanced design” (on the left navigation panel)
  4. Click on “Mobile CSS” (on the newly opened top navigation panel)
  5. Add the following content to the text area and save.
  6. Replace the URL with your image’s URL.
    It is highly recommended to use images in a secure location (https)


.user-image,
.message-user-image {
width: 0 !important;
padding-right: 32px;
background-image: url(“https://www.yourdomain.com/usericon.png”);
background-repeat: no-repeat;
}

Group Chat Results!

We hope you like your newly customized group chat! If you hit any snags along the way, contact us at support@rumbletalk.com.

Do you have a suggestion for another topic we should cover? Feel free to contact us about that too!

Every Wednesday we’ll be posting a new technical help and explanations post here on our blog, so be sure to check back next week for more tips and tricks.

Until then, enjoy creating!