[New Plugin] Fluid Chat: The "WhatsApp-style" element. 60fps Scroll, Audio Messages & Images

Hi everyone! :waving_hand:

Building a chat app in Bubble usually means fighting with Repeating Groups: the scroll jumps, “scroll to bottom” is glitchy, and performance drops after 50 messages.

I wanted a chat that felt native (like WhatsApp or Telegram), so I built Fluid Chat.

Instead of a heavy RG, this is a single, high-performance visual element that renders your conversation instantly.

:rocket: Key Features:

  • Inverse Scroll: Content stays anchored to the bottom. No more weird jumping when the page loads.

  • Audio Experience: Built-in Voice Recorder button + Custom Audio Player with waveforms (no ugly browser defaults).

  • Smart UI: Auto-inserts “Today/Yesterday” dividers and groups messages visually.

  • Real-time feel: Includes Typing Indicators (animated bubbles) and Read Receipts (Blue ticks) logic.

  • Multi-Media: Supports multi-image uploads and full-screen viewing.

  • Long Press: Right click with your mouse or long press with your finger and you will have a menu to react, edit or delete a message.

It handles all the heavy lifting (rendering HTML, managing audio state, scrolling) so you just pass the list of messages, and it works.

:backhand_index_pointing_right: Get the plugin: Free Version

:backhand_index_pointing_right: Get the plugin: Pro Version

All the details and demo test on the links. Let me know if you run into any issues setting it up.

Happy bubbling! :bubbles:

Hey Bubblers! :waving_hand:

I’m excited to announce the release of Version 2.0 of the Fluid Chat Plugin! We’ve been listening to feedback and this update focuses on stability and “WhatsApp-style” features that were previously hard to implement.

Here is what’s new in V2.0:

1. Automatic Left/Right Alignment ↔️ Forget about hacking CSS or creating complex conditionals to put your messages on the right and others on the left.

  • How it works: Just pass the Message Creator ID List and the Current User ID. The plugin handles the math and CSS classes automatically.

2. Smart Read Receipts (Blue Ticks) :white_check_mark: Boolean (yes/no) lists were failing for group chats. We’ve upgraded to a Count-based system.

  • The Logic: You pass the count of how many users read each message. You define the “Target” (e.g., 2 for private chats, 5 for a group).

  • The Result: The ticks turn blue only when the required number of people have seen the message.

3. “Bulletproof” List Alignment :shield: Bubble sometimes ignores empty values in lists, which causes message types (Text vs Image) to desync (e.g., the 5th image appears on the 4th message).

  • The Fix: We now accept Message Type and Read Counts as Formatted Text (comma-separated). This ensures that even if a value is empty/null, the order of your messages remains perfect.

:backhand_index_pointing_down: How to update: Go to your plugin tab, upgrade to Version 2.0, and check the documentation for the new field expressions (specifically using :formatted as text for Types and Counts).

Links on the first post!

Let me know if you have any questions or feature requests below! Happy bubbling! :bubbles:

Hey Bubble community! :waving_hand:

If you’ve ever tried to build a chat application in Bubble, you know the struggle: repeating groups jumping around, clunky inputs, building a custom audio recorder, struggling with read receipts…

Today, I’m super excited to announce a massive update to Fluid Chat, introducing our brand new element: Fluid Chat Native! :rocket:

We decided to rewrite the chat experience from the ground up to bring you a true native-feeling, All-in-One chat component. You just drop the element on the page, map your lists, and the plugin does ALL the heavy lifting.

:fire: What makes Fluid Chat Native special?

  • :microphone: Built-in Voice Recording: Complete with a sliding UI, red blinking dot timer, and cancel button. No external plugins needed!

  • :framed_picture: In-Chat Media: Users can attach images and preview them above the text input with a sleek remove button before sending.

  • :speaking_head: Smart @ Mentions: A floating, filterable dropdown appears when you type @. It highlights the name in the chat and triggers a specific event so you can send push notifications instantly!

  • :backhand_index_pointing_up: Native Context Menus: Long-press (mobile) or right-click (desktop) to open a beautiful glass-morphism menu. Reply, Forward, Edit, Delete, and Emoji reactions built-in!

  • :white_check_mark: Read Receipts & Audio Visualizers: WhatsApp-style Grey/Blue ticks and dynamic audio waveform visualizers.

  • :artist_palette: Pixel-Perfect UI: “Pill” style inputs, smart scroll-to-bottom, CSS variables for deep customization (change background patterns, mention colors, etc.).

