messages
The page that allows Users to create new Converstions, and send Messages to each other.
Overview
Editor
Desktop
Tablet
Mobile
Why does this page exist?
To allow Users to send Messages to each other
This page allows Users to start a Conversation with one person or multiple people. Users can send GIPHYs, file attachments, image attachments, and YouTube links. They can also video chat (using Hellochat 3.0).
Users can see who is typing and who has seen each Message. They are shown a blue dot next to unread Conversations, to indicate that they're unread. The page is responsive for desktop and mobile, and the design changes conditionally based on the current page width.
Who can access this page?
Logged-In Users
Only Users that are logged-in can access this page. This makes sure that only Users with an account can send Messages to other Users. If the Current User is not logged-in, they will be re-directed to the homepage.
What happens when this page is loaded? What are all of these elements for?
What does this page allow my Users to do?
Where do my Users click in order to go to this page?
Within the Desktop Navigation Reusable Elements
Desktop Navigation Reusable ElementsThis reusable element is on the left-hand side of the screen on the messages, profile, account and admin pages when the current page width is greater than 887 pixels in width:
Within the Header Navigation Reusable Elements
Header Navigation Reusable ElementsThis reusable element is at the top of the screen on the index, confirm, home_blank, privacy_policy, terms, reset_pw, and 404 pages when the Current User is logged in:
Within the Mobile Submenu Reusable Elements
Mobile Submenu Reusable ElementsThis reusable element is on the left-hand side of the screen on the following pages, when the page width is less than or equal to 887 pixels in width:
Within the Mobile Menu (List) Reusable Elements
Mobile Menu (List) Reusable ElementsThis link is shown within the mobile menu (list) reusable elements on all pages.
On a friend's Profile Page, by clicking the "Message" button:
When are my Users taken to this page?
Users are navigated to the messages page after completing the form on the onboard page.
What should I keep in mind about this page's workflows?
This page's functionality is complex. If you need to understand what each workflow is accomplishing, it may be best to study the simple workflows first, and then move onto studying the more difficult ones. Here is an order of the workflow folders from least to most complex:
Folder | Bubble Concepts Used |
Folder L. View User Profile | Navigation |
Folder K. Search, Delete, Leave Conversation | Showing/hiding elements |
Folder G. Mobile Menu | Showing/hiding elements based on a custom state |
Folder H. Responsive Views | "Do When Condition is True" actions based on the current page width, and custom state changes to a reusable element |
Folder A. Pageload | Current page width, page parameters, do every X seconds, make changes to the Current User, triggering custom events |
Folder F. Automatic Scroll | "Do when Condition is True" actions based on a custom state's value |
Folder B. View Conversations | Triggering custom events, showing/hiding elements, changing custom state values, using custom state values as a data source |
Folder C. New Message | Creating new Messages, detecting YouTube videos with regex, triggering custom events |
Folder D. Files/Images/Giphys | Using the GIPHY API, uploading multiple files using the Multifile Uploader, setting a list of things custom state, deleting files from your app's storage, trigger custom events, creating new Messages, showing, hiding elements |
Folder E. New Conversation | Showing/hiding elements based off a page parameter value, detecting existing Conversations based on a custom state value, creating a Conversation based on a custom state value, making changes to an existing Conversation based on a custom state value |
Folder I. Is Typing | "Do When Condition is True" based on whether an input is focused and not empty, Make Changes to a single Conversation, Make Changes to the Current User's List of Conversations |
Folder J. Match Multiline Input Values | Changing the value of an input to a different input's value, setting custom states to force those input values to match |
Folder N. Remove Notifications | "Do When Condition is True" events based on a custom state value, which hides the "unread" circle for a Conversation by Making Changes to a Thing |
Folder M. LastReadMessages | Detects when an API workflow did not run as expected |
Folder O. Video Chat | Shows/Hides an iframe which allows Users to video chat with each other, detects when one or more Users in a video chat would like to video chat, detects when Users have closed the video chat |
What else should I keep in mind about this page's design?
There are many different floating group elements on this page (set to float: nothing). Using floating groups (set to float: nothing) instead of regular groups ensures that the responsive settings function as expected. When regular groups are stacked on top of each other, the responsive setting will not work as expected.
Do not drag the floating groups out of position. If you are worried you might accidentally drag them out of place, it may be helpful to lock the floating groups in the editor by clicking the floating group elements and selecting "Lock this element (not draggable in the editor)" on each of them:
Floating Groups Overview
Floating Groups are abbreviated to "FG" in the template's element names.
1. FG - Mobile Menu
FG - Mobile Menu This element contains the mobile menu (list) reusable element, when the Current User clicks the Icon Menu element with the mobile submenu reusable element.
2. FG - Fade Overlay
FG - Fade Overlay This element is a semi-transparent gray overlay on the page. It becomes visible whenever the FG - Mobile Menu and FG - Add GIPHY to Message elements are visible. This helps to darken the other 'background' elements on the page.
3. FG (Mobile Top Bar when Viewing Conversation)
FG (Mobile Top Bar when Viewing Conversation) This element is shown when the Current User is viewing the messages page at a current page width of 600 pixels or less. It displays the names of the Users in the Conversation that is currently being viewed.
4. FG - View Conversations (Mobile)
FG - View Conversations (Mobile) This element is visible when the page width is less than 600 pixels, and the Current User is selecting a Conversation to view.
5. FG - Conversation (Desktop)
FG - Conversation (Desktop) This element is visible on page load, and displays the selected Conversation when the page width is greater than 600 pixels.
6. FG - Add GIPHY to Message
FG - Add GIPHY to Message This element is displayed anytime the Current User clicks the Button Attach GIPHY (Desktop) or Button Attach GIPHY (Mobile) elements.
7. FG - Conversation (Mobile)
FG - Conversation (Mobile) This element becomes visible when the current page width is less than 600 pixels. Similar to the FG - Conversation (Desktop) element, the FG - Conversation (Mobile) element contains the elements needed to view a Conversation when the Current User is on a mobile screen size. This repeating group uses ext. vertical scroll (instead of vertical scrolling) so the repeating group resizes to the Current User's screen height automatically.
8. FG - Send Message (Mobile)
FG - Send Message (Mobile) This element becomes visible when the current page width is less than 600 pixels. It floats to the bottom of the page so it's always available for Users to see/type into on mobile.
9. FG - Video Chat
FG - Video Chat This element becomes visible anytime the Current User clicks the Icon Join Video Chat (Desktop) or Icon Join Video Chat (Mobile) elements. It contains all of the elements needed for video chat.
Last updated
