Category: Product

11 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 with the admin panel. This will change the chat’s look on your PC & laptop. See here instructions on how to do it. Now, since the mobile version is totally different than the web version, one has 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.

All you have to do is:

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

learn more about CSS tricks here

Using CSS adjustment is an advanced feature that is available for customers with CSS knowledge. 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.

#list > div:not(.admin) .user-image,
.main-message-container:not(.admin) .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 and/or Bottom Bar color

You may change the color of the header and footer area of your mobile chat.
.top-bar,
#top-bar-left,
#top-bar-right { background-color: #3D5B9B; }
#bottom,
#bottom button { background-color: #3D5B9B; }

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

5. Load the 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 center 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 user sends:
#chat { font-size: 20px; }
 
Username font in the chat area (next to the messages):
.message-user-name { font-size: 20px; }
 
The username font in the user’s list:
.user-name { font-size: 20px; }
 
The font in the setting buttons:
#options-mobile li a span { font-size: 20px; }

 

7. Hide Buttons in the chat menu

You may hide buttons in the mobile menu view.

Hide Full-Screen button
.options-dialog .popup {
display: none !important;
}

Hide QR code button
.options-dialog .qr-option {
display: none !important;
}

Hide font size buttons

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

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

Hide sound on/off button
.options-dialog .toggle-sound {
display: none;
}

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

Hide export transcript button

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

8. Change Message Background Color

Changing the message background color includes, changing the background, changing the text color and changing the tip of the message (the small triangle pointing to the user image).
.message-bubble { background-color: #333333 !important; }
.message-text { color: #ffffff; }
.main-message-container::after {
border-left-color: #333333;
border-right-color: #333333;
}

9. Change the user’s list background color

Changing the user’s list background.
#list-frame { background-color: #183f07; }

Admin-only CSS tricks

10. Removing the admin mode option from the chat menu

This will remove the admin mode option.

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

11. Removing the option to delete chat messages from the chat menu

This will remove the option to delete chat messages.

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

Posted on by Editor

Private Group Chat for Traders and Financial Experts

Many of the financial experts of today seek a way to share and profit from their knowledge. As a service provider of a group chat, we see a steady increase in the number of clients from the financial sector using the benefit of a group chat application on their websites.

In some scenarios, forex traders, day traders, stock traders, and social traders are using RumbleTalk to share insights and information among peers. In other cases, we are using the system with the help of financial experts to hold digital panel discussions.

The applications of group chat for financial experts are varied, but the reasons it is used are consistent. This post will discuss the features that make RumbleTalk a trusted choice for online discussions among financial experts and institutions.

web chats

Security

The number one concern for using any digital tools is security. When the information you share is sensitive (as in the case with banking, trading, and so forth) digital managers want to ensure that their information is not susceptible to hackers.

RumbleTalk has encrypted its group chat rooms with end-to-end SSL/TLS technology. It means, that Messages and files are being sent through a RumbleTalk group chat are not exposed to malicious systems that “listen in” on data transfers.

Need a video call option?
Well, when you need one of the two, audio or video calls (we use WebRTC for a live call), you can trust that our encryption protects your information from being transferred.

Necessary Tools for Financial Experts

While the core purpose of RumbleTalk is to connect communities through online chat, including tools to make the conversation more productive is key to being the best choice for financial experts.

RumbleTalk includes tools for easy file sharing, embedding videos and images, recording audio, and sending audio and video calls. These features allow financial organizations to include a deeper context to their online group chats without having to send their users to their email to look find a document.

financial experts chat

The most important use of these tools is when traders upload technical analytic graphs from their computers or send voice messages to the group. By sharing these and other Excel files, charts, instructional videos, and more, financial experts are able to use RumbleTalk for collaboration, training, and more.

Flexibility

RumbleTalk truly excels at being the most flexible group chat option available. Financial experts have many options for using group chat.

Among the most popular installation types, is the option to embed the group chat directly into a website. You can see an example of this by visiting the RumbleTalk demo. One RumbleTalk group chat can be embedded in as many pages and websites as necessary.

Another option is to leave the group chat off a website and access it with a provided URL. Anyone with the URL has the opportunity to log in and join the chat.

Part of RumbleTalk’s flexibility is its ability to choose who can participate. For some financial experts, online group chat is a tool to hold public discussions, while others use it for exchanging private information among each other. In either case, we configure the chat to limit or expand who can participate.

Ease of Use

Finally, our customers keep on choosing RumbleTalk. This is because of how simple it is to create, set-up, and use. To get your first group chat room, all that is required is an email address and password. This opens an account and automatically generates a live chat room that is ready to use.

Customize your chat to include your logo and match the color theme of your website. We built the option to set it up in the admin panel or by using CSS code.

For groups that need more than one group chat room, a new chat can be generated with one click.

Every group chat room comes with a line of HTML code. Grab this code and place it on any website HTML page. The group chat room is designed to be responsive. Responsive means that it will consume all the space given to him. This makes it easy for customers to add it to any page.

And of course, RumbleTalk isn’t just easy to use for administrators; We worked hard to make the service (platform) mobile-friendly. Including features and an intuitive design to be convenient for your users too.

All of this comes with the reliability of RumbleTalk’s infrastructure and customer support.  It does not matter where you are or what issues you are facing, we are here and able to solve problems to keep you chatting.

Posted on by Editor

Remove Branding & White Label in RumbleTalk Group Chat Widget

I need to remove branding in my group chat widget….. we hear that a lot !!!

Love RumbleTalk, but prefer not to have our name on your chat box? That’s cool — we get it and we understand !!

We wrote this article to help you understand the rebranding options with RumbleTalk as well as the How to.

But first, let’s understand the actual two basic related arguments for rebranding:

1. Many website owners, software developer, webmasters wish to combine 3rd party software & services in there offering. This makes it easy to add a mature service that simply works. Not mentioning that it saves time (save the development time or installation, configuring and maintaining an in-house product).
2. End customers expect to see a complete coherent offering. They do not want to see patches of different pieces of software/services combined in an offering that looks different in colors, fonts, and overall look and feel.

Why does this matter?

Because most of us base our assessment when dealing with internet sites and products, on two main factors

  1. UX (users experience)
  2. Loading speed

Too often, we see that websites focus attention on great functional websites rather than a great user experience. As a result, many of the “the offering” are mediocre.

The reason is: many times the usage of different products, services, and open source modules result in a mix of unrelated parts (bad users experience).

bad users experience

RumbleTalk is a service where you can add a group chat widget to any website, platform and even for mobile apps. As a service, you do not install the chat in your own server, you simply get a code from us and you add it to your HTML, code, plugin.

Just to make it clear, the option of adding a code that is loaded in-remote from our server has many names.

  • A 3rd party code
  • A “piece of software” added to a website
  • An “iframe” for websites
  • An “embedded code”

All pretty much describe the same thing, something is loaded on your website from a remote place as a service (It is called SaaS – software as a service).

Control your Chat service look and feel

From day one, we thought that as a web chat service (group chat widget) we need to give our chat owners to control the look and feel of the overall chat. We thought that when you have control over how the chat will look like, you will have the freedom to design your own chat style. That will help you add a nice looking chat into your website as if it was your own designed chat.

It proved to be one of the initial incentives for website owners to add RumbleTalk to their websites. The result was that customers created amazing chat designs, some with our advanced design option or with a pro option open to all, a custom CSS design (you will need some CSS coding or you can use our Web CSS tips or Mobile CSS tips).

design your own chat admin panel

Remove Branding & White Label

Remove the RumbleTalk branding is easy. You can use your own branding or remove it completely.

(1) Remove branding is a premium feature. As a freemium service, the RumbleTalk branding removal is automatically done when a customer purchases a new subscription. So, the only thing you need to do to remove the RumbleTalk logo is to purchase a plan.

* * Once upgraded we will remove the RumbleTalk branding from both the top area in the chat and other system messages.

remove top brand link

**see in the image below the same chat without the RumbleTalk brand name.

(2) Customers that need a login button with their company name can change it via CSS.

Let us explain what that actually means?

RumbleTalk system is equipped with a pro design layer. It means, that it enables experts (in addition to the advanced design option) to go even further and use CSS code to control how the chat visual look will be presented. This can help to rebrand the chat login option with your own brand!

change the chat css

How to do it in real life?

In your admin panel, open the chat settings. Then, when clicking on the web or mobile CSS buttons, it will open a screen. Simply copy this code below into the opened window. Do not forget to change your the name to your own. Saving is done automatically.

change the login button


#login-rumbletalk span {
color: transparent !important;
position: relative;
}


#login-rumbletalk span:after {
content: "new name";
position: relative;
color: #000;
left: -20px;
}

How to upgrade your group chat widget plan and remove branding

Just to be clear, you can use the RumbleTalk chat widget forever. Free of charge.
If you want to upgrade your plan to get more seats, video and audio call, uploading images, docs and presentations or ….remove branding.
You can purchase a new plan. That is it.

So, how do you purchase a new plan (upgrade your free chat). There are 3 ways to do so.

Upgrade via the admin panel

To purchase a plan via the admin panel.
1. Log in to the chat dashboard from the RumbleTalk home page.
2. Click on the upgrade button and choose your preferred plan (number of seats and chats).
3. Enter your payment details.
4. Once approved, you will see your new plan updated. Now you can host more chatters and if you choose more than one chat, you can create more rooms.

Upgrade via the Premium page on the website

To purchase a plan via the website, you do not need to have an account. If you do and you used the same credentials, it will use those credentials to upgrade your account.

1. Go to the premium page.
2. Click on the plan you want (use the + and – sign to control the number of seats and number of rooms).

Upgrade options that remove branding

3. Once clicking on the “Buy Now” button, you will need to choose a monthly or a yearly subscription.
4. Pay and you are done.

Direct Email upgrade

If for any reason, you cannot upgrade your plan on our website. You can contact us via the contact us page and we will send you a special link to upgrade your chat.

Posted on by Editor