# Pages Summary
## [Index](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/1.-marketing/index)
The index page is the home page of the application. When first opening the template in the editor, the index page describes the template's features and functionality. You won't need this page; [set the "landing" page as the new index page, then delete the "old\_index" page](https://docs.littlebaytech.com/templates/messaging-template/quickstart#change-index-page).
## [Account](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/3.-logged-in/account)
The account page allows Users to edit their account information. After the Current User adds or edits their information using the forms on this page, it is then displayed on their profile page and wherever it's needed throughout the application.
The account page primarily uses standard input elements, aside from the combination of elements used to change/delete/save each User's profile picture. This combination of elements is used to improve the user experience, so Users can change and upload their profile picture as shown in the GIFs below:
**Confirm New Profile Picture**
**Discard New Profile Picture**
To view these picture uploader elements in the editor, select the `Group Picture Uploader Container` element, and reveal it in the Elements Tree. Then click to make the `Group Save/Cancel Buttons (Profile Photo)` element visible in the editor:
{% hint style="info" %}
More information on this custom picture uploader can be found in the **"D. Change Profile Picture"** workflow folder.
{% endhint %}
## [Admin](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/3.-logged-in/admin)
The admin page allows admin users to modify Users' information, delete accounts, and designate other Users as admins. All elements are hidden on page load, and contain conditional formatting to become visible when the Current User's "Admin" field (type: yes/no, list:no) is **yes**.
### The Grid and Graph Views
On this page, there are two views -- the "Grid" view and the "Graph" view.
The "Grid" view is the `Group Users Grid Container` element and the "Graph" view is the `Group Graph of Users Container` element:
Each group is shown conditionally, depending on whether the "Grid" or the "Graph" toggle was just clicked.
{% hint style="info" %}
For more information on how these groups are shown, please refer to the **B. Grid and Graph Views** workflow folder.
{% endhint %}
## [Change\_Pass](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/3.-logged-in/change_pass)
The change\_pass page allows Users to change their passwords. This page is not really needed in the template, but it could be useful if you create functionality that assigns temporary passwords to new Users. If a User logs into the application with a temporary password, they will be navigated to this change\_pass page automatically, in order to change their password.
## [Confirm](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/3.-logged-in/confirm)
By default, the template doesn't send confirmation emails to new Users, and it doesn't restrict any functionality for Users without a confirmed email. To send new Users confirmation emails, please read the [confirm page section](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/3.-logged-in/confirm).
## [Design Guide](https://docs.littlebaytech.com/templates/messaging-template/design-guides/design-guide)
The design guide is used to keep the application's design consistent as you build new pages.
## [Landing](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/1.-marketing/landing)
The landing page is a responsive page 'template' that allows you to fill in the information about your application. The page utilizes free, MIT-licensed illustrations from [Undraw](https://undraw.co/).
{% hint style="info" %}
As described in the Setup Guide's ["Set the Landing Page as the new Index Page, and Delete the Old\_Index Page" section](https://docs.littlebaytech.com/templates/messaging-template/quickstart#change-index-page), you should set the landing page as the new index page, and then delete the "old\_index" page.
{% endhint %}
## [Messages](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/3.-logged-in/messages)
The messages page contains all of the elements needed for Users to start Conversations with each other.
{% hint style="info" %}
To ensure the messaging functionality works as expected, please delete the specific privacy roles described in the [Remove the Template's Demo Settings section](https://docs.littlebaytech.com/templates/messaging-template/quickstart#remove-the-templates-demo-settings) of the Setup Guide.
{% endhint %}
You don't necessarily need to know how each part of the messages page works, but looking into the workflow folders will help if you are trying to customize certain functionality. If you'd like to make significant changes to the messages page, here is more information on its structure.
#### The Messages Page's Structure
The messages page has 8 floating group elements which are shown conditionally, depending on if the User is selecting a Conversation, viewing a Conversation, or trying to start a new Conversation.
{% hint style="danger" %}
**It is very important to not move or resize these floating group elements**, to ensure the design remains in place on desktop and mobile.
{% endhint %}
These elements are:
#### **`FG - Conversation (Desktop)`**
This element is visible on page load, and shown when this page is first loaded in the editor. **It is visible to Users when the page width is greater than or equal to 600 pixels in width.**
The `Group Desktop Navigation Container (Desktop)` and `Group Desktop View Conversations Container (Desktop)` elements are visible to the left of the `Repeating Group Messages (Desktop)` element when the page width is greater than or equal to 887 pixels in width (for Users at laptop or Desktop width).
When the page is between 600 and 887 pixels, those left-side navigation elements collapse in width (using collapse rules) and the top navigation element, `Group Mobile Header (Desktop)` becomes visible for Users at tablet width:
#### **`FG - Create New Conversation`**
This element is not visible on page load, and only becomes visible when the Current User clicks any of the `Button New Conversation (Desktop)`, `Button New Conversation (Tablet)`, or `Button New Conversation (Mobile)` elements.
When the Current User selects a combination of Users that they haven't had a Conversation with before, a new Conversation is created. The new Conversation and new Message are not actually created as Things until the User clicks to send their new Message.
{% hint style="info" %}
For more specific information on how this works, please refer to the **E. New conversation** workflow folder.
{% endhint %}
The `Repeating Group Messages (Existing Conversation)` element within the `FG - Create New Conversation` element is hidden on page load, and only becomes visible if the Current User has an existing Conversation with the Users they've just selected to start a Conversation with. This way, the existing Conversation is shown to the Current User within the `FG - Create New Conversation` element, and their new message (when sent) is added to that existing Conversation:
#### **`FG - Mobile Top Bar when Viewing Conversation`**
This element is hidden on page load, and becomes visible when the Current User is viewing the selected Conversation at a current page width of less than 600 pixels. When the page width is less than 600 pixels, the selected Conversation's list of Messages are displayed within the `Repeating Group Messages (Mobile)` element.
In contrast to the `Repeating Group Messages (Desktop)` element that utilizes "vertical scrolling", the `Repeating Group Messages (Mobile)` element is set to "ext. vertical scrolling (infinite scrolling)". Setting the `Repeating Group Messages (Mobile)` element to "ext. vertical scroll" ensures that its height will automatically resize depending on the height of the phone's screen.
The `FG - Mobile Top Bar when Viewing Conversation` element floats to the top, and remains remains visible above that mobile repeating group at all times, so the User can see the names of the Users they're in a Conversation with, or go back to viewing all of their Conversations on mobile as they scroll.
#### **`FG - View Conversations (Mobile)`**
This element is hidden on page load, and only becomes visible when the page width is less than 600 pixels, and the Current User has not yet selected a specific Conversation to view. This element contains the `Repeating Group View Conversations Mobile` element which displays all of the Current User's conversations.
The Current User can then click on one of the Conversations in the Repeating Group Conversations (Mobile) element, which will hide the `FG - View Conversations (Mobile)` element, and show the `FG - Conversation (Mobile)` , `FG - Send Message (Mobile)`, and `FG - Mobile Top Bar when Viewing Conversation` elements
#### **`FG - Conversation (Mobile)`**
This element is hidden on page load, and only becomes visible when the page width is less than 600 pixels, and the Current User selected a Conversation to view. This element contains the `Repeating Group Messages (Mobile)` element. The `FG - Send Message (Mobile)` and `FG - Mobile Top Bar when Viewing Conversation` elements are also shown when the `FG - Conversation (Mobile)` element is visible.
#### **`FG - Add GIPHY to Message`**
This element is hidden on page load, and only becomes visible when the Current User clicks the `Button Attach Giphy (Desktop)` or `Button Attach Giphy (Mobile)` elements.
#### **`FG - Send Message (Mobile)`**
This element is hidden on page load, and only becomes visible when the page width is less than 600 pixels, and the Current User selected a Conversation to view. At this time, the `FG - View Conversation (Mobile)` and `FG - Mobile Top Bar when Viewing Conversation` elements are visible as well.
#### `FG - Video Chat`
The `FG - Video Chat` contains the HTML iframe for Hellochat 3.0 so that Users can video chat with each other. It also contains other waiting and ended state elements that are shown when Users are waiting for a video chat to start, or the Current User's video chat just ended.
When only one person in a Conversation has clicked to enter the video chat, that User is shown this `Group Video Chat (Waiting or Ended State)` element within the `FG - Video Chat` element:
Similarly, when the app detects that a video chat just ended, and the Current User hasn't yet closed the video chat, they will be shown these elements within the `Group Video Chat (Waiting or Ended State)` element.
If two or more Users are online and clicked the video chat button within the same Conversation, the `HTML iFrame (Hello 3.0 Chat)` element is shown so that the Users can chat with each other. For more information on how this works, please refer to the **O. Video Chat** workflow folder.
## [Onboard](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/3.-logged-in/onboard)
Immediately after a new User signs up for your application, they will be navigated to this onboard page. The onboard page contains four 'step' groups, that welcome the Current User, asks the Current User to upload a profile picture, asks the Current User for their website link, and asks the Current User to write a few sentences about themselves. After the Current User completes these steps (or skips them), the last onboard card shows a 'continue' button which navigates them to the messages page.
## [Privacy Policy](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/4.-legal/privacy_policy)
A page where you can include your application's privacy policy.
## [Profile](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/3.-logged-in/profile)
The profile page allows Users to view their own profile information, and the profile information of other Users in the application.
#### The Follow/Unfollow Button on the Profile Page
When the Current User is viewing someone else's profile, the `Button Follow` and `Text Button Send Message (or Edit Profile)` elements are shown to the Current User:
When the `Button Follow` element is shown, and the Current User isn't yet following the person whose profile they are viewing, the `Button Follow` element's text will be "Follow":
When the `Button Follow` element is clicked, the Current User is now following the person whose profile they are viewing. As a result, the button's text conditionally changes from "Follow" to "\[checkmark] Following".
When the "\[checkmark] Following" text is hovered, its text will conditionally change to "Unfollow":
If the "Unfollow" text is clicked, the Current User will no longer be following the person whose profile they are viewing.
#### The Message Button on the Profile Page
When the `Text Button Send Message (or Edit Profile)` element is clicked, and the Current User is trying to send a Message to a friend, the Current User will be navigated to the messages page, with two additional parameters:
**v = new (this shows the `FG - Create New Conversation` element once the messages page is loaded)**
**u = \[the unique ID of the person who the Current User would like to message]**
When the messages page is loaded, the `FG - Create New Conversation` is shown automatically, and the "u" parameter User is automatically added to the "Selected Recipients" custom state (type: User, list: yes). (This custom state stores the list of Users who the Current User wants to start a Conversation with):
This way, the Current User can immediately start typing their new Message when the messages page is loaded. An existing Conversation will be displayed if there is one between the Current User and the selected User(s).
#### The Edit Profile Buttons on the Profile Page
When the Current User is viewing their own profile page, the `Text Button Send Message (or Edit Profile)` or `Text Button Edit Profile (Mobile)` elements will be visible, depending on whether the Current User is on desktop or mobile.
**Editor**
Desktop:
Mobile:
**Preview**
Desktop
Mobile
These buttons' texts are "\[pencil icon] Edit". When clicked, these buttons' workflows navigate the Current User to their account page, in order to edit their profile information.
## [Terms](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/4.-legal/terms)
A page where you can include your application's Terms of Use.
## [UI Components ("ZComponents" Page)](https://docs.littlebaytech.com/templates/messaging-template/design-guides/ui-components)
The UI components page consists of pre-built, responsive elements that you can copy+paste onto new pages (shown in the video below).
{% embed url="" %}
## [Page Templates ("zlayout" Pages)](https://docs.littlebaytech.com/templates/messaging-template/design-guides/page-layouts)
Within the template are four 'page template' designs. These are pre-built, responsive pages (without data/workflows) that you can duplicate anytime you create a new page to save some time.
[View the 4 page template designs here](https://docs.littlebaytech.com/templates/messaging-template/design-guides/page-layouts#list-of-page-template-designs).
## [Reset\_PW](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/3.-logged-in/reset_pw)
This page allows Users to reset their password incase they've forgotten it. After a User requests a password reset link be emailed to them, the link in that email will navigate them to this page. On this page the User will type and confirm their new password.
## [404](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/1.-marketing/404)
The "page not found" page.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.littlebaytech.com/templates/messaging-template/page-guides/page-summaries.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.