Integrating a chat into your WordPress website

Since the past years, more and more people are starting their own WordPress websites. WordPress is the most popular website builder.

You can dedicate a WordPress website to any niche that you want. Because WordPress is flexible, it can be used for businesses, blogs, or a personal journal. It holds many possibilities.

As WordPress is user-friendly, beginners and developers can create customized and highly intuitive websites. WordPress has plugins that users can download to enhance their websites.

These plugins help users to personalize their websites and this is what we’ll be talking about today. Since we’re focusing on a WordPress website, how can you integrate a chat on your site?

Here’s a quick and easy guide to the RumbleTalk chat plugin and what features it has.

Guide to your own chat

WordPress has a plugin website for all of the plugins available to use in WordPress. To add RumbleTalk to your WordPress website, here’s what you need to do.

  • Download and install the RumbleTalk chat plugin.
  • Register and create your chat. Go to WordPress Settings, choose RumbleTalk chat, and register (email + password).
  • For users that already have an account, click on “Already have account?“. Then, add your 2 fields token hyperlink and add your account token (two fields can be found in your admin panel under Integration in Account Settings).
  • After registering, your chat code (hash) will show in the chatroom code field. This is a unique string for every chat room.
  • NOTE: In case you do not get the hash code, you will need to manually register at RumbleTalk and get your code.
wordpress blog

  • Setting your chat plugin:
    • Add chat room – Create more chat rooms.
    • Members – Connect your chat to your members’ userbase. Let your members to auto-login to your chat.
    • Size – Resize the chat. In some WordPress themes, the size of the chat might be smaller or longer than expected. In that case, see troubleshooting.
    • Floating – If you want your chat to show as an icon in the lower right corner, choose this.
    • Settings – Change your chat design, add admins, etc.
wordpress website
  • To add RumbleTalk group chat to your site, go to a page or post in your WordPress admin.
  • In case you have only one room, use the phrase (rumbletalk-chat) in your post’s visual mode to position the chat widget where you need it.
wordpress blog

  • If you have more than one room, use the green button or add the exact hash in the phrase (rumbletalk-chat hash=”insert here your chat hash”).
wordpress website

After those steps, see the chat on your WordPress website.

Why should you add a chat on your WordPress website?

Since lots of your site visitors are coming and out of your website, why don’t you grab the opportunity to convert them to followers?

By being followers of your content, they are more than just frequent visitors. They keep up with your latest updates, posts, and follow you on your social media sites.

Visitors usually like what they see on a website. If they visited your site, then it means that they’re interested in your content. What if you made a group chat wherein you can talk with your followers?

If you’re active on your WordPress website, then you can chat with anyone who wants to chat. It can be a visitor or follower. As long as they’re on your WordPress website, then they can join the group chat.

Additionally, if you’re not active, you can open the group chat for anyone. Since the group chat is public, followers and visitors alike can chat with each other.

This can help strengthen your community and leads to higher visitor conversion rates.

Add more than one chat room

If your site is gaining more traffic, then you can add more chat rooms. It’s easy to add chat rooms with the RumbleTalk chat plugin. Just go to your chat settings and add how many rooms you want.

wordpress website

Set entrance and subscription fees for your chat

With PayConnect, you can actually charge users for entering your chat. You can choose an entrance fee, where users have limited chat access.

Or, you can choose subscription fees for unlimited chat access.

rumbletalk

As the chat owner, this depends on you. Do you feel that your users would like to access your chat for a short time only or a longer period of time?

With the RumbleTalk chat plugin, you can add paid access so you can monetize your WordPress website.

Adding InText Keywords to redirect users

Now that you have your chat, you can add keywords where you link URLs to specific keywords. For example, if you use Facebook as a keyword, you can redirect users to your Facebook page.

To add a keyword, go to Settings on your admin panel. Then, choose Manage Keywords.

elearning

Input the keyword and the URL you want it to redirect to. Keywords are shared in all rooms. Therefore, if you have multiple chat rooms, note that your keywords will apply to all chat rooms.

Your WordPress website chat

group chat in wordpress

If you follow the instructions above, it’s easy to add a chat on your WordPress website. With a chat, you can easily connect with your site’s visitors or followers.

No need for third-party websites or social media groups/messaging app. You have it all in one place.

This is what integrating a chat does to your WordPress website. It increases your site’s traffic and the length of stay of your visitors. This gives a higher average than those without a chat.

Interaction is key to these visits. Also, by chatting with your frequent visitors, you can create a community. By building a community, you lead more visitors and followers to become your dedicated circle.

So, what will you choose? A site without a chat or a site with one?

Share Button

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.

chat

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!

design

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.

export conversation

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.”

upload profile picture

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.

add new user
user roles

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 an 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.

Share Button

27 Easy Chat CSS Tricks for Designing your Own Chat Room (WEB & MOBILE)

Controlling your chat design using chat CSS is easy with our advanced design features.

RumbleTalk sets itself ahead of the competition by being the most customizable group chatroom available on the market.

A lot of our customization features are built into our settings menu, making this customization available to anyone at any tech-literate level, and or CSS experts, RumbleTalk group chat can be completely transformed.

But not everyone knows CSS, so we’ve put together this list of easy chat CSS tricks that anyone can copy and paste into the advanced design tab of their RumbleTalk account to get the benefits of a fully customized group chat room.  (Note, for the mobile version, we have other CSS tricks).

All you have to do is:

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

Group Chat Css tricks

In this post, we’ll cover the following chat CSS tricks:

User Icons – Chat CSS tricks

  1. Change the default guest user icon image
  2. Change the user icon size in the user list
  3. Change the user icon size in the chat area
  4. Hide the user icons in the user list
  5. Hide the user icons in the chat area

Functions – Chat CSS tricks

  1. Hide system messages
  2. Hide message date & time
  3. Hide all option buttons
  4. Hide specific option buttons
  5. Insert a clear chat area button
  6. Hide the number of viewers and listeners
  7. Hide the “Go To Facebook Profile” button
  8. Change the emojis

Text – Chat CSS tricks

  1. Change group chat administrators text color
  2. Change the text displayed in the guest login button
  3. Remove the login type label from the user profile
  4. Add borders to the username text
  5. Add borders to the message text
  6. Add an element above the chat in full screen
  7. Hide the QR box
  8. Add closing icon to the floating bouncing icon
  9. Remove the fields image and description in the register
  10. Set max image size in a chat
  11. Set max YouTube size in a chat
  12. Hide Twitter Link in Users Profile
  13. Disable group chat and allow only private chats
  14. Hide scrolling for non-moderators

 

1. Change the default guest user icon image

You can change the guest user icon to any image by inserting the
image URL into the following code.
.guest-default-image {
background: url("https://www.test.com/storage/usericon.png");
}

Group Chat Custom Avatars

2. Change the user icon size in the user list

.user-image {
width: 16px;
height: 16px;
}

large custom user icons

3. Change the user icon size in the chat area

.message-user-image {
width: 16px;
height: 16px;
}

large user icons

4. Hide the user icons in the user list

.user-image { display: none; }

hide user icons in group chat

5. Hide the user icons in the chat area

.message-user-image { display: none; }

hide chat user icons

Note, if you like to remove the white tooltip next to each message, you can use this code
.main-message-container::before,
.main-message-container::after { content: none; }

6. Hide system messages

System messages such as “user joined the conversation” and “user
left the conversation” appear in the group chat area.

.system-message-text { display: none; }

system messages can be turned off

7. Hide message date & time

Each message by default will be stamped with the date and time it
was sent. Use this code to remove this feature.

.message-date { display: none; }

group chat time stamps

8. Hide all option buttons

#options { display: none !important; }

Hide Buttons

9. Hide specific option buttons

Choose the buttons you want to hide. Each of these lines of code
can be copied and pasted individually.

.options-dialog .export {
display: none !important;
}
export chat transcript
.options-dialog .popup {
display: none !important;
}
chat fullscreen
.options-dialog .toggle-sound {
display: none;
}
chat menu

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

qr code

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

/* This option only applies to mobile */

logout mobile

.options-dialog .toggle-private {
display: none;
}
chat menu

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

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

/* This option can only be applied by admins */chat tool

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

/* This option can only be applied by admins. */clear chat messages

10. Insert a clear chat area button

By default, the clear all button is hidden. Insert this button if you
want to have the option to clear all options without deleting them.

#options #clear { display: inline-block !important; }Group Chat Clear All Button

11. Hide the number of viewers and listeners

By default, the number of viewers and listeners is displayed in the
chat. Add this code to remove it.

#info { display: none !important; }

Group Chat Audience

12. Hide the “Go to Facebook Profile” button

When a user uses Facebook to log into the chat, a button will by
default appear in their group chat profile for others to go to their
Facebook profile. Use this code to remove that option.

#user-info .facebook-button { display: none !important;}

Facebook Profile Button

No Facebook Profile Button

13. Change the emojis

Use the following code for each emoji, where the number 10 represents one of the emojis (from 1 to 33, excluding 6), and the URL represents the image you want to replace it with.

.smiley-10 {
width: 0 !important;
padding-right: 30px;
background-image: url("https//www.exampleurl.com/smile2.gif");
height: 30px;
}

