Category: Technical

Chat Customization — Make Every Chat Room Unique!

As far as online chats and chat customization go, we are all familiar with the premise. We open a window, type what we want to say, and then we wait for a reply from the other end. Chats are similar in their goal, to communicate with each other, but have a different feel. They’re used in social media, in customer support, and pretty much anywhere else. Be it education, sports, or even stock trading, online chats are everywhere these days.

Do you think that all of that caters to each platform? Well, the answer is no. That’s why RumbleTalk offers its users the ability to customize their chat.

When you think of design, you always think of skins and themes, right? But for RumbleTalk, that’s just the tip of the iceberg. You can do more than just that. From backgrounds to changing fonts and colors, you can design your chat dedicated to your expertise.

Design your chat

You can customize the appearance of your chat room anytime. There are no restrictions when it comes to changing your design, so choose the one that suits your chat room best!

We’ve made it like that so you can customize the RumbleTalk group chat to fit your brand and site. In addition, you can also customize the look of both web and mobile versions.

We offer a quick editor for easy point-and-click customization of the web group chat in the “Design” tab of the new admin panel.

If you want to change the background of your chat, you can do so. Fonts and font sizes are also customizable. With the customization offers of the RumbleTalk group chat, you’ll never get bored of the same design.

With CSS, RumbleTalk group chats can also be fully customized in both web and mobile versions. CSS lets you change any aspect of the chat appearance. Web and mobile CSS changes are done separately, allowing another layer of custom design. We also shared some tips and tricks for web and mobile CSS so you can use it on your group chat.

chat customization

Chat Customization Options

More than just the visual aspects of a chat, RumbleTalk also offers customization for the following:

  • How much of a history of your chat saves,
  • Banning and limiting users,
  • Sending system messages,
  • Setting up admins,
  • And more! While we have most of them covered, we’re always listening to our customers’ feedback and suggestions!

Exporting your chat history

Who can export the chat history? This depends on you as the chat owner. By default, anyone can export the chat history. However, the chat owner can turn off the export button.

Another chat customization hack is the chat owner can select a date range, and then export the group chat history by using the export archive option.

Limiting users

Why limit users?

  • It can be very hectic and busy when there are too many chatters in one chat room. So, you cannot control everyone who goes in and out.
  • This may lead to some unfortunate happenings like bullying or harassment in the chat.

To avoid this, you can limit your users per chat room.

To do this, you need to click “Settings” on your admin panel. Next, click “Users.”

Click on “Add new user” and choose a role. Make sure to choose “Rooms” so that the user will only be allowed in a specific chat room.

That’s it for limiting users!

Banning users

To ban a user, you can do the following.

First, you need to log-in as an admin. Click the profile of the user you wish to ban. You will be presented two levels of banning.

  • Disconnect – The user will be disconnected to the chat, but he/she can immediately go back and log-in again. This is only a temporary ban, more like a warning or a suspension.
  • Ban by IP – A permanent ban. If a user is banned by IP address, whenever he/she logs in with any credentials, as long as it’s from the same IP address, he/she will not be able to enter the chat. This is great for bullies or harassers that can’t understand the rules of the chat.
chat customization

You can remove users from the Ban IP list by going to your admin panel, to the banned IP list and remove the IP.

When does it make sense to ban a user? As aforementioned, this can serve as a warning if it is a one-time affair. But, if a user prevails and uses the same foul language or bad behavior in the chat, then it’s probably best to just let go of this user instead of endangering the other members of the chat. This is what’s great about the chat customization features of RumbleTalk.

Sending System Messages

If you’re still not satisfied with the above features, there’s still more! RumbleTalk also allows you to customize the system message in your chat room. This means that people who enter your chat room will see this message when they enter your chat or even when you’re not around. A simple hello and when you’ll be back can be a big difference! The customization for system messages includes

  • An announcement for a virtual event,
  • A global update about something,
  • And a friendly hello!
offline message

System messages will be seen by everyone in the chat, so you’ll be sure that they are notified.

Setting up admins

Just like the previous option on banning and limiting users, setting up admins has the same procedure. By default, you’re the only admin of your chat. As time goes by, many users will become members. So, you will need help in terms of managing chatters. To set up admins, you have to do the following.

First, click on “Settings” and choose “Users.”

upload profile picture

Second, click “Add new user” and choose admin. Select what role they will be playing in the chat. It can be for rooms only or global access. This means that, if an admin only has room access, he/she can only access a specific chat room. On the other hand, when an admin has global access, he/she has access to each and every chat room.

