messages
The page that allows Users to create new Converstions, and send Messages to each other.
Last updated
The page that allows Users to create new Converstions, and send Messages to each other.
Last updated
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.
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.
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:
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:
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:
Mobile Menu (List) Reusable ElementsThis link is shown within the mobile menu (list) reusable elements on all pages.
Users are navigated to the messages page after completing the form on the onboard page.
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
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 are abbreviated to "FG" in the template's element names.
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.
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.
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.
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.
FG - Conversation (Desktop) This element is visible on page load, and displays the selected Conversation when the page width is greater than 600 pixels.
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.
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.
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.
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.