Customize Group Chat Emoji's

14. Change group chat administrators text color

Set yourself apart as the group chat administrator by changing the
color of your username and message text. By default the color is red.

Group Chat Administrator

In the user list

.admin .user-name { color: orange; }

In the group chat

.admin .message-user-name { color: orange; }

15. Change the text displayed in the guest login button

Replace the text “new name” but be certain to leave the (‘) marks
around it.

“color: #000” is the color of the text. In this case, the text will
be black. You can change this with any hex code.

“-20px” is the relative horizontal location of the text. Play with
this value until the text sits in the center.

#login-guest span {
color: transparent !important;
position: relative;
}
#login-guest span:after {
content: 'Join Us!';
position: relative;
color: #fff;
left: -20px;
}

Custom Guest Login Text

16. Remove the login type label from the user profile

.login-type { display: none; }

Group Chat Login Option

17. Add borders to the username text

This code will add black and bold borders to the usernames in the chat message area.

.message-user-name{
font-weight: bold;
color:rgba(0,150,245,1.00);
text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black;
}

Bold User Names

18. Add borders to the message text

This code will add black and bold borders to the text in the chat area.

.message-text{
color:#fff;
text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black;
font-weight: bold;
}

Bold Message Text

19. Add an element above the chat in full screen

Many ask us how I can add a player on top of the chat area?
The following code will be added to your HTML (not on RumbleTalk css area) in full screen.

<style>
<inner element height> - the height of the extra element
#wrapper { height: 100%; }
#extra-element {
width: 100%;
height: <inner element height>;
padding: 0px;
}
#chat-wrapper {
position: relative;
width: 100%;
height: 100%;
}
<chat-iframe> {
max-height: calc(100% - <inner element height>);
}
</style>
<div id="wrapper">
<div id="extra-element">THE CODE YOU WANT TO BE ON TOP OF THE PAGE </div>
<div id="chat-wrapper">THE CHAT CODE</div>
</div>

add external player on top of your chat.

20. Hide the QR box

When you want to hide the QR option in your chat.

QR code

To remove the button, add the following:

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

To keep the button for chat moderators only, add the following:

.moderator #options #opts { display: list-item; }

21. Add closing icon to the floating bouncing icon

If you want to add a closing icon to the floating icon. You can add this code and make sure you change the hash code (in red).
(function(){
var hash = 'YOUR_HASH',
handle;


handle = setInterval(
function () {
if (
!window.RumbleTalkChat ||
!window.RumbleTalkChat[hash] ||
!window.RumbleTalkChat[hash].mainDiv
) {
return;
}


clearInterval(handle);
if (hash == 'YOUR_HASH') {
throw new Error('Someone forgot to replace the place holder "YOUR_HASH" with your chat\'s hash');
return;
}


var img = new Image();
img.src = 'https://d241b8qep9dzid.cloudfront.net/20190625083406/italic.png';
img.style.cursor = 'pointer';
img.style.position = 'absolute';
img.style.bottom = 0;
img.style.right = 0;
img.onclick = function () {
window.RumbleTalkChat[hash].mainDiv.parentNode.removeChild(window.RumbleTalkChat[hash].mainDiv);
};


window.RumbleTalkChat[hash].mainDiv.appendChild(img);
},
100
);


}());

22. Remove the fields image and description in the register dialog box

Remove the fields image and description from the registration form.
.register-login-dialog form .row:nth-child(n+4) {
display: none;
}

23. Set max image size in a chat

Add maximum size of an image added to the chat conversation. Clicking on a small image will open it in the original size.
.message-text a img {
max-width: 200px !important;
max-height: 200px;
}

24. Set max YouTube size in a chat

Add maximum size of a YouTube video in a chat. Clicking on a small image will open it in the original size.

.message-text .youtubeWrapper {
max-width: 300px !important;
max-height: 300px;
  padding: 0;
height: auto;
}
.youtubeWrapper > iframe {
height: auto;
position: static;

}

25. Hide Twitter Link in Users Profile

Hide Twitter Link in Users Profile (when clicking on the gear icon in the private chat ).
.twitter-button {
display: none;
}

26. Disable group chat and allow only private chats

If you want to allow only private chat discussion so all can talk in private but not having a group discussion than choose a chat type “Group chat”, and then add the following CSS to both the web and mobile CSS versions.
#content,
#text:not([readonly]),
#chat-extra,
#send-button
{ display: none !important; }

27. Hide scrolling for non-moderators

If you want to prevent the scrolling of the chat message area – which will prevent regular users from accessing old messages, add the following CSS code to both the web and mobile CSS versions:

body:not(.moderator) #chat {
overflow-y: hidden;
}

Share Button