Hey Glide Fam,
I’m excited to share a way to enable voice messages in your Glide apps! This might be particularly useful for situations where typing might be cumbersome or users prefer voice communication.
This post will guide you through two parts:
- Part 1: Displaying Voice Messages - How to set up your data structure to show voice messages alongside text messages.
- Part 2: Sending Voice Messages - How to create a user experience for recording and sending voice messages.
Part 1: Displaying Voice Messages
- Prep your Messages collection: In your Messages collection, add a URL property specifically for the voice message. Name it something clear, like “Voice Message URL”.
- Create a Template Column: We’ll use this column to display the voice message.
- Set the Template: Within the template column, set the template to:
[Listen to voice message](2) - Replace the Placeholder: Replace the
2with the actual column name you chose for the voice message URL (e.g., “Voice Message URL”). - Use an If > Then > Else Column: This ensures the appropriate message displays. Here’s the logic:
- If “Voice Message URL” (or your chosen name) isn’t empty, then show the template column you just created (where it says “[Listen to voice message]”).
- Otherwise, show the original “Message” text column.
- Displaying on your Messages Screen: Finally, on your messages screen, set the message field to display the If > Then > Else column you created in step 5. This will dynamically show either the voice message or text message.
Part 2: Sending Voice Messages
- User-Specific Voice Message URL: Add a URL column in the Users Column (we’ll call it “Recorded Voice Message URL”). This will store the temporary URL of the user’s recording.
- Record Button (Workaround): Since Glide doesn’t natively support recording buttons within the Chat component, here’s a workaround:
- Filter your message list so that the Message is not equal to empty or the Voice Message URL (or your chosen name) is not equal to empty
- In the “Actions after message is sent”, create a new Action.
- Configure the Action to trigger only if the “Message” field contains “voice” or “VOICE” (case-insensitive).
- When triggered, this action will:
- Delete the current row in the chat.
- Clear the User Profile > “Recorded Voice Message URL” (or your chosen name).
- Open a new screen for “User Profile > User Profile Row”.
- New Screen for Recording: This new screen will handle the recording functionality.
- Add an Audio Recorder Component. Set it to save the recording to the “Recorded Voice Message URL” (or your chosen name).
- Optional: Preview Recordings: You can add an Audio component here to allow users to preview their recordings before sending.
- Send the Voice Message: Add a button. Make it visible only when the “Recorded Voice Message URL” (or your chosen name) has a value (meaning a recording exists).
- When the button is clicked, create a new Action:
- Add a new row to the “Messages” collection.
- Set the “Voice Message” field to the “User Profile > Recorded Voice Message URL” (or your chosen name).
- Navigate back to the main chat screen.
Now It’s Voice Message Time!
With these steps, users can send voice messages by simply typing “voice” or “VOICE” (case-insensitive) in the chat. The app will guide them through recording and sending their voice message.
This might not be the official way, but it’s a creative solution to enable voice messages in Glide apps! Feel free to adapt and improve this approach to fit your specific needs.
Let me know in the comments if you have any questions or have your own take on enabling voice messages!
Demo video:
