MARKETPLACE
PLUGINS
FLUID CHAT (PRO)
Fluid Chat (Pro) logo

Fluid Chat (Pro)

Published December 2025
   β€’    Updated this week

Plugin details

πŸš€ Stop fighting with Repeating Groups. Fluid Chat is a professional, high-performance visual element designed to replace the standard Bubble repeating group for messaging apps. It renders your entire conversation using a virtualized list, ensuring 60fps scrolling even with thousands of messages.
🌊 Native-Like Experience It mimics the behavior of top-tier apps like WhatsApp, Telegram, and iMessage. Content starts at the bottom (inverse scroll) and stays anchored there when new messages arrive.

Fluid Chat Native πŸ’¬
Transform your Bubble application with a premium, native-feeling messaging experience. Fluid Chat Native is the ultimate All-in-One chat element, designed to look and feel exactly like top-tier apps such as WhatsApp and iMessage.

No more clunky repeating groups or messy inputs! This single element handles the entire chat UI, media uploads, voice recording, and real-time interactions with incredible performance and smooth animations.

✨ Key Features:

πŸ“± Native Layout: "Pill" style text input, smart scroll-to-bottom, and modern message bubbles.

🎀 Built-in Voice Recorder: Record audio directly inside the input bar with a live timer and visualizer playback.

πŸ“Έ Image Uploads & Previews: Seamless image selection with a beautiful in-chat preview and cancel button.

@ Smart Mentions: Type @ to open a floating, filterable dropdown of users. Mentions are automatically highlighted in the chat!

βœ… Read Receipts: Grey and Blue ticks indicating sent and read status based on your custom view counts.

πŸ‘† Context Menu (Long Press/Right-Click): Beautiful floating menu with native icons for Reply, Forward, Edit, Delete, and Emoji Reactions.

✍️ Typing Indicators: Animated "is typing..." bubbles.

🎨 Highly Customizable: Change background colors, images, bubble colors, and highlight colors easily via properties.

⚠️ Note to existing users: The older chat elements included in this plugin will remain available so your current apps don't break, but they are now considered legacy and will no longer receive updates. We highly recommend migrating to the new "Fluid Chat Native" element!

Demo Test: https://demo-app-56978.bubbleapps.io/version-test/fluidchat_pro/1765242624089x959822174042466200

Editor: https://bubble.io/page?id=demo-app-56978&test_plugin=1765219101977x460573439119589400_current&tab=Design&name=fluidchat_pro&ai_generated=true&type=page&elements=bTKlL

$15

One time  β€’  Or  $5/mo

stars   β€’   0 ratings
2 installs  
This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

NoCoddo logo
NoCoddo
Joined 2025   β€’   83 Plugins
View contributor profile

Instructions

How to use Fluid Chat Native:
Place the Element: Drag and drop the Fluid Chat Native element onto your page. Make it fill the desired height and width (it's fully responsive!).

Load your Data (Update Action/Fields): In the property editor, map your database "Messages" to the corresponding lists (Text, Images, Audios, Creator IDs, Timestamps, etc.). Ensure all lists are sorted the exact same way (usually by Creation Date).

Setup Mentions: Map your "Users" data to the three mention fields (mention_names_list, mention_ids_list, mention_avatars_list) so the @ dropdown knows who to display.

Handle Sending (Workflow): Create a workflow: When Fluid Chat Native's message_sent is triggered. Use the exposed states (draft_text, draft_image_base64, draft_audio_base64) to create a new Message in your database.

Handle Actions (Workflow): Create a workflow: When Fluid Chat Native's long_press_triggered. Check the state last_action (e.g., "delete", "edit", "react:πŸ‘") and modify the database item matching the selected_message_id.

Handle Reactions: After you create the workflow Long Press, just concatenate the reaction to what is saved in the message bd. (e.g.: Modify Thing, reactions field = This reactions last_action:split by (:): last item).
Your field will look like this: β€οΈβ€οΈβ€οΈπŸ‘πŸ‘β€οΈ.
Your chat message will look like this: 4❀️2πŸ‘.

Handle Notifications: Use the user_mentioned event and the mentioned_user_ids state to send push notifications or emails to users tagged in a message!

Types

This plugin can be found under the following types:
Element   β€’   Event

Categories

This plugin can be found under the following categories:
Chat   β€’   Mobile   β€’   Social Network   β€’   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble