New Login SDK functions: Logout & LogoutCB (For Developers)

This is one of the most requested features by our customers using the RumbleTalk Login SDK.

When users have logged in automatically via the Login SDK. They actually inherit the credentials from the chat owner users base and are allowed to login automatically.
However, if the chat owner wishes to force a logout of a user, he was unable to do so.

Now, he can. RumbleTalk is happy to announce a new two Logout options.

Logout

Chat owner can now initiate logout of users using the Login SDK.

To do so, call the following function:

<script type="text/javascript">
rtmq(
    'logout',
    {
        userId: 'USERS_ID', // [optional]
        username: 'USERS_NAME' // [optional]
    }
);
</script>

The [optional] parameters “USERS_ID” and “USERS_ID” are optional and used only to validate that the correct user is being logged out.
They can be used separately or together.
Excluding them will remove the connected user (who’s browser called the function) regardless of their “user id” and\or “username”

Logout Callback

Chat owners can now also listen to the event of a user logout.

To do so, call the following function:

<script type="text/javascript">
rtmq(
    'logoutCB',
    {
        callback: 'CALLBACK_FUNCTION'
    }
);
</script>

The “CALLBACK_FUNCTION” will be called with a “reason” variable when the user logs out of the chat.
An example of the callback function is such:

function (reason) {
    console.log(reason);
    // code to execute on logout
}

currently, the following values are possible for the reason variable:

  • “button_clicked” – the user clicked on the logout button
  • “sdk_request” – the “logout” function of the SDK was called
  • “unknown” – the user disconnected from the chat for an unknown reason (such as network connectivity problems)
Share Button

8 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, which means how it will look in your PC, laptop…see here how.

Now, since the mobile version is totally different than the web version, one have 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.

Using CSS adjustment is an advanced feature that is available for customers with CSS knowledge.

In order to change your chat theme, you will need to login to Rumbletalk admin panel. Then you should choose the Advance Design button and click the Mobile CSS tab.

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.

.user-image,
.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 Bottom Bar color

You may change the color on the header and footer area of your mobile chat.

.top-bar { background-color: #3D5B9B !important; }
#bottom { background-color: #3D5B9B !important; }

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 !important; }

5. Load 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 left 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 users send:
#chat { font-size: 20px !important; }
 
User name font in the chat area (next to the messages):
.message-user-name { font-size: 20px !important; }
 
The user name font in the users list:
.user-name { font-size: 20px !important; }
 
Font in the setting buttons:
#options-dd li a span { font-size: 20px !important; }

7. Hide Buttons in the menu

You may hide buttons in the mobile menu view.

Hide Full Screen button
.opt-full-screen { display: none; }

Hide QR code buttons
.qr-li { display: none; }

Hide small size fonts button
.opt-sm-font { display: none; }

Hide big font button
.opt-big-font { display: none; }

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

Hide sound on/off button
.sound-li { display: none; }

8. Change Message background color

Changing the message background color include, changing the background, changing the text color and changing the tip at the message (the small triangle pointing to the user image).

.message-bubble { background-color: #333333 !important; }
.message-text { color: #ffffff !important; }

.main-message-container::after { border-right-color: #333333 !important; }
.main-message-container::after { border-left-color: #333333 !important; }

Share Button

How To Integrate A Chat Room Into Your WordPress Members Plugin

If your WordPress hosted website has a membership option, there is a 50% chance that you are using a WordPress members plugin.

There are a number of different types options when choosing a WordPress members plugin, though they all essentially perform the same function. Plugins allow webmaster to set up members-only areas in their website with exclusive content and special features.

Choosing the right plugin for your site is important, as the various features the plugins offer can affect how many people visit your website.

Below, we will answer a few questions you may have regarding the connection between integrating a chat room into your WordPress members plugins.

What Are Members Chat Rooms?

A members chat room is a chat room that can only be accessed by website members.

Having a members chat room on your website can be helpful. It can entice site visitors to become members in order to participate in conversations and join the site community.

What Types of WordPress Members Plugins Are There?

When in the market for a plugin, it is important to do a little research before making a decision. There are many options out there and we will discuss a few below.

  • MemberPress – MemberPress is a good option when looking for a plugin. It is simple to set up and has quite a number of features. Webmasters are able to have a lot of control over who accesses what on their site and at what time.This plugin also conveniently allows for integration with other services you may want to use on your website. Some of these include MailChimp, MadMimi, and BluBrry. It is also designed to be used with PayPal and Stripe, making it easy for members to make payments.You can choose from two versions of this plugin, either the Business Edition or the Developer Edition.Users of MemberPress often say that this plugin is one of the simplest to use with WordPress, especially for beginners.

 

  • Paid Memberships Pro – This plugin offers a couple of options. There is a basic version that is entirely free to use, as well as a the standard version for a yearly fee and the plus version.Keep in mind the basic free version does not offer many features, but may give users a taste of what they can expect in the more advanced versions.Paid Membership Pro also allows for integration with various other services and WordPress plugins, as well as adding in the plus version.For users who don’t have a lot of experience working with websites and plugins, this particular one may be rather difficult to use.

 

  • Ultimate Member – Ultimate Member is yet another option when it comes to plugins. This plugin is extremely simple to use, as no knowledge of coding is required to integrate it into your website.It adapts to mobile devices, allowing users to access members only content from their computers as well as their mobile devices.Ultimate Member offers a number of extensions that webmasters can pay for, such as Instagram, MailChimp, and User Reviews. There are also a couple of free extensions, like the ability to display what users are online.

 

How to Integrate a Plugin Into Your Website

The RumbleTalk chat room plugin is integrated with most members plugins.
Most WordPress members plugins are using the WordPress built-in users management.

RumbleTalk chat room service is also having the option to integrate with WordPress built-in users management (Integration is done with one checkbox click).

Since both members and the chat are using the same user management, then integration can take practically 1 minute.

Integration includes 2 components.

This can be quite handy because if you have a WordPress Members plugin installed, you can easily incorporate the Rumbletalk plugin into your WordPress website. This will allow you to have a members only chat room.

The steps to do so are below.

members plugin with a chat room

Step 1
1 – Install the Member plugin and follow the set up instructions.

2 – Install the  RumbleTalk chat room plugin and follow the set up instructions.

Performing these two steps will automatically integrate the chat with the Members Plugin users base.

By doing so, this will allow only members of your site to login automatically to your chat with their username.

Step 2
After the installation of the plugins has finished, you then must create an account via the RumbleTalk chat plugin (see quick video on how to).

You will see the window below. Make sure to check the “Member” box to complete the process.

chat room members plugin

You are done! 

As you can see, it is quite a simple process!  If you need more information about settings or the installation process, you can check out the introductions in here.

For any additional questions or comments, please contact us at support <the sign @> rumbletalk.com.

 

Share Button