How to use Fluid Chat Web (Free):
1. Database Setup Create a Message data type with at least: Text (text), Creator (user), and Created Date (date).

2. Element Setup Drag the Fluid Chat element onto your page. Uncheck "Fit height to content" in the Layout tab. This is crucial for the scroll to work properly. Give the element a fixed height (e.g., 600px) or set it to 100% height within a group.

3. Connecting Data In the element properties, you need to pass Lists of values, not the objects themselves.

  - Message Text: Do a search for Messages -> each item's Text

  - Message Creator UID: Do a search for Messages -> each item's Creator -> Unique ID

  - User Avatar: Do a search for Messages -> each item's Creator -> Photo/Image

  - Timestamp: Do a search for Messages -> each item's Created Date

ATTENTION: For all field to be in the same order, do a “Sort by Created Date (Descending = NO)”

4. Drop a text input and a button “Send Message”, when you send a message you create a new message in the database and it will appear in the chat.


General Setup (Mobile Element):

Place the Fluid Chat (Free) or the new Fluid Chat Mobile (Beta) element on your view.

In the element's properties, map your database lists. Ensure all lists (Messages, Creator UIDs, Timestamps, Avatars) are perfectly synced and sorted chronologically.

Provide the Current User UID (the unique ID of the logged-in user). The plugin uses this to know which messages belong on the right (sent) and which belong on the left (received).

Customize your colors (Backgrounds, Bubbles, and Text) to match your app's theme.

Triggering Workflows:

Go to the Workflow tab and add the event: A Fluid Chat - Send Pressed.

Inside that workflow, add a "Create a new thing" action to save the message to your Bubble database.

Use the element's exposed state Typed Text to capture exactly what the user wrote. The plugin will automatically clear the input box after the button is pressed!