Make sure that you’re handing access to someone you trust because he/she will be the one who will be managing the chat when you’re not around. An admin has to be responsible for everything that’s happening in the chat. May it be a positive or a negative scenario, he/she must act on it fast. Plus, you need to ensure the safety of every user in your chat; therefore, he/she must always report to you.

Web and Mobile CSS

By being the most customizable chat room available in the market, we also offer controlling your chat design by using chat CSS. If you’re a tech and design expert, CSS will be easy for you. We’ve made it even easier for CSS beginners by sharing some tips and tricks for both web and mobile CSS.

To copy and paste your CSS code, all you have to do is the following:

  1. Copy the chat CSS code from the aformentioned tips and tricks.
  2. Log-in to your RumbleTalk admin panel.
  3. In the chat settings, under “Design,” click on “Add CSS for Web Browsers”. The same goes for mobile, but choose “Add CSS for Mobile Browsers.”
  4. Paste your code and close the box.
chat customization
chat customization

Chat customization advantages

Using RESTful API, you can go more than just customizing your chat.
It lets you manage and design your chat rooms. Not only that, but it also lets you manage your admins and users. The API also allows you to monitor your audience, as well as keep a log of who’s attending and participating.

When it comes to moderating your individual chats, you also have the option to blacklist and whitelist IPs. You can order and regulate access by doing this. You can manage these lists even while the chat is live, which allows you to dynamically moderate at any time. With different access levels for different users (from user rooms to admin rooms), you’ve already got a complete package in your hands.

With RumbleTalk, every chat, every video, and every event is a unique experience. If you aren’t convinced yet, give it a try and see for yourself just how amazingly customizable nearly every aspect of RumbleTalk is! If you have any questions about customization, just connect with us on Twitter or Facebook. We’ll be glad to address your concerns.

Posted on by Editor

11 CSS tricks to style up your mobile group chat theme

When you want to design your chat theme using CSS, you can design your web version with the admin panel. This will change the chat’s look on your PC & laptop. See here instructions on how to do it. Now, since the mobile version is totally different than the web version, one has the option to create their own custom mobile CSS design.  RumbleTalk introduced a feature that allows customers to design also their mobile group chat theme using CSS.

All you have to do is:

  1. Copy the CSS code you find suitable from this post.
  2. Log into your RumbleTalk admin panel.
  3. In the chat settings, under “Design”, click on “Add CSS for Mobile Browsers”.
  4. Paste your code and close the box.

learn more about CSS tricks here

Using CSS adjustment is an advanced feature that is available for customers with CSS knowledge. You can see below some common tricks asked by customers to control their mobile design.

1. Changing the default image of a guest user using CSS

User icon guest   You may change the default guest user for your mobile group chat to any image by using your own image URL.

#list > div:not(.admin) .user-image,
.main-message-container:not(.admin) .message-user-image {
  width: 0 !important;
  padding-right: 32px;
  background-image: url("//rumbletalk-images-upload.s3.amazonaws.com/cc244d13c0e7e7bb6c4b63830314dc61/1444667334-usericon-blue.png");
  background-repeat: no-repeat;
}

user image change via css

2. Changing the ADMIN image

User icon admin   You may change the default ADMIN user to any image by using your own image URL.
.admin .user-image,
.admin .message-user-image {
background-image: url("//rumbletalk-images-upload.s3.amazonaws.com/cc244d13c0e7e7bb6c4b63830314dc61/1444667334-usericon-white.png");
}

2. Changing the ADMIN text color

You may change the default ADMIN text color.
.admin .message-user-name,
.admin .user-name {
color: #2DA8E0 !important;
}

3. Changing the Top and/or Bottom Bar color

You may change the color of the header and footer area of your mobile chat.
.top-bar,
#top-bar-left,
#top-bar-right { background-color: #3D5B9B; }
#bottom,
#bottom button { background-color: #3D5B9B; }

header and footer color change

4. Changing the chat background color

You may change the chat background from white to any color you want.
#chat { background-color: #607D8B; }

5. Load the background image

You may load any image as your mobile chat background.
#chat { background: url("//d1pfint8izqszg.cloudfront.net/images/skins/40000/background.jpg") no-repeat scroll center center; }

change chat background color

6. Change Fonts size

You may change the size of the font to your own liking.

Font of the messages a user sends:
#chat { font-size: 20px; }
 
Username font in the chat area (next to the messages):
.message-user-name { font-size: 20px; }
 
