Users Integration for WordPress Chat Room Plugin

Wordpress Plugin Integration for Users

 

User Base Integration

We are pleased to announce a new feature for WordPress chat room plugin. Now your registered users will be able to automatically login to your WordPress chat room. This means that the chat can be accessible only for WordPress users base and also by advance layer plugins like members plugin or buddypress plugin.

This feature is for companies that wish to create a private 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.

Users Integration Steps

1. We included a new check-box in the RumbleTalk Plugin for WordPress (V4.0.1 and up).
Checking this check-box will seamlessly set the WordPress chat room to use WordPress registered users.

Wordpress members only settings
WordPress members only settings

2. Login to the RumbleTalk admin panel and set the login option to be SDK only (private members).

Admin panel - advance login settings for members only
Admin panel – advance login settings for members only

How this is going to work

Now you made your chat private. It means only allowed registered users may login to the chat.
In addition users will not be able to login as

  • Guest
  • Facebook
  • Twitter.

Let take an example of a website that have 500 registered users. This site is giving advice for 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.

 

Share Button

Now with a new Private Chat UI

We just released a new set of features for private chat.
See here what kind of new features we added.

New private chat look​!​
We spent a lot of time to talk to users and understand their pain with respect to private chat design. We are happy to introduce our new ​better and intuitive UI for private chat.

Now messages will be framed as chat bubbles.
Each message will be framed as a single message.
In addition, the user icons will be shown on the right and left sides corresponding to the sender and receiver.
Private chat new UI

Ne​w ​private message indicator!
Now, this was long requested by chatters. When you’re on a private conversation with a user, and receiving a message from a different user, a red indicator will be shown on the [different] user image that sent the message.

New chat indicators for messages.

Private Chat Storage!
This is technical, but it is important to many users. Till now when you refreshed the page the private conversation was cleaned. Now private chat history will be saved locally on your computer until you close the browser (refreshing or closing the chat tab won’t delete the history).

Note, we do not store the private conversation and also administrator of the chat cannot see private conversations. Private discussion is kept private.

Private Message – Block option
You can now block specific users from sending you private messages.
Use the block button on the top of the private chat to stop seeing private messages from a certain user.

Private message Live Media
Your private messages will now show links, images, youtube videos, etc.
Till now those were not shown in the private chat.

* The private messages settings for allowing images, sounds..etc are based on your general settings.

Red admin user
Now all admin users color [username] will be red by default.
This can be changed using simple CSS rules.

General Change
We made some admin panel updates.
CSS editing can now be made along side visual editing.
The “Invite Friends” button can be easily hidden in the chat settings.

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(http://www.test.com/storage/usericon.png);
}

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.

.system-message-text
{
clear:both;
margin-bottom:3px;
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
{
display:none;
padding-right:5px;
}

In some designs you may use this one instead:

#info td
{
display:none;
}

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:

.message-date{display:none;}

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

New Feature: Control the type of sounds in your chat room

It time to share with you that the new sound feature is ready for all premium customers.
Now you can control what type of sound will be played in different situations.

Some of you prefer that when a new user will login to the chat room a different type of sound will be played than when he/she send a message.

Some wish that a private message will have a unique sound and some wish that when a  user leave he a unique sound will be played.

In the below list you will learn what type of sounds you can control via RumbleTalk chat room admin panel.

 

  • Message – sound of a text/audio or video message.
  • Private message – when a user send a personal message to another member in the chat room.
  • Notice – System messages sound.
  • Users Join – When a user enter the chat room a special sound will be played.
  • User Left – When a user is leaving the chat room a special sound will be played.

 

Share Button

Chat room SSL, Mobile accesability features

We added a new feature to make it easy to control the Security and mobile behavior. The two new check boxes that were added to the admin panel dashboard include.

CheckBox 1 – Use a secure protocol (SSL)

The primary reason why SSL is used is to keep sensitive information sent across the Internet encrypted so that only the intended recipient can understand it. If the content of your chat is not confidential, please leave this unchecked.

CheckBox 2 – Mobile full screen option

When opening a chat from a mobile device it will show as part of the page (the same as in your web browser).
If the chatroom frame in your website is small, the mobile version might be difficult to use. You may choose to see an icon when using mobile devices instead of a chatroom that will allow a chatter to open the chat in a full screen.

Share Button

A new Mobile embedding feature

We see a steady growth in Mobile chatters usage (almost doubled since the beginning of 2013). RumbleTalk chat room is being used in its HTML5 format. This means that in addition to chatting using PC or Laptop, chatters can talk using mobile browsers from their Ipads and mobile devices.

Although mobile implementation is heavily used, many customers complains about the fact that the chat room is opened in a new tab. The main issue was the result of placing chat room next to a live video stream. This resulted in seeing the chat room next to the live stream in PC, while in mobile the chat room is opened in another page.

After a survey with some of our friendly users, we decided to solve this issue by changing the default implementation. Now when a chatter will open a url for a website where a chat room is embedded, he will see immediately the mobile chat room and the video area.

It means in simple words:
OLD (on the right) – In the old way when opening a page with a chat room, one saw the image with “click here”. Than when clicked a new tab was opened with the chat room. This prevented the ability to see the video and talk at the same time.

NEW (on the left) – When opening a page with a chat room, the mobile version is immediately active.

Now, The old version with “Click here” to connect is used by  many customers. So we decided to keep that option but not as the default one. If you wish to add the chatroom with the old style feature, just add &2 to the java script code you get from us.

For example:

The default code :
<script language="JavaScript" type="text/javascript" 
 src="http://www.rumbletalk.com/client/?chatcode"></script>
The code with the addition to use the "click here" icon:
<script language="JavaScript" type="text/javascript" 
 src="http://www.rumbletalk.com/client/?chatcode&2"></script>

One note, the “click here” option is the default for to the Floating chat room (the toolbar chatroom like in our home page).

Share Button