How to add Multiple Group Chat Rooms to your WordPress Web Site ?

Multiple Group Chats

More than 40% of RumbleTalk public chat platform account holders, need more than a single chat room. RumbleTalk platform allows you to create more than a single chat room. The number of rooms one can create is based on his plan (e.g Starter plan – 1 chat, Basic plan – 3 chats).

Each group chat has a unique code, the code is two lines.
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 a self created websites written in html/html5 (or any other language like php, paython, rubi..etc) requires adding multiple group chats. Than it is simple to copy each of the chat rooms  code 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. Using RumbleTalk Plugin for WordPress.
  2. Direct embed in 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 in here for installing a single chat using wordpress plugin.

Direct Embed of 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 copy the code as describe above. It is the same for multiple group chats.

Now, you can paste it to your post or page in a WordPress TEXT mode.

Embed chat in wordpress

Click preview to see your wordpress page /post and see your chat size.

Note. The chat room adjust itself to a the space you give it (he will consume all space) . Sometimes your chat will not fit your desired size. What you can do it define the exact size by putting a div around the code you copy and paste and also 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.

Share Button

How to Create an Experts Chat Discussion

Experts chat discussion

This is an “HOW TO “create your own experts chat room for group discussion. This can be placed on your website or using a direct link to the chat room.

Background: we have seen how the financial world needs a reliable source of information and how RumbleTalk chat room can become a place for community to raise their opinion on certain topic. That reliable information also required an expert opinion, to provide an insight to the information about market situation. Expert opinion can even gives a comprehension when rumors, issues or gossips spreads.

The following requirements are necessary to fulfill for our expert chats:
– Only the invited experts are able to join and participate in the chat
– Other people than the invited experts are not allowed to participate the chat, but they can view the conversation.

Now let us setup our chat room to enable experts chat based on the above requirements.

Basic Setup

This is a preliminary setting. You need to setup the chat room in order to able to allow experts login to chat and allow others to only view the chat.
Go to your setting page at the bottom of the Dashboard page.
Now go to the Login tab and make sure to check the following setting:

  • Allow viewers
  • Allow RumbleTalk login

Leave the others un-check like the following:
chat settings

Setting up the login for experts

Next step, we have to setup users which are allowed to participate. At the Login tab, you will find link under Allow RumbleTalk login to a users management page. Click that link, and you will find the list of users which are allowed to login.
chat settings

You can add the experts by clicking New User button.  Now add the experts.

You just need to give a Nickname for invited experts and password and the assigned chat room.
After you finish adding the experts, you can open the chat room and invited the experts to give their opinion.
chat settings

 

The following chat showed a chat room administrator Ted Shapiro, whose name is colored in red. Along with him there are four experts in financial area, Adam Kaplan, Elizabeth Cohen, Robert Perry and Ruben Gershon. The experts are conversing in the experts chat guided by Ted. The topic was China stock market issue.
We can also see there are 4 viewers watching the experts giving their opinions.
chat

Now, you can host an experts chat in your chat room as an online talk show discussing certain topics. Financial, entertainment, technology, social media all can be catered with experts chat with just a simple setup.

Share Button

Customize your Chat Box Style with CSS

chat box css options

One most beautiful thing 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 a simple admin panel actions. This options enable you to change the following:

  •  background color
  • background image
  • Text color, size and font

You can access the customize menu in the bottom of your Dashboard. In there you will find a Settings. Click on it and you now have 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 design for your chat box. The customization settings consist of 5 basic customization and 2 advanced customization using CSS.

Basic Chat Box Customization

There are 5 basic components which you can customize accordingly. They are:

  •  General & Background – provide general settings: layout, background and text.
  • User List – enable you to customize 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 chat box area
  • Message – border, background, padding and margin.
  • Dialog Boxes – this is a setting to customize a popup message, enable you to customize background, border, along with padding and margin
  • Text Box – 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

In the advanced customization, it 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 customization you can use for chat room: CSS, for standard web chat (pc, laptop browsers) and mobile CSS for your chat box through mobile.

In changing color appearance, you can use either hexa code for the color, or its RGBA (Red-Green-Blue-Alpha) value. For instance: For a maroon color, you can use the following code:
color: #5a1414
or
color: rgba(90, 20, 20, 100)

The following lists are the most common customization CSS parameter and its 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 text in chat area
Syntax:
.message-text {
color:#3c5a78;
}
The above code will change your text message 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 Parameter

The following CSS parameter 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 brown color. Find the result in your smartphone or tablet
chat box css for mobile chat

That’s very simple to customize your chat room….
Now, you can play around to change your chat box appearance as fancy as you want. This functionality will gives you a totally different chat box to serve your purpose.

Share Button