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

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:

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.

Last updated