The username font in the user’s list:
.user-name { font-size: 20px; }
 
The font in the setting buttons:
#options-mobile li a span { font-size: 20px; }

 

7. Hide Buttons in the chat menu

You may hide buttons in the mobile menu view.

Hide Full-Screen button
.options-dialog .popup {
display: none !important;
}

Hide QR code button
.options-dialog .qr-option {
display: none !important;
}

Hide font size buttons

.options-dialog .font-size {
display: none;
}

Hide pin the position button
.pin-li { display: none; }

Hide sound on/off button
.options-dialog .toggle-sound {
display: none;
}

Hide logout button
.options-dialog .logout {
display: none !important;
}

Hide export transcript button

.options-dialog .export {
display: none !important;
}

8. Change Message Background Color

Changing the message background color includes, changing the background, changing the text color and changing the tip of the message (the small triangle pointing to the user image).
.message-bubble { background-color: #333333 !important; }
.message-text { color: #ffffff; }
.main-message-container::after {
border-left-color: #333333;
border-right-color: #333333;
}

9. Change the user’s list background color

Changing the user’s list background.
#list-frame { background-color: #183f07; }

Admin-only CSS tricks

10. Removing the admin mode option from the chat menu

This will remove the admin mode option.

.options-dialog .admin-mode-switch { display: none; }

11. Removing the option to delete chat messages from the chat menu

This will remove the option to delete chat messages.

.options-dialog .clear-messages { display: none !important; }

Posted on by Editor

WordPress Chat Integration Made Easy – Connect your Usersbase with a Click

What if I tell you that a WordPress chat integration is a click away. We have tried to make user base integration easy, so we took all the heavy lifting from you and made one checkbox to allow your chat to be fully integrated with your WordPress database.

Now your registered users will be able to automatically login to your WordPress chat room. This means that the chat can be accessed only by WordPress users, registered and/or by users, you decide to set as admin or simple users in the RumbleTalk users management.

Chat and User Base Integration made easy

WordPress chat integration is perfect not only for WordPress users base but for all products using it underneath, like members plugins, BBpress or BuddyPress plugin.

integarte your users base with WordPress. WP Chat Integration Made Easy

This feature is for companies that wish to create a private members group chat using their own existing users base.  It is perfect for closed group discussions, social trading websites, health support group, admin areas where discussions are private or any type of private chat rooms for websites.

WordPress chat integration with your users

After installing the RumbleTalk plugin and creating an account, instructions can be found in here.
You now can use our self-explanatory chat settings.

1. The plugin was installed and the chat account was created. You will see one default chat was created (you can add more rooms when you upgrade your plan). Now you want to connect your WordPress users to the chat. Simply check the MEMBERS checkbox (see below), save and you are done. Checking this checkbox will seamlessly set the WordPress chat integration to use WordPress registered users.

2. Embed – Add the chat to a page where users need to login in order to see (in your member’s area). Use the shortcode to do it.

WP plugin short code

3. Test – Login to your WordPress members area, go to the page you added the chat too and you will see that you automatically logged in to the chat with their member’s area login username.

Wordpress chat plugins info

4. Important – Make sure the login option “Guests” checkbox is checked. Note, Although the “Guest login” is checked, it will not allow guests to log in but only the WordPress/BuddyPress/BBpress users.

Wordpress chat integration guest login

5. Settings – Now you can change your chat settings and customize it to your liking. To do it simply click on the settings button (the options are endless).

The chat is integrated with your users base.
Now, let’s see an example of a using the chat. Let’s take an example of a website that has 500 registered users. This site is giving advice for a group of Stock Traders (the registered users). When these traders are logged in to the site (after supplying their users and passwords). They will be immediately and automatically logged in to the chat room. It is that simple.

When using members login your Social Login is now disabled

Now you made your chat members only (private room). It means only allowed registered users may log in to the chat. In addition, users will not be able to log in with their social logins. e.g

  • Guest
  • Facebook
  • Twitter

Set administrators for a members only chat room

To create a chat administrators create a user in RubmleTalk with a username that’s exactly the same as your displayname in your WordPress user base.

To do this, simply go to your chat settings and open the “Users” tab. Click on the + and add a user with a password (make sure you add the admin email).

Login as an administrator

When users will open the chat page, they will be logged in automatically. The chat will identify when a user is also an administrator and will prompt them for a password. The administrator will need to provide the password for the first time in this browser, latter on the login will be automatic.

Note, administrators name are show in red by default.

 

 

Posted on by Editor