:gear: How easy is it?

  1. Drop the element.

  2. Feed it your Search for Messages.

  3. Use the Message Sent event to save the draft_text, draft_audio_base64, or draft_image_base64 to your database. Done! :tada:

:warning: A quick note for our existing users: The older elements (Fluid Chat V1) are still in the plugin so your current apps won’t break, but they are now marked as legacy and will not receive future updates. We highly recommend upgrading your pages to the new Native element!

I can’t wait to see the incredible communication tools you build with this. Let me know what you think below, and drop any feature requests for V2! :backhand_index_pointing_down::sparkles:

Happy building! :hammer_and_wrench:

Hey man - stumbled across this today and it’s awesome! It has a huge amount of potential and solves a real problem.

I’ve managed to get the fundamentals to work: retrieving all my exisiting chats in the correct channel/group, creating new messages etc. but there are somethings I cannot work out/bugs:

  1. There is no way to display the message creators name. I have avatars working, but this is useless without usernames/display names
  2. The send, photo, audio icons are missing. The button “locations” are there and the function works, but i have no icon rendering.
  3. I cannot get reactions to work. How can I find the target message of a long press? this does not appear in the workflow options
  4. The action list focuses from the exact location of the long press. This means the action list often renders outside of screen limits if someone long presses a message to far to the right.
  5. When long pressing an image it loads a blank view of the larger image. If i save the image from the popup it correctly appears in my photo library.

A feature I would like to see is a native reply function. I can create a reply button fine, but i need the referenced message to render in the input and ouput of the new message. Just like WhatsApp. A scroll to that message when tapped would be awesome.

It would also be great if this was actually a native Bubble Mobile plugin. I am currently having to render the element in a web app page, which i load into an iFrame in my native Bubble mobile app.

Very happy to be a power tester for you as I have a large and well used chat ecosystem in my app currently.

Hi John,

First of all thank you for your feedback, much appreciated! Now answering your questions (I’ll try my best):

  1. I totally forgot about that! I’m releasing a fix with the user names and the color for them.

  2. It’s not happening on Chrome or Safari, i injected the library manually and see if works for your case.

  3. For reactions you use the same event “Long Press” only when Last Action contains “react:”. Then you update your field in the database like a string adding the last emoji sent. e.g.: In your field you already have :heart: if you add a :smile: , the field will have :heart::smile:. If you add another :heart:, the field will have :heart::smile::heart: but in the chat will look like “2 :heart: :smile:”.

  4. For this i injected a web-kit, for me it’s working on mobile (web page). Also i disabled the underline while long pressing.

  5. Yes it’s loading a blank view, now it’s fixed and I changed other thing. Now to open the image you just need to click it, if you long press it will only trigger the emojis and actions.

I also change other things like the waveform of the audio player was floating outside the bubble on mobile.

For now i can’t do plugins for mobile native because i didn’t register on time (I started doing plugins after that).

For new features, thank you for your ideas! I already have a roadmap of updates for this plugin but I’m just one person doing and maintaining 40+ plugins and also making a SaaS to be released in a few months so I’ll try my best to release the updates as soon as I can :sweat_smile:

Thank you again! And I hope this new patch will fix your issues! If not complain again and I’ll try to fix them :smiley:

Cheers!

Hey fellow Bubblers! :waving_hand:

I’m beyond excited to announce Version 4.0 of Fluid Chat Pro. We’ve completely pushed the boundaries of what a chat interface can do inside Bubble, focusing heavily on modern UX and solving long-standing Bubble limitations.

If you are building a messaging app, a marketplace, or a team collaboration tool, your users expect a “WhatsApp-level” experience. V4.0 delivers exactly that!

:glowing_star: What’s New in V4.0?

:speech_balloon: Contextual Replies (Swipe/Click to Reply) Users can now reply to specific messages! The plugin draws a beautiful preview above the input, and generates a native quote block inside the bubble. Clicking the quote smoothly scrolls the chat to the original message.

:camera_with_flash: Multi-Image Uploads & Native CSS Galleries We solved the dreaded “List of Lists” Bubble problem! Users can now attach up to 5+ images at once. The plugin uploads them in parallel and automatically renders a beautiful CSS photo grid (album) inside the bubble—just like WhatsApp and Telegram!

:grinning_face: Lightning-Fast Native Emoji Picker No more relying on the OS keyboard! We integrated a lightweight, native emoji picker directly into the chat input. It features categories, search, and smooth animations.

:plus: Free Custom Reactions The long-press context menu just got an upgrade! Alongside the default quick emojis, users can now click the new “+” button to react to a message with any emoji from the picker (:avocado:, :turtle:, :rocket:—you name it!).

:hammer_and_wrench: Rock-Solid Architecture Media is now uploaded natively to your Bubble AWS in the background using Promise.all for insane speeds, eliminating base64 saving errors forever.

Check out the demo page to see these features in action, and let me know what you think below! Happy building! :rocket::man_technologist:

Hey Bubblers! :waving_hand:

We’ve just pushed a massive UX quality-of-life update to Fluid Chat (Pro)! If you want your Bubble chat to feel exactly like WhatsApp or iMessage, you’re going to love this.

:sparkles: What’s new in V4.1?

:brain: Smart Stateful Reactions (Key-Value Engine) Until now, most Bubble chats just appended emojis to a text string (e.g., :+1::heart:). This meant users could spam emojis, and they couldn’t easily “undo” a reaction. With V4.1, the plugin’s JavaScript engine now silently tracks the Current User’s ID alongside the emoji.

  • Toggle to Remove: If a user clicks their existing :+1:, it removes it!

  • Swap to Change: If they click a :heart: instead, it swaps their previous reaction automatically.

  • Premium UI Highlight: Just like WhatsApp, the user’s specific reaction gets a beautiful blue highlight in the chat bubble so they know exactly what they clicked!

:hammer_and_wrench: The “Infinite String” CSS Fix Ever had a user type “kkkkkkkkkkkkkkkkkkkkkk” or paste a massive URL, only to watch it break out of the chat bubble and ruin your mobile layout? Fixed! The CSS engine now forces extreme strings to wrap perfectly within the bubble limits.

:counterclockwise_arrows_button: Upgrading is insanely easy: You don’t need to change your database. The plugin does all the heavy lifting in the browser! Simply use the new trigger Reaction Updated → Make changes to Message → Save the plugin’s new updated_reactions_string to your database. Done in 30 seconds! :high_voltage:

Available now in the plugin tab. Let me know what you guys think of the new UI highlights! :backhand_index_pointing_down::fire:

Hey Bubblers! :waving_hand:

We are back with the biggest update yet to Fluid Chat (Pro)! We’ve completely supercharged the media capabilities of the plugin. If you are building B2B apps, marketplaces, or social platforms, your chat is about to feel incredibly premium.

:sparkles: Here is what’s new in V5:

:paperclip: Multi-File & Document Support Chats aren’t just for photos anymore. Users can now click the new “Paperclip” icon to upload multiple PDFs, Word documents, Excel sheets, and ZIP files at once! The plugin intelligently renders a beautiful “File Card” in the chat bubble showing the file name, extension type, and a download button.

:link: URL Rich Previews (Smart Snippets) Pasting a link (like a news article or a blog) will now automatically generate a sleek preview card showing the website’s thumbnail, title, and description. Bonus: We built a native, zero-delay bypass specifically for YouTube links! If a user pastes a YouTube URL, the plugin instantly fetches the official high-res thumbnail without hitting any API rate limits!

:headphone: Pro Audio Player (Speed & Seek) We completely rebuilt the voice note player.

  • Playback Speed: Added a toggle button right on the player to switch between 1x, 1.5x, and 2x speeds (perfect for those long ramblers!).

  • Interactive Waveform: The visualizer bars are no longer just for show. Users can now click anywhere on the waveform to instantly skip/seek to that exact part of the audio!

:bug: Mobile UI Fixes We applied advanced CSS flexbox rules to the input bar. If a user types an infinitely long string without spaces (e.g., “hahahahahahaha…”), it will no longer stretch your input bar off the mobile screen!

:counterclockwise_arrows_button: Ready to Upgrade? The new version is live in your plugins tab! We’ve made sure that the database architecture remains incredibly lightweight. Be sure to check the plugin instructions on how to use our , and || string formatting to handle multiple files per message effortlessly.

Let us know what you think of the new Rich Snippets and Audio Player! Happy building! :backhand_index_pointing_down::fire:

Hey Bubblers! :waving_hand:

We are thrilled to announce Version 6 of our Chat Plugin! This isn’t just a minor tweak; we’ve completely re-engineered the core DOM architecture to bring you an enterprise-grade chat experience that rivals WhatsApp and Discord.

Whether you are building a SaaS team chat, a vibrant community group, or the next big AI Wrapper, V6 has you covered.

:fire: What’s inside V6?

:scroll: 1. True Seamless Infinite Scroll (Reverse Lazy Loading) Say goodbye to laggy chats and jarring scroll jumps! Users can now smoothly scroll up to read thousands of older messages. The plugin requests new batches in the background and perfectly anchors the viewport using pure math. No jumping, no flickering. Just buttery smooth scrolling!

:robot: 2. AI Chatbot Ready (Markdown Support) You asked, we delivered! You can now use the exact same unified chat interface for Human-to-Human chats AND AI bots. The plugin natively renders Markdown—including bolding, italics, bullet points, and dark-mode code blocks (```). Perfect for OpenAI / Claude integrations!

:date: 3. System Messages Easily inject centered UI bubbles to denote events like “John joined the group”, “Anna left the group”. Just pass a yes/no list and the plugin handles the rest.

:writing_hand: 4. Dynamic Group Typing Indicators Instead of a generic typing dot, you can now pass dynamic text to show exactly who is at the keyboard (e.g., “Dennis & Tiago are typing…”).

:hammer_and_wrench: How the Infinite Scroll works (It’s super easy!):

  1. Limit your message search using :items until [Custom State Number].

  2. Use our new “Load More Triggered” workflow event.

  3. Simply increase your custom state by +20 or +50. The plugin handles all the prepend DOM injection and scroll physics automatically!

Available now in the plugin tab. Update to V6, give it a spin, and let us know what you think below! Happy building! :clinking_glasses::sparkles:

Hey Bubblers! :waving_hand:

We are thrilled to announce Fluid Chat V6.1, a massive update focused entirely on taking your mobile chat experience to the absolute next level. We’ve completely rebuilt the engine and created an element to run on Bubble’s Native Mobile, mimicking the top-tier chat apps you use every day. :mobile_phone::sparkles:

This is the first version of the element so it doesn’t have all the features of Fluid Chat Web.

Here is what is new in V6.1:

:green_circle: Native Audio Player with Animated Waveforms Say goodbye to opening browsers just to hear a voice note! V6.1 introduces a fully native, in-chat audio player. It features an interactive, animated waveform that tracks the audio progress and visually reacts in real-time.

:green_circle: Lightning-Fast Image Previews We’ve re-engineered how images are handled. You can now use local device URLs to preview photos from the camera or gallery instantly—zero waiting for S3 uploads! Send the files to your database only when the user actually hits “Send”.

:green_circle: Separated Media Triggers Total control is here. We’ve split the media buttons into two distinct events: camera_pressed and attachment_pressed, allowing you to trigger native camera and gallery plugins separately.

:green_circle: Customizable UI in Preview The bottom input bar is now fully customizable! Change the bottom_bg_color and watch the Bubble Editor instantly reflect your design via our new smart-preview canvas.

Getting Started: Check the plugin documentation for the exact workflow relay setup to get your audio uploads and local image previews running smoothly.

Link to the full guide PDF HERE

Update to V6.1 today and let us know what you think! Drop your feedback and questions below. :backhand_index_pointing_down::hammer_and_wrench: