> For the complete documentation index, see [llms.txt](https://cranford-tech.gitbook.io/property-directory-template/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cranford-tech.gitbook.io/property-directory-template/pages/property.md).

# Property

### Overview

This is a dynamic page that displays data for a specific property listing. The type of content on the page is "Property"

<figure><img src="/files/PGqS60ScREBlEnu5RwLq" alt=""><figcaption><p>Property Page from Property Directory Bubble.io template</p></figcaption></figure>

###

### Navigating to the *property* page

Users will typically navigate to a *property* page by clicking one of the property listings on the [*index*](/property-directory-template/pages/index-homepage.md) page (see image below).&#x20;

<figure><img src="/files/yIJiaJJR0SAbyCxhnIB6" alt=""><figcaption><p>Workflow on index page triggered by clicking on property listing</p></figcaption></figure>

Clicking a property listing on the *index* page triggers a workflow that navigates to the *property* page and sends the data for the property in the cell selected.

###

### Page components

The *property* page can be broken down into 5 main components:

* **Navbar A:** Reusable element that is used to navigate to the dashboard/sign-in page. A conditional statement is used to show/hide the dashboard/sign-in link depending on whether the user is logged in or not.

<figure><img src="/files/lmpZMfBGvHqSbdEWvNtg" alt=""><figcaption><p>Navbar A from property page of property directory bubble.io template</p></figcaption></figure>

* **Group - Property Container:** Group that contains a number of sub-groups that display images for the current page's property.&#x20;

<figure><img src="/files/kZcyUDWTX74Tl0gbha7B" alt=""><figcaption><p>Group - Property container from property page of property directory bubble.io template</p></figcaption></figure>

* **Group - Property Info:** Group that shows details for the current page's property, including: price, address, number of beds/baths, description, location (including google map display) and agent's name/logo

<figure><img src="/files/tyTeqv1fCf0w7oqpiRLx" alt=""><figcaption><p>Group - Property Info container from property page of property directory bubble.io template</p></figcaption></figure>

* **Footer A:** Reusable element that is used to navigate to the dashboard/sign-in page. A conditional statement is used to show/hide the dashboard/sign-in link depending on whether the user is logged in or not.

<figure><img src="/files/R8wK62L0jsb7rqVNPqmo" alt=""><figcaption><p>Footer A from from property page of property directory bubble.io template</p></figcaption></figure>

* **Popup - Send Email:** Popup element that users who are interested in a property can use to contact the associated real estate agent.

<figure><img src="/files/ffg1NhWEq5zRACYewIeL" alt=""><figcaption><p>Popup - Send Email element from property page of property directory bubble.io template</p></figcaption></figure>

### Functionality

#### Contacting Real Estate Agents&#x20;

Users who are searching for properties can contact the Real Estate Agent who has listed the property by using the *Popup - Send Email* element (see image above).

Once a user has filled out the various fields in the popup and clicks "send message" the below workflow is triggered:

<figure><img src="/files/PIWLutLpzBfHMEewxBYN" alt=""><figcaption><p>Workflow that sends email to Real Estate Agent</p></figcaption></figure>

The workflow sends an email to the email address associated with the Real Estate Agent who listed the property. The email will contain the user's name, the address of the property they're interested in, the message they input to the popup and the user's email address.