Enhancing Chat Experience with “lock scroll chat not bottom” in HTML5 chat

In the fast-paced world of web development, user experience is paramount. Chat applications are a vital part of our daily lives, but they often come with an annoying quirk – auto-scrolling to the latest message. This is where the “lock_scroll_chat_not_bottom” feature, an HTML5 innovation, steps in to revolutionize the chat experience.

Traditionally, chat interfaces would automatically scroll to the newest message, interrupting your reading or interaction. “lock_scroll_chat_not_bottom” changes that. With this feature, the chat window remains stationary when you’re not at the very bottom. No more unexpected jumps, no more rushed scrolling.

This enhancement offers several key benefits:

  1. User Control: Users now have the power to decide when to scroll to the latest message. It provides a more relaxed and engaging chat experience.
  2. Message Review: Scrolling back through the chat history becomes effortless, making it easy to reference past messages and conversations.
  3. Reduced Cognitive Load: Auto-scrolling can be distracting. By eliminating it, “lock_scroll_chat_not_bottom” eases cognitive load, enabling users to focus on their conversations.

Implementing “lock_scroll_chat_not_bottom” is relatively simple. Web developers can integrate it using JavaScript, allowing customization based on user preferences or application settings.

In a world where chat applications continue to thrive, “lock_scroll_chat_not_bottom” is a feature that empowers users and enhances the overall chat experience. It brings control, simplicity, and an added layer of user-friendliness to our daily digital conversations.

Trophy quiz

Quiz game updated

There are a few new devlopements about the chat quiz game (you can enable the quiz game)
You enable the quiz game in your chatadmin panel / Quiz menu

You can now organize your questions by category:
ex: geography, maths, general

The quiz game points are permanent (if you use the html5-chat users registration feature). You can also access the “hall of fame” (best scores) from your chat admin panel. You can also reset all scores from the chatadmin panel

And finally users have also the “Hall of fame” access from the “Trophy” button located in the chat header

wheel Of Fortune

Spinning wheel for the chat

We have added a new feature: a spinning wheel (wheel of fortune) feature into the chat.

What Is the spinning wheel ?

The spinning wheel allows to spin a fortune wheel on all chatters in a room. The wheel is of course synchronized for all users : they see the same wheel spinning at the same tile

The spinning wheel : what for ?

It is a simple amusement widget that allows to spice up the chat. It can be used for challenges or contests.

Who can launch the spinning wheel ?

Only users whose role have the “canLaunchWheel” set can launch the spinning wheel. It is localized next to chat input text (bottom left)

Here you can launch the wheel

What does it look like on the chat ?

You can define texts, sizes and colors in your chatadmin panel (in wheel of fortune section)

wheel of fortune in the chatadmin section

Once launched, the wheel looks like:

wheel of fortune into the game

Real time reports and chat history

We have added a new feature for admins and moderators. When an user reports another user’s behaviour, the moderator (or admin) online user get an alert in real time.

Get info and history in real time

The alert info about an user is sent to him directly on chat as a new popup. He can also retrieve immediately all history chat about the user who has been reported. Once the report checked, he can easily take a ban action on the abuser if the report data are confirmed.

This is an automatic feature : no needs to enable any extra features in the chat admin panel.


Fast image uploading

We have added a new feature: fast image uploading. This feature is based on the client size resizing.

The normal process of uploading images is the following:

  • chatter chooses an image
  • this image is uploaded to server
  • this image is resized
  • the resized image is sent back to chat

As you see, if you choose a huge image (50 megas for instance), uploading process can take time since you need to upload 50 megas. This can be a real pain with mobile phones.

We have introduced the resizing on client side before uploading to server.

So now the process is:

  • chatter chooses an image
  • this image is resized
  • this resized image is uploaded to server
  • the resized image is sent back to chat

As you can see, the process is much quicker. Besides it allows to upload big size photos since they will be resized before.

Now the caveat of this method is that the final image has JPEG format only. So you upload an animated GIF, you will get a static JPEG picture


utf8mb4 encoding for emojis storage

We changed our encoding system form UTF-8 to UTF8mb4. This little change will allow you to use emojis

πŸ˜€ πŸ˜ƒ πŸ˜„ 😁 πŸ˜† πŸ˜… πŸ˜‚ 🀣 πŸ₯² ☺️ 😊 πŸ˜‡ πŸ™‚ πŸ™ƒ πŸ˜‰ 😌 😍 πŸ₯° 😘 πŸ˜— πŸ˜™ 😚 πŸ˜‹ πŸ˜› 😝 😜 πŸ€ͺ 🀨 🧐 πŸ€“ 😎 πŸ₯Έ 🀩 πŸ₯³ 😏 πŸ˜’ 😞 πŸ˜” 😟 πŸ˜• πŸ™ ☹️ 😣 πŸ˜– 😫 😩 πŸ₯Ί 😒 😭 😀 😠 😑 🀬…

inside your chat configs such as messages, room descriptions, news etc..


How to alternate news in the chat ?

News allows you to display special infos in your chat. You can set news at certain date/time, you can set the interval and associate a news to a room.

But you could not alternante news: imagine that scenario. You have 3 news whose content is “Here is news 1”, “Here is news 2 “, “Here is news 3” and you would like to display randomly one of these 3 news every 3 minutes.

The solution is to create 1 singe “big” news and separate the news with the character |

In our case the content of the news would be:

Here is news 1|Here is news 2|Here is news 3

That way the chat will pick up randomly one part (separated by | ) and display it into the chat.