messages

The page that allows Users to create new Converstions, and send Messages to each other.

Overview

Editor

Desktop

The messages page (when the page is greater than 887 pixels in width)

Tablet

The messages page (when the page is between 600 and 887 pixels in width)

Mobile

The messages page (when the page is less than 600 pixels in width)

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?

Pageload/Elements Overview

1. Responsive

2. Mobile Pageload

3. New User

4. New Conversation (Parameter)

5. New Conversation w/ User (Parameter)

6. View Conversation (Parameter)

What does this page allow my Users to do?

1. Start a Conversation

2. View/Select a Conversation

3. Search for a Conversation

4. Delete or Leave a Conversation

5. View More Messages in a Conversation

6. View Unread Messages

7. See Who's Typing

8. See Who's Seen Each Message

9. Send Images in a Message

10. Send Files in a Message

11. Send a GIPHY in a Message

12. Send a YouTube Video in a Message

13. Start a Video Chat

Where do my Users click in order to go to this page?

Within the Desktop Navigation Reusable Elements

This 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

This 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

This 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

This 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

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

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)

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)

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)

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

This element is displayed anytime the Current User clicks the Button Attach GIPHY (Desktop) or Button Attach GIPHY (Mobile) elements.

7. 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)

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

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.