Category: How to use

How to Add Multiple Group Chat Rooms to your WordPress Web Site

More than 40% of RumbleTalk public chat platform account holders need more than a single chat room. The RumbleTalk platform allows you to create one or Multiple Group Chat Rooms. We have created a special wordpress chat plugin with the option to add easily more than one chat room.

If you choose not to use the wordpress chat plugin, then the below explanation will help you do so in a direct copy and paste mode.

Each group chat has a unique two-line code.
There are two unique id’s in the code, the second one is called the chat hash (see below e.g kuck@y26).

<div id=”rt-de278e71fdfc53d2635140fb2595e42b”></div>
<script src=”//www.rumbletalk.com/client/?kuck@y26” type=”text/javascript”></script>

The code can be found in the chat settings or in the embed code tab (in settings).

Embed chat room code

Now, if self-created websites written in html/html5 (or any other language like php, paython, rubi..etc) require adding multiple group chats it is simple to copy each of the chat room codes and add it to your website html.

Adding a Group Chat to WordPress

There are 2 options to add a chat room to your WordPress website.

  1. Use the RumbleTalk Plugin for WordPress
  2. Directly embed the code.

If you are using RumbleTalk plugin you are limited to one chat room.

The plugin was designed to allow users to add a group chat in no time. Creating the account and getting the chat code is done automatically by the plugin. You can see the instructions here for installing a single chat using WordPress plugin.

Directly Embed Multiple Group Chat in a WordPress Web Site

Adding a direct group chat for a WordPress website is done by going into your admin panel and copying the code as describe above. It is the same for multiple group chats.

Now, you can paste it to your post or page in WordPress Text-mode.

Embed chat in wordpress

Click preview to see your WordPress page or post to see the chat size.

Note: the chat room will adjust itself to a the space you give it (it will consume all space). Sometimes your chat will not fit the desired size. What you can do is define the exact size by putting a div around the pasted code and add the overflow type for responsive settings.

For example:

Instead of,

<div id=”rt-de278e71fdfc53d2635140fb2595e42b”></div>
<script src=”//www.rumbletalk.com/client/?kuck@y26″ type=”text/javascript”></script>

write:

<div style=”height: 500px;”>
<div id=”rt-de278e71fdfc53d2635140fb2595e42b” style=”overflow: hidden;”></div>
<script language=”JavaScript” type=”text/javascript” src=”//www.rumbletalk.com/client/?kuck@y26″>
</script></div>

You may contact us at any time to get more info about multiple group chat.

Multiple Group Chats

Posted on by Editor

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.

Posted on by Editor

Using a Group Chat for University Live Event

A campus life in university is a life full of possibilities and plenty of excitements. For student attending university, there are so many things to do, and yet so little time. Sports events, music show, sorority or fraternity gathering, special interest club meetings and many other activities aim to enrich the quality of student life. One of the most interesting item we encounter during our short years in campus is the abundance of university live event. There is no single day passes by without an event takes place. Whether a sports, musical performance, cultural expose, performing arts, exhibitions, and  even a protest or demonstration.

With so many interesting things happen in university campus, it is common for campus to have their own media publication like newspaper, magazine, radio station and TV station. Usually, students are the ones who run that publications and they cover campus life and event.

University Live Event

However, Internet as publication media still remains unknown territory for university students. There are some efforts to explore Internet as communication media, but most of them ended up to be a business. Facebook is one example of the campus media that become a huge business. In the beginning, Facebook humble beginning was a Harvard and Ivy League universities social media network before it begin its journey as a public social media network.

Live event chat room design

It seems that Internet must be used solely as a publication media, similar to campus newspaper or radio and TV station. Nowadays, Internet as publication media hold new technology which available with the new HTML5 standard. As new standard in web presentation HTML5 design focus on its support to multimedia presentation on web browsers. Hence, Internet technology is now capable to provide chat room with multimedia chat like audio and video chat.

Previously, chat room require application to be installed in a computer. However, thanks to HTML5 new standard, this technology is available in to be delivered to web browsers. A company with high pitch of technology can develop sophisticated application platform that enable a chat program on web browser.

When group chat is attached to any university live event, you can be sure there will be a surge of visitors and audience come to that event. The reason is because of students need medium to express their feeling, ideas and sometimes anger and a group chat is a great media to accommodate them.

Why Chat Room for University Live Event

A university live event always attract students attention, and students always has a lot to say about things they are attracted to. It seems they always have a comment for almost everything and they need a media to express that things to say. Group chat platform technology can arm university live event to accommodate that excessive needs from the students.

Group chat will attract student to state their mind about issues that they concern about. A group chat on a web chat platform surely suits their needs. One main reason is the absence of installation  and setting up. Chatting can be initiated only with a web browser.

Furthermore, web chat must have synchronized chat technology. This will allow event organizer to have the same chat room in multiple pages in multiple campus web sites. Let us say, an event organizer for a university live event want to have a chat room in its Facebook page and also in its event websites and campus website. They can install the same chat room in those places, so they can have multiple chat room thus enlarging the range of audience. Those who land on Facebook page, on the event website or browsing through campus website can see the chat room activity at the same time. They also can join the chat room right at the moment easily, without having to go to another website.

Securing University Online Event

Although sometimes chat room, especially when students cram the chat room, it can contain gibberish message or spam from the visitors. There is always irresponsible people who will try misuse the chat room and spreading spam in the chat room, with whatever reason they have. Especially those who oppose an occasion like a particular university live event. They will surely try to do anything with their might to cancel the event to occur. However, such irresponsible behavior should never be tolerated. Therefore, a group chat must have a top of the line security protection.

In order to install chat platform as to equip any university live event, it is a very good thing to always ensure the security measure provided by the chat platform. Especially in its capability to handle spam and inappropriate message. First, it must have a strengthened security technology and the latest SSL. Second, it has to be equipped with anti spam technology and words blocking to blacklist unwanted words and preventing chat room abuse.

With those considerations in mind, you can rest assured anytime you arrange university live event, it will always be a successful one.

Posted on by Editor