Conversation Action Button
A smart three-state button that automatically adapts based on your user selection. It's disabled when no users are selected, shows Start Conversation when no matching conversation exists, and switches to Continue Conversation when one does β all without any conditional logic on your end.
Before You Begin
This component is designed to work alongside the Chat User Picker. The User Picker outputs a Selected User IDs value β this button reads it.
Your Conversations collection should have a field (e.g.,
participant_key) that stores a sorted, comma-separated string of participant IDs. This is what the button uses to detect whether a conversation already exists.
Getting Started
Settings
Button Style
Start Text β The label shown when no matching conversation exists. Defaults to "Start Conversation."
Continue Text β The label shown when a matching conversation is found. Defaults to "Continue Conversation."
Active Color β Background color of the button when active (start or continue state).
Disabled Outline Color β The outline color when the button is disabled (no users selected yet).
Text Color β Label color in the active state.
Disabled Text Color β Label color in the disabled state.
Font Size β Button label size in pixels (12β24, default: 16).
Font Weight β Regular, Medium, Semi Bold, or Bold.
Border Radius β Corner roundness of the button (0β24, default: 8).
Disabled Border Width β The outline thickness when the button is in its disabled state (1β4px).
Group Name (optional)
When a user starts a conversation with more than one other person, the button can prompt them to name the group first. Configure the popup with:
Group Name Placeholder β Placeholder text inside the group name input.
Popup Background Color β Background of the group name prompt.
The Group Name and Group Image are passed as arguments to the Start Conversation Action so you can save them to your database.
Actions
Start Conversation Action β Fires when the button is active and no existing conversation is found. Magic Text arguments: Group Name and Group Image (for group chats). Use this action to create a conversation record, add participants, then navigate to the conversation screen.
Continue Conversation Action β Set inside Conversation Fields. Fires when a matching conversation is found. Typically navigates to the existing conversation and passes the conversation ID.
How the Three States Work
Disabled
Selected Count β€ 1
Outlined, greyed out, not tappable
Start Conversation
Selected Count > 1, no matching conversation
Filled, active color
Continue Conversation
Selected Count > 1, matching conversation found
Filled, active color
The component checks the Conversations list you provided. If the list has at least one record, it shows Continue Conversation and fires the continue action. If the list is empty, it shows Start Conversation and fires the start action.
Tips
Filter your Conversations collection as tightly as possible β
participant_key = Selected User IDs. Since Selected User IDs is a sorted string, an exact match means you've found the right conversation (no duplicates).Wire Start Conversation to: (1) Create conversation, (2) Add participant relationships, (3) Navigate to conversation screen. Pass the new conversation ID via Magic Text.
The button works for both 1-on-1 and group conversations β the group name prompt only appears when more than one other user is selected.
Need Help?
Visit forum.adalo.com to ask questions or share what you've built.
Last updated
Was this helpful?