Nesthub Widget Styles & Setup

To create Nesthub listings, you will first need to set up the feed for the client. Please reference the flow chart here to determine which widget you will need to set up based on the client's software and package.

Add a Feed Last Updated 9/3/2024

Go to: Listing —> Feeds —> Add Feed
Feed name:
- Propertyware, Tenant Turner, Buildium, Showmojo
  - If Propertyware:
  - If Tenant Turner:
  - If Buildium:
  - If Showmojo:
To Run the Feed go to Listings —> Click the Feed Name —> Actions —> Run Feed
Reference the other tabs for how to set up the widget based on the client.

SEO Property Widget (Customers Paying for SPP) Last Updated 9/3/2024

View Example

NESTHUB PROPERTY SETUP ON BACKEND (different if they have Rentvine)

Add a Page

Go to: Listings —> Pages —> Add Page
Title Tag:

Atlanta Homes for Rent, Houses for Rent in Atlanta, GA, Atlanta, Georgia Rental Homes.

Meta Tag:

Find Atlanta, GA homes for rent with our borderless search. Search by any criteria!

Go to Settings —> View Template —> Rentals —> Save Changes

PMI Add Page

Instructions

Remove any .container or .container-fluid from the Rentals Template. Older sites may need root variables to be set for colors and header-height.

Files to add to Rentals Template

            
              
              
              <link rel="stylesheet" href="https://resources.nesthub.com/css/fancybox.css" />
              <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css" />
              <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css">
              <link rel="stylesheet" href="https://resources.nesthub.com/css/nhw.css">
              <script defer src="https://kit.fontawesome.com/9e4e3329f0.js" crossorigin="anonymous"></script>
              <script src="https://resources.nesthub.com/js/fancybox.umd.js"></script>
              <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.umd.js"></script>
              <script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
              <script src="https://static.addtoany.com/menu/page.js"></script>

              <!-- make sure to add id="rentals" and class nhw to the content container -->
              <section id="rentals" class="body-container nhw">
                {% content %}
              </section>

List

            
              
              
              
              <header class="nhw-header">
              	<h1 class="display-1">{% snippet name='areas' market='1' %} Homes For Rent</h1>
              	<div class="btn-list">
              		<a href="{% snippet name='portal' type='app' %}" target="_blank" title='opens in new tab' class="btn">Apply Online</a>
              		<a href="/tenants" class="btn btn--secondary">Rental Qualifications</a>
              	</div>
              </header>



              <p class="mw-950 text-center">
              	Whether you're relocating,
              	planning a long-term stay, or simply prefer the flexibility of renting, our extensive listings offer a diverse range of quality homes available
              	for extended periods. We understand that finding the right long-term rental is a significant decision, and that's why our search page provides
              	a user-friendly interface, advanced filtering options, and comprehensive property details to streamline your search process. Take your time,
              	explore our listings, and discover a place where comfort, convenience, and long-lasting memories await you. Start your journey towards finding
              	the ideal {% snippet name='areas' market='1' %} rental property today!
              </p>



              <div id="nesthub-property-list-view" class="nesthub-widget property-list" data-ion="listing-list">
              	{% listing_page %}
              	<form id="nesthub-search-form" class="prop-search-form" _lpchecked="1">

              		<div class="prop-search-form__container">

              			<div class="prop-search-form__item prop-search-form__item--search">
              				<div class="prop-search-form__icon">
              					<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-location"></i></div>
              				</div>
              				<div class="prop-search-form__field">
              					{% capture searchInput %}{% listingSearchKeyword %}{% endcapture %}
              					{{ searchInput | replace: 'Search', 'Search by Location' | replace: 'name="search"', 'name="search" placeholder="Address, city, state, or zip"' }}
              				</div>
              			</div>

              			<div class="prop-search-form__item">
              				<div class="prop-search-form__icon">
              					<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhw-property"></i></div>
              				</div>
              				<div class="prop-search-form__field">
              					{% capture propTypeInput %}{% listingSearchPropertyTypes %}{% endcapture %}
              					{{ propTypeInput | replace: 'Property Type', 'Type of Place' }}
              				</div>
              			</div>

              			<div class="prop-search-form__item prop-search-form__item--beds">
              				<div class="prop-search-form__icon">
              					<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-king-bed"></i></div>
              				</div>
              				<div class="prop-search-form__field" data-target="dropdown">
              					<div class="prop-search-form__label">Beds & Baths</div>
              					<div class="prop-search-form__value">Choose amounts</div>
              				</div>
              				<div class="prop-search__dropdown">
              					{% listingSearchBeds %}
              					{% listingSearchBaths %}
              				</div>
              			</div>

              			<div class="prop-search-form__item prop-search-form__item--price">
              				<div class="prop-search-form__icon">
              					<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhw-price"></i></div>
              				</div>
              				<div class="prop-search-form__field" data-target="dropdown">
              					<div class="prop-search-form__label">Price Range</div>
              					<div class="prop-search-form__value">Choose amounts</div>
              				</div>
              				<div class="prop-search__dropdown">
              					{% capture searchMinRent %}{% listingSearchMinRent  %}{% endcapture %}
              					{{ searchMinRent | replace: 'Minimum Rent', 'Min Rent' }}

              					{% capture searchMaxRent %}{% listingSearchMaxRent  %}{% endcapture %}
              					{{ searchMaxRent | replace: 'Maximum Rent', 'Max Rent' }}
              				</div>
              			</div>

              			<div class="prop-search-form__btn">
              				<label for="nesthub-search-btn"><span class="sr-only">Submit</span></label>
              				<button id="nesthub-search-btn">
              					<div class="icon"><span class="sr-only">Submit</span><i aria-hidden="true" class="fa-kit fa-nhvl-search"></i></div>
              				</button>
              			</div>

              		</div>

              		<div class="prop-search-options">

              			<div class="prop-search-options__item">
              				<div class="prop-search-options__icon">
              					<div class="icon"><i class="fa-light fa-sliders"></i></div>
              				</div>
              				<div class="prop-search-options__label" data-target="dropdown">
              					Optional Filters
              				</div>
              				<div class="prop-search__dropdown">
												{% capture pet_dropdown %}{% listingSearchPets %}{% endcapture %}
												{{ pet_dropdown | replace: 'DogsAllowed', 'Dogs Allowed' | replace: 'CatsAllowed', 'Cats Allowed' | replace: 'DogsAndCats', 'Dogs and Cats' | replace: 'NoPetsAllowed', 'No Pets Allowed' }}
              				</div>
              			</div>

              			<div class="prop-search-options__item">
              				<div class="prop-search-options__icon">
              					<div class="icon"><i class="fa-regular fa-arrow-up-arrow-down"></i></div>
              				</div>
              				<div class="prop-search-options__label" data-target="dropdown">
              					Sort
              				</div>
              				<div class="prop-search__dropdown">
              					{% listingSearchSort %}
              				</div>
              			</div>

              		</div>

              	</form>

              	{% assign listing_count = listings | size %}

              	{% if listing_count <= 0 %}
              	<div class="nhw__no-listings">
              		<h4>No Listings Found!</h4>
              	</div>
              	{% else %}
              	<ul class="nhw-nav nhw-nav-pills nhw-mb-3" id="nesthub-property-list-tab-list" role="tablist">
              		<li class="nhw-nav-item">
              			<a class="nhw-nav-link nhw-show nhw-active" id="nesthub-property-list-tab" href="#nesthub-property-list" role="tab" aria-controls="nesthub-property-list" aria-selected="true">List</a>
              		</li>
              		<li class="nhw-nav-item">
              			<a class="nhw-nav-link" id="nesthub-property-map-tab" href="#nesthub-property-map" role="tab" aria-controls="nesthub-property-map" aria-selected="false">Map</a>
              		</li>
              	</ul>
              	<div class="nhw-tab-content" id="nesthub-property-list-tab-content">
              		<div class="nhw-tab-pane nhw-fade nhw-active" id="nesthub-property-list" role="tabpanel" aria-labelledby="nesthub-property-list-tab">

              			<div class="nhw-list">
              				{% for listing in listings %}

              				{% assign imageCount = listing.images %}
              				<div class="nhw-list__item">
              					<a href="{{listing.systemUrl}}" data-id="{{ listing.listingID }}">
              						{% assign imageCount = listing.images | size %}
              						{% assign images = listing.images %}
              						<div class="nhw-list__image">

              							{% if imageCount > 0 %}
              							<div class="f-carousel" id="carousel{{ forloop.index }}">
              								{% for image in images %}
              								<div class="f-carousel__slide">
              									<img data-src="{{ image.url }}?size=small" alt="{{ listing.headline }} property image" class="lazyload" />
              								</div>
              								{% endfor %}
              							</div>
              							{% else %}
              								<img data-src="https://pmi-resources.nesthub.com/images/photo-gallery-placeholder.jpg" alt="{{ listing.headline }}" class="lazyload" />
              							{% endif %}

              						</div>
													<div class="nhw-list__price">
														{{ listing.rent | money | replace: '.00', '' }}{% if listing.isMultiUnit == "1" and listing.rentMax > 0 %} - {{ listing.rentMax | money | replace: '.00', '' }}{% endif %}/mo.
													</div>
													<div class="nhw-list__details">
														<ul>
															<li>
																Beds:
																{% if listing.isMultiUnit == "1" and listing.bedsMax > 0 %}
																{% if listing.beds == 0 %}
																Studio - {{ listing.bedsMax }}
																{% else %}
																{{ listing.beds }} - {{ listing.bedsMax }}
																{% endif %}
																{% else %}
																{% if listing.beds == 0 %}
																Studio
																{% else %}
																{{ listing.beds }}
																{% endif %}
																{% endif %}
															</li>
															<li class="nhw-icon-list-item">
																Baths: {{ listing.baths | replace: '.00', '' }}{% if listing.isMultiUnit == "1" and listing.bathsMax > 0 %} - {{ listing.bathsMax | replace: '.00', '' }}{% endif %}
															</li>
															{% if listing.size %}
															<li class="nhw-icon-list-item">
																sqft: {{ listing.size }}{% if listing.isMultiUnit == "1" and listing.sizeMax > 0 %} - {{ listing.sizeMax }}{% endif %}
															</li>
															{% endif %}
														</ul>
													</div>
              						<div class="nhw-list__location">
              							{{ listing.address }}{% if listing.address2 %}, {{ listing.address2 }}{% endif %}, {{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}
              						</div>
              						<div class="nhw-list__prop-type">
              							{{ listing.propertyTypeName }}
              						</div>
              						<div class="nhw-list__availability">
              							Available: {{ listing.dateAvailable | listing_availabilityDate }}
              						</div>
              					</a>
              				</div>

              				{% endfor %}
              			</div>
              			<div class="nhw-pagination">
              				{% listing_pagination %}
              			</div>
              		</div>
              		<div class="nhw-tab-pane nhw-fade" id="nesthub-property-map" role="tabpanel" aria-labelledby="nesthub-property-map-tab">
              			<div id="nesthub-property-map-panel" style="height:700px;" data-lat="{{map.latitude}}" data-lng="{{map.longitude}}"></div>
              		</div>
              	</div>
              	{% endif %}
              </div>


              <script type="text/javascript">
              	function closeDropdown(item) {
              		item.slideUp().removeClass('open');
              	}

              	function openDropdown(item) {
              		item.slideDown().addClass('open');
              	}
              	$('[data-target="dropdown"]').click(function(e) {
              		e.preventDefault();
              		var dropdown = $(this).siblings('.prop-search__dropdown');
              		if (dropdown.hasClass('open') == true) {
              			closeDropdown(dropdown)
              		} else {
              			$('.prop-search__dropdown.open').slideUp().removeClass('open');
              			openDropdown(dropdown)
              		}
              	});

              	$('.prop-search-form__item, .prop-search-option__item').mouseleave(function() {
              		setTimeout(() => {
              			closeDropdown($('.prop-search__dropdown.open'));
              		}, 300);
              	});


              	function updateFields() {
              		var bedValue = beds > 0 ? beds + ' bed, ' : '';
              		var bathValue = baths > 0 ? baths + ' bath' : '';
              		$('.prop-search-form__item--beds .prop-search-form__value').text(bedValue + bathValue)
              		$('.prop-search-form__item--price .prop-search-form__value').text(rentMin + ' - ' + rentMax)
              	}

              	// Update Search Placeholders on Page Load
              	if ( location.search.length > 0 ) {
              		var beds = location.search.split('&bedsMin=')[1].split('&')[0];
              		var baths = location.search.split('&bathsMin=')[1].split('&')[0];
              		var rentMin = '$' + location.search.split('&rentMin=')[1].split('&')[0];
              		var rentMax = '$' + location.search.split('&rentMax=')[1].split('&')[0];

              		updateFields();
              	}

              	// Update Search Placeholer Text on Input Change
              	$('.prop-search-form__item input, .prop-search-form__item select').on('change keydown paste input', function(){
              			beds = $('#nesthub-listing-prop-search-beds').val();
              			baths = $('#nesthub-listing-prop-search-baths').val();
              			rentMin = '$' + $('#nesthub-listing-prop-search-min-rent').val();
              			rentMax = '$' + $('#nesthub-listing-prop-search-max-rent').val();
              			updateFields(beds, baths, rentMin, rentMax);
              		if ($(this).parent('.prop-search-form__item').children('.prop-search-form__value').text().length == 0) {
              			$(this).parent('.prop-search-form__item').children('.prop-search-form__value').text('Choose amounts')
              		}
              	});

								// Init Filters on Input Change
								$('#nesthub-listing-prop-search-pets, #nesthub-listing-prop-search-sort').on('change keydown paste input', function(){
										$('#nesthub-search-form').submit();
								});

              	$( document ).ready(function() {
              		// Init Image Carousel
              		$('.f-carousel').each(function(){
              			const container = document.getElementById($(this).attr('id'));
              			const options = {
              				Navigation: {
              					nextTpl: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M9 3l9 9-9 9"/></svg>',
              					prevTpl: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M15 3l-9 9 9 9"/></svg>',
              				},
              				Dots: false,
              			};
              			new Carousel(container, options);
              		})
              	});

              </script>

View

            
              
              
              
              <script type="application/ld+json">
              	{
              		"@context": "https://schema.org/",
              		"@type": "RealEstateListing",
              		"name": "{{ listing.headline }}",
              		"image": {
              			"@type": "ImageObject",
              			"url": "{{ listing.url }}"
              		}
              	}
              </script>
              <script type="application/ld+json">
              	{
              		"@context": "https://schema.org/",
              		"@type": "Place",
              		"address": {
              			"@type": "PostalAddress",
              			"addressLocality": "{{ listing.city }}",
              			"addressRegion": "{{ listing.stateID }}",
              			"postalCode": "{{ listing.postalCode }}",
              			"streetAddress": "{{ listing.address }} {{ listing.address2 }}"
              		},
              		"petsAllowed": "{{ listing.petDescription }}",
              		"tourapplicationPage": "",
              		"smokingAllowed": "{{ listing.acceptSmoking | boolean }}",
              		"description": "{{ listing.description | strip_html }}",
              		"url": "{{ listing.url }}"
              	}
              </script>
              <script type="application/ld+json">
              	{
              		"@context": "https://schema.org/",
              		"@type": "Accommodation",
              		"numberOfBedrooms": "{{ listing.beds }}",
              		"numberOfBathroomsTotal": "{{ listing.baths }}",
              		"leaseLength": "{{ listing.leaseDescription }}",
              		"accommodationCategory": "{{ listing.propertyTypeName }}"
              	}
              </script>
              <script type="application/ld+json">
              	{
              		"@context": "https://schema.org/",
              		"@type": "RentAction",
              		"priceSpecification": {
              			"@type": "UnitPriceSpecification",
              			"price": "{{ listing.rent | money }}",
              			"priceCurrency": "USD",
              			"name": "Monthly Rent",
              			"referenceQuantity": {
              				"@type": "QuantitativeValue",
              				"value": "1",
              				"unitCode": "MON"
              			}
              		}
              	}
              </script>

              <div class="nesthub-widget">
              	<div id="nesthub-property-detail-view" class="nhw-details">
									{% listing_plugin %}
									{% if listing.isActive == false %}
										<p>This Property Is Not Available</p>
									{% else %}

              		{% listing_page %}
              		{% if leadSent %}
              		<div class="nhw-alert nhw-alert-success" role="alert">
              			Message has been sent!
              		</div>
              		{% endif %}


              		<section class="nhw-details__header">
              			<header class="text-center">
              				<h1 data-fancybox-trigger="map">{{ listing.address }}</h1>
              				<h2>{{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}</h2>
              			</header>
              			<div class="nhw-back-btn">
              				<a href="/{% snippet name='areas' market='1' toUrl='true' %}-homes-for-rent"><i class="fa-kit fa-pmi-arrow-left"></i> Back to search</a>
              			</div>
              		</section>

              		{% assign imageCount = images | size %}
              		{% if imageCount > 0 %}
              		<section class="nhw-details__gallery">

              			<div class="image-container image-container--primary">
              				{% for image in images limit: 1 %}
              				<div class="image-preview">
              					<a id="nhw-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ images[0].imageUrl }}?size=large" data-caption="{{ image.caption }}">
              						<img class="lazyload" data-src="{{ images[0].imageUrl }}?size=large" alt="property image" />
              					</a>
              				</div>
              				{% endfor %}
              			</div>

              			{% if images.size > 1 %}
              			<div class="image-container image-container--secondary">
              				{% for image in images offset: 1 limit: 4 %}
              				<div class="image-preview">
              					<a id="nhw-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ image.imageUrl }}?size=large" data-caption="{{ image.caption }}">
              						<img class="lazyload" data-src="{{ image.imageUrl }}?size=large" alt="property image" />
              					</a>
              				</div>
              				{% endfor %}
              			</div>
              			{% endif %}

              			{% if images.size > 5 %}
              			<div class="nhw-listing-detail-view-gallery">
              				<i class="fa-regular fa-square-plus"></i> Full Gallery
              			</div>
              			{% endif %}

              			{% if images.size > 5 %}
              			<div class="additional-images">
              				{% assign imageCount = images.size | minus: 1 %}
              				{% for i in (5..imageCount) %}
              				<a data-fancybox="gallery" href="{{ images[i].imageUrl }}?size=large" data-caption="{{ images[i].caption }}">
              					<img data-src="{{ images[i].imageUrl }}?size=large" alt="property image" class="lazyload" />
              				</a>
              				{% endfor %}
              			</div>
              			{% endif %}

              			{% if listing.virtualTour  %}
              			<a class="nhw-listing-detail-view-video" data-fancybox="gallery" data-type="iframe" href="{% if listing.virtualTourType == 'youtube' %}https://www.youtube.com/embed/{{ listing.virtualTourVideoID }}{% elsif listing.virtualTourType == 'vimeo' %}https://vimeo.com/{{ listing.virtualTourVideoID }}?title=0&amp;byline=0&amp;portrait=0'{% else %}{{ listing.virtualTour }}{% endif %}">
              				<i class="fa-sharp fa-regular fa-video-plus"></i> Video Tour
              			</a>
              			{% endif %}


              		</section>
              		{% endif %}

              		<section class="nhw-details__share">
              			<div class="social-icons">
              				<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
              					<a title="opens in new window" class="a2a_dd" href="https://www.addtoany.com/share"><i class="fa-regular fa-arrow-up-from-bracket"></i> Share</a>
              				</div>
              			</div>
              		</section>


              		<section class="nhw-details__content">

              			<div class="nhw-details__property-info">

              				<h3 class="nhw-details__heading mt-0">Property Details</h3>
											<div class="key-details">
											<div class="key-detail price">
												<span class="value">{{ listing.rent | money: 0 }}{% if listing.isMultiUnit == "1" and listing.rentMax > 0 %} - {{ listing.rentMax | money: 0 }}{% endif %}</span>
												<span class="label">Per Month</span>
											</div>
											<div class="key-detail bedrooms">
												<span class="value">
													{% if listing.isMultiUnit == "1" and listing.bedsMax > 0 %}
													{% if listing.beds == 0 %}
													Studio - {{ listing.bedsMax }}
													{% else %}
													{{ listing.beds }} - {{ listing.bedsMax }}
													{% endif %}
													{% else %}
													{% if listing.beds == 0 %}
													Studio
													{% else %}
													{{ listing.beds }}
													{% endif %}
													{% endif %}
											</span>
												<span class="label">Beds</span>
											</div>
											<div class="key-detail bathrooms">
												<span class="value">{{ listing.baths | number: 1 }}{% if listing.isMultiUnit == "1" and listing.bathsMax > 0 %} - {{ listing.bathsMax | number: 1 }}{% endif %}</span>
												<span class="label">Baths</span>
											</div>
											{% if listing.size %}
											<div class="key-detail sqft">
												<span class="value">
													{{ listing.size }}{% if listing.isMultiUnit == "1" and listing.sizeMax > 0 %} - {{ listing.sizeMax }}{% endif %}
												</span>
												<span class="label">sqft</span>
											</div>
											{% endif %}
											<div class="key-detail rent">
												<span class="value">•</span>
												<span class="label">
													{% if listing.isActive == 0 %}
														This Property Is Not Available
													{% else %}
														For Rent
													{% endif %}
												</span>
											</div>
										</div>

              				<hr>

              				<div class="sub-details">
              					<div class="sub-detail">
              						<span class="sub-detail__label">Building Type:</span>
              						<span class="sub-detail__value">{{ listing.propertyTypeName | replace: ' Home', '' }}</span>
              					</div>
												{% if listing.deposit != blank %}
													<div class="sub-detail">
														<span class="sub-detail__label">Deposit:</span>
														<span class="sub-detail__value">{{ listing.deposit | money: 0 }}{% if listing.isMultiUnit == "1" and listing.depositMax > 0 %} - {{ listing.depositMax | money: 0 }}{% endif %}</span>
													</div>
												{% endif %}
              					{% if listing.petDescription != blank or listing.acceptDogs != blank or listing.acceptCats != blank %}
              						<div class="sub-detail">
              							<span class="sub-detail__label">Pets:</span>
              							<span class="sub-detail__value">
              							{% if listing.acceptDogs == 1 or listing.acceptCats == 1 %}
              							Yes
              							{% elsif listing.acceptDogs == 0 and listing.acceptCats == 0 %}
              							No
              							{% endif %}
              							</span>
              						</div>
              					{% endif %}
												{% if listing.isActive == 1 %}
												<div class="sub-detail">
													<span class="sub-detail__label">Date Available:</span>
													<span class="sub-detail__value">
														{{ listing.dateAvailable | listing_availabilityDate }}
													</span>
												</div>
												{% endif %}
              					{% if listing.applicationFee != blank %}
              					<div class="sub-detail">
              						<span class="sub-detail__label">App Fee:</span>
              						<span class="sub-detail__value">{{ listing.applicationFee | money: 0 }}</span>
              					</div>
              					{% endif %}
              					{% if listing.acceptDogs == blank and listing.acceptCats == blank %}{% elsif listing.acceptDogs == 0 and listing.acceptCats == 0 %}
              					{% else %}
              						<div class="sub-detail">
              							<span class="sub-detail__label">Pet Type:</span>
              							<span class="sub-detail__value">
              								{% capture petsAllowed %}
              								{% if listing.acceptDogs == 1 %}
              								Dogs
              								{% endif %}
              								{% if listing.acceptDogs == 1 and listing.acceptCats == 1 %},{% endif %}
              								{% if listing.acceptCats == 1 %}
              								Cats
              								{% endif %}
              								{% endcapture %}
              								{{ petsAllowed | strip_newlines | replace: '	', '' | replace: ',', ', ' }}
              							</span>
              						</div>
              					{% endif %}
              				</div>


              				<div class="headline">
              					{{ listing.headline }}
              				</div>
              				<div class="description">
              					{{ listing.description | newline_to_br }}
              				</div>

											<div class="nhw-details__property-details mt-4">
												<dl>
													{% if listing.lotSize %}
													<dt>Lot Size</dt>
													<dd>{{ listing.lotSize }}</dd>
													{% endif %}

													{% if listing.includedUtilityDescription %}
													<dt>Included Utilities</dt>
													<dd>{{ listing.includedUtilityDescription.slice(0, -2) }}</dd>
													{% endif %}

													{% if listing.isGasIncluded == '1' or listing.isElectricIncluded == '1' or  listing.isWaterIncluded == '1' or listing.isSewageIncluded == '1' or listing.isGarbageIncluded == '1' or listing.isLandscapingIncluded == '1' or listing.isCableIncluded == '1' or listing.isInternetIncluded == '1' or listing.isSnowRemovalIncluded == '1' or listing.isPoolServiceIncluded == '1' %}
													<dt>Included Utilities</dt>
													<ul class="commas">
														{% if listing.isGasIncluded == '1' %}
														<li>Gas</li>
														{% endif %}
														{% if listing.isElectricIncluded == '1' %}
														<li>Electric</li>
														{% endif %}
														{% if listing.isWaterIncluded == '1' %}
														<li>Water</li>
														{% endif %}
														{% if listing.isSewageIncluded == '1' %}
														<li>Sewage</li>
														{% endif %}
														{% if listing.isGarbageIncluded == '1' %}
														<li>Garbage</li>
														{% endif %}
														{% if listing.isLandscapingIncluded == '1' %}
														<li>Landscaping</li>
														{% endif %}
														{% if listing.isCableIncluded == '1' %}
														<li>Cable</li>
														{% endif %}
														{% if listing.isInternetIncluded == '1' %}
														<li>Internet</li>
														{% endif %}
														{% if listing.isSnowRemovalIncluded == '1' %}
														<li>Snow Removal</li>
														{% endif %}
														{% if listing.isPoolServiceIncluded == '1' %}
														<li>Pool Service</li>
														{% endif %}
													</ul>
													{% endif %}

													{% if listing.heatType %}
													<dt>Heat Type</dt>
													<dd>{{ listing.heatType }}</dd>
													{% endif %}

													{% if listing.yearBuilt %}
													<dt>Year Built</dt>
													<dd>{{ listing.yearBuilt }}</dd>
													{% endif %}
												</dl>

												{% if listing.petDescription or listing.acceptSmoking == 0 %}
												<h3 class="nhw-details__sub-heading">Restrictions</h3>
												<dl>
													{% if listing.acceptSmoking == 0 %}
													<dt class="mb-2">Smoking Not Allowed</dt>
													{% endif %}
													{% if listing.petDescription %}
													<dt>Pet Details</dt>
													<dd>{{ listing.petDescription }}</dd>
													{% endif %}
												</dl>
												{% endif %}

												{% if listing.depositDescription or  listing.leaseDescription or listing.acceptAssistance %}
												<h3 class="nhw-details__sub-heading">Lease Details</h3>
												<dl>
													{% if listing.depositDescription %}
													<dt>Deposit Details</dt>
													<dd>{{ listing.depositDescription }}</dd>
													{% endif %}
													{% if listing.leaseDescription %}
													<dt>Lease Description</dt>
													<dd>{{ listing.leaseDescription }}</dd>
													{% endif %}
													{% if listing.acceptAssistance %}
													<dt>Housing Assistance</dt>
													<dd>
														{% if listing.acceptAssistance == '1' %}
														Available
														{% elsif listing.acceptAssistance == '0' %}
														Not available
														{% endif %}
													</dd>
													{% endif %}
												</dl>
												{% endif %}

												{% if listing.areaInformation or listing.schools %}
												<h3 class="nhw-details__sub-heading">Area Information</h3>
												<dl>
													{% if listing.areaInformation %}
													<!-- <dt>Area Information</dt> -->
													<dd>{{ listing.areaInformation }}</dd>
													{% endif %}
													{% if listing.schools %}
													<dt>Schools</dt>
													<dd>{{ listing.schools }}</dd>
													{% endif %}
												</dl>
												{% endif %}

												{% if listing.parkingTypeID or listing.parkingSpaces %}
												<h3 class="nhw-details__sub-heading">Parking</h3>
												<dl>
													{% if listing.parkingTypeID > 0 %}
													<dt>Parking Type</dt>
													<dd>
														{% case listing.parkingTypeID %}
														{% when '1' %}
														Attached Garage
														{% when '2' %}
														Carport
														{% when '3' %}
														Street
														{% when '4' %}
														Offstreet
														{% when '5' %}
														Other
														{% when '6' %}
														Detatched Garage
														{% endcase %}
													</dd>
													{% endif %}
													{% if listing.parkingSpaces %}
													<dt>Spaces Available</dt>
													<dd>{{ listing.parkingSpaces }}</dd>
													{% endif %}
												</dl>
												{% endif %}

											</div>

              				{% if listing.features.size > 0 %}
              				<h3 class="nhw-details__heading">Features and Amenities</h3>
              				<div class="features">
              					<ul class="dots">

              							{% for feature in listing.features %}
              							<li>{{ feature }}</li>
              							{% endfor %}
              					</ul>
              				</div>
              				{% endif %}

              			</div>

              			<div class="nhw-details__contact-info">

										{% if listing.isActive == 1 %}
              					<div class="nhw-details__form-container">
													{% if listing.applicationUrl or listing.scheduleViewingUrl %}
              						<div class="nhw-details__links">
              							<div class="btn-list">
              								{% if listing.applicationUrl %}
              								<a href="{{ listing.applicationUrl }}" target="_blank" class="btn btn--primary">Apply Online</a>
              								{% endif %}
              								<!-- <a href="/tenants" target="_blank" class="btn btn--light">Rental Qualifications</a> -->
              								{% if listing.scheduleViewingUrl %}
              								<a href="{{ listing.scheduleViewingUrl }}" target="_blank" class="btn btn--secondary">Schedule Viewing</a>
              								{% endif %}
              							</div>
              						</div>
													{% endif %}
              						<div class="nhw-form-header text-center">
              							<h3>Questions? Contact Us!</h3>
														{% if listing.phone %}
	              							<ul class="list-unstyled">
	              								<li>phone: <a href="tel:{{ listing.phone }}">{{ listing.phone | listing_phone }}</a></li>
	              							</ul>
														{% endif %}
              						</div>
              						<div class="nhw-details__form">
              						<form id="nesthub-property-lead-form" class="nhw-form" method="POST">
              							<div class="nhw-form-group">
              								{% listing_leadName %}
              							</div>
              							<div class="nhw-form-group">
              								{% listing_leadEmail %}
              							</div>
              							<div class="nhw-form-group">
              								{% listing_leadPhone %}
              							</div>
              							<div class="nhw-form-group nhw-form-group-textarea">
              								{% listing_leadMessage %}
              							</div>
              							{% listing_nonce %}
              							{% listing_honeypot %}
              							<button type="submit" class="nhw-btn nhw-btn-primary nhw-btn-block">Submit</button>
              						</form>
              					</div>
              				</div>
											{% endif %}
              				<div class="nhw-details__location">
              					<h3 class="nhw-details__heading">Location</h3>
              					{% capture mapAddress %}{{ listing.address }},+{{ listing.city }},+{{ listing.stateID }}+{{ listing.postalCode | split: '-' | first }}{% endcapture %}
              					<div class="nhw-details__map-container">
              						<div data-fancybox="map" data-src="https://www.google.com/maps/search/{{ mapAddress | replace: ' ', '+' | replace: '#', '' | replace: '.', '' |  urlencode }}/@{{ listing.latitude }},{{ listing.longitude }},14z" id="nhw-listing-detail-map-container" data-latitude="{{ listing.latitude }}" data-longitude="{{ listing.longitude }}"></div>
              					</div>
              				</div>

              			</div>

              		</section>



              	</div>
              </div>
							{% endif %}


              <script type="text/javascript">
              	// Floating Form Labels
              	$('.nhw-form-control').on('change keydown paste input', function(){
              		if ($(this).val().length > 0) {
              			$(this).parent('.nhw-form-group:not(.nhw-form-group-checkbox):not(.nhw-form-group-radio):not(.nhw-form-group-textarea)').children('label').addClass('float-label')
              		} else (
              			$(this).parent('.nhw-form-group:not(.nhw-form-group-checkbox):not(.nhw-form-group-radio):not(.nhw-form-group-textarea)').children('label').removeClass('float-label')
              		)
              	});

              	$(document).ready(function () {
              		mapboxgl.accessToken =
              			"pk.eyJ1Ijoia29odmEiLCJhIjoiY2prbDlsNXhuMXl6YzNxbnhtY2w0NzB3bSJ9.jpQllFfzX4I6lT3VF6ZByQ";

              		const container = $("#nhw-listing-detail-map-container");

              		const lat = container.data("latitude") || 0.0;
              		const lng = container.data("longitude") || 0.0;
              		const zoom = container.data("zoom") || 8;

              		const map = new mapboxgl.Map({
              			container: "nhw-listing-detail-map-container",
              			style: "mapbox://styles/mapbox/streets-v12", // style URL
              			center: [lng, lat], // starting position [lng, lat]
              			zoom: zoom, // starting zoom
              		});

              		const marker = new mapboxgl.Marker().setLngLat([lng, lat]).addTo(map);

              		Fancybox.bind('[data-fancybox="gallery"]', {});

              		Fancybox.bind('[data-fancybox="map"]', {});

              		$(".nhw-listing-detail-view-gallery").on("click", function () {
              			Fancybox.fromSelector('[data-fancybox="gallery"]');
              		});

              	});
              </script>

Settings

Change Page Size:

{ "pageSize": "24" }

Change Page Size & add Filters:

{ "pageSize": "24", "filters": { "search": "Newly Renovated"} }

Filters

Search by Keyword in description/title/etc:

{ "filters": { "search": "comingsoon"} }

Adding Multiple for a Lat/Long Radius:
Note: Must have 14 decimal places

{ "filters": { "locationLat": "38.01932702077288", "locationLng": "122.13658260308127", "locationRadius": "20"} }

Assign a Specific Feed to a Page (Feed ID is in URL on feed page)

{ "filters": { "feedID": 1 } }

{ "filters": { "feedIDs": [ 3, 4 ] } }

Filter by State (ex. Alabama)

{ "filters": { "stateID": "AL" } }

Other Filters:

isActive
search
rentMin
rentMax
bedsMin
bathsMin
propertyTypeID
petFilterOptionID
feedTypeID
feedID
sort
latitudeMin
latitudeMax
longitudeMin
longitudeMax
locationLng
locationLat
locationRadius

If you're doing a center out radius, radius is in miles by default

Property Type Filters

SingleFamilyHome = 1
Apartment = 2
Condo = 3
Townhouse = 4
Duplex = 5
Multiplex = 6
Loft = 7
MobileHome = 8
Commercial = 9
Garage = 10
Other = 11

Exclusion Filters

If trying to use exclusion filters

{"filters": {"notPropertyTypeIDs": ["9"]}}

If needing to use multiple filters, use the following

{"filters": {"notPropertyTypeIDs": ["9","10"]}}

If hiding ShowMojo Link in Nesthub Listings Widget

Replace {{ listing.description }} with the following:

      

        

        
          
          {{ listing.description  | split: '----' | last }}

Standard Nesthub Widget (non-APP)

View Example

Files to add to Homes for Rent Page (or update Rentals Template if it's a newer site)

					            
					              
											

											 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css" />
											 <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css">
											 <link rel="stylesheet" href="https://resources.nesthub.com/css/nhw-standard.css">
											 <script defer src="https://kit.fontawesome.com/9e4e3329f0.js" crossorigin="anonymous"></script>
											 <script src="https://resources.nesthub.com/js/fancybox.umd.js"></script>
											 <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.umd.js"></script>
											 <script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
											 <script src="https://static.addtoany.com/menu/page.js"></script>

Code to Add to Homes for Rent Page -- Replace old FRS code

										
											
											
											
											<div id="nh-props" data-ion="listing-widget"></div>

Code to Add to styles.css file for older sites

									
										/* Set Design Standards & Colors Here -- Replace with customer's colors */
										:root {
											--primary: #29abe2;
											--dark: #000000;
											--gray: #f6f6f6;
											--primary-font: inherit;
										}

Adding generic URL to all properties

																
																	
																	
																	
																	data-default-application-url=""

Filters

data-hard-filters="feedID=23"

Other Filters:

'stateID'
‘search’,
‘rentMin’,
‘rentMax’,
‘bedsMin’,
‘bathsMin’,
‘propertyTypeID’,
‘petFilterOptionID’,
‘feedTypeID’,
‘feedID’,
‘sort’,
‘latitudeMin’,
‘latitudeMax’,
‘longitudeMin’,
‘longitudeMax’
locationLng
locationLat
locationRadius

If you're doing a center out radius, radius is in miles by default

Property Type Filters

SingleFamilyHome = 1
Apartment = 2
Condo = 3
Townhouse = 4
Duplex = 5
Multiplex = 6
Loft = 7
MobileHome = 8
Commercial = 9
Garage = 10
Other = 11

Exclusion Filters

If trying to use exclusion filters

notPropertyTypeIDs[]=9

If needing to use multiple filters, use the following

&propertyTypeIDs[]=1&propertyTypeID[]=3

The Map Last Updated 1/10/2024

View Example

Instructions

Remove any .container, .container-fluid, or .no-hero classes from the Rentals Template. Older sites may need root variables to be set for colors and header-height.

Files to add to Rentals Template

						
							
							
							<link rel="stylesheet" href="https://resources.nesthub.com/css/nhw-map-v2.css">
							<link rel="stylesheet" href="https://resources.nesthub.com/css/fancybox.css" />
							<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css">
							<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
							<script defer src="https://kit.fontawesome.com/9e4e3329f0.js" crossorigin="anonymous"></script>
							<script defer src="https://resources.nesthub.com/js/fancybox.umd.js"></script>
							<script defer src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
							<script defer id="search-js" src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js" type="text/javascript"></script>
							<script defer src="https://static.addtoany.com/menu/page.js"></script>
							<script defer src="https://resources.nesthub.com/js/nhw-map-v2.js"></script>

List

						
							
							
							
	            <div id="nesthub-property-list-view" class="nesthub-widget property-list" data-ion="listing-list" data-lat="{{map.latitude}}" data-lng="{{map.longitude}}">
	            	{% listing_page %}
	            	<form id="nesthub-search-form" class="prop-search-form" _lpchecked="1">

	            		<div class="prop-search-bar">

	            			<div class="prop-search-form__container">
	            				<div class="prop-search-form__item prop-search-form__item--search">
	            					<div class="prop-search-form__field">
	            						<label for="search">Search by Location</label>
	            						<div id="geocoder" class="geocoder"></div>
	            					</div>
	            				</div>

	            				<div class="prop-search-form__item prop-search-form__item--prop-type">
	            					<div class="prop-search-form__field">
	            						{% capture propTypeInput %}{% listingSearchPropertyTypes %}{% endcapture %}
	            						{{ propTypeInput | replace: 'Property Type', 'Type of Place' | replace: 'nhw-form-control', 'nhw-form-control selectNative js-selectNative' }}
	            						<div class="selectCustom js-selectCustom" aria-hidden="true">
	            							<div class="selectCustom-trigger">Any</div>
	            								<div class="selectCustom-options">
	            									<div class="selectCustom-option" data-value="">Any</div>
	            									<div class="selectCustom-option" data-value="1">Single Family Home</div>
	            									<div class="selectCustom-option" data-value="2">Apartment</div>
	            									<div class="selectCustom-option" data-value="3">Condo</div>
	            									<div class="selectCustom-option" data-value="4">Townhouse</div>
	            									<div class="selectCustom-option" data-value="5">Duplex</div>
	            									<div class="selectCustom-option" data-value="6">Multiplex</div>
	            									<div class="selectCustom-option" data-value="7">Loft</div>
	            									<div class="selectCustom-option" data-value="8">Mobile Home</div>
	            									<div class="selectCustom-option" data-value="9">Commercial</div>
	            									<div class="selectCustom-option" data-value="10">Garage</div>
	            									<div class="selectCustom-option" data-value="11">Other</div>
	            					     </div>
	            						</div>
	            					</div>
	            				</div>

	            				<div class="prop-search-form__item prop-search-form__item--beds">
	            					<div class="prop-search-form__field" data-target="dropdown">
	            						<div class="prop-search-form__label">Beds & Baths</div>
	            						<div class="prop-search-form__value">Choose amounts</div>
	            					</div>
	            					<div class="prop-search__dropdown">
	            						{% listingSearchBeds %}
	            						{% listingSearchBaths %}
	            					</div>
	            				</div>

	            				<div class="prop-search-form__item prop-search-form__item--price">
	            					<div class="prop-search-form__field" data-target="dropdown">
	            						<div class="prop-search-form__label">Price Range</div>
	            						<div class="prop-search-form__value">Choose amounts</div>
	            					</div>
	            					<div class="prop-search__dropdown">
	            						{% capture searchMinRent %}{% listingSearchMinRent  %}{% endcapture %}
	            						{{ searchMinRent | replace: 'Minimum Rent', 'Min Rent' }}

	            						{% capture searchMaxRent %}{% listingSearchMaxRent  %}{% endcapture %}
	            						{{ searchMaxRent | replace: 'Maximum Rent', 'Max Rent' }}
	            					</div>
	            				</div>

	            				<div class="prop-search-form__btn">
	            					<label for="nesthub-search-btn"><span class="sr-only">Submit</span></label>
	            					<button id="nesthub-search-btn">
	            						<div class="icon"><span class="sr-only">Submit</span><i aria-hidden="true" class="fa-kit fa-nhvl-search"></i></div>
	            					</button>
	            				</div>
	            			</div>
	            		</div>

	            		<div class="prop-search-options">

	            			<div class="prop-search-options__item">
	            				<div class="prop-search-options__icon">
	            					<div class="icon"><i class="fa-light fa-sliders"></i></div>
	            				</div>
	            				<div class="prop-search-options__label" data-target="dropdown">
	            					Optional Filters
	            				</div>
	            				<div class="prop-search__dropdown">
	            					{% capture pet_dropdown %}{% listingSearchPets %}{% endcapture %}
	            					{{ pet_dropdown | replace: 'DogsAllowed', 'Dogs Allowed' | replace: 'CatsAllowed', 'Cats Allowed' | replace: 'DogsAndCats', 'Dogs and Cats' | replace: 'NoPetsAllowed', 'No Pets Allowed' }}
	            					<label id="keywordSearch" for="search">Keyword Search</label>
	            					<input type="text" name="search" value="" class="nhw-form-control">
	            				</div>
	            			</div>

										<div class="prop-search-options__item">
											<div class="prop-search-options__icon">
												<div class="icon"><i class="fa-regular fa-arrow-up-arrow-down"></i></div>
											</div>
											<div class="prop-search-options__label" data-target="dropdown">
												Sort
											</div>
											<div class="prop-search__dropdown">
												<select id="nesthub-listing-prop-search-sort" name="sort" class="nhw-form-control">
													<option value="distance">Distance from Map Center</option>
													<optgroup label="Date Posted">
														<option value="advertisedDate|desc">Date Posted (new -old)</option>
														<option value="advertisedDate">Date Posted (old - new)</option>
													</optgroup>
													<optgroup label="Price">
														<option value="rent">Price (low - high)</option>
														<option value="rent|desc">Price (high - low)</option>
													</optgroup>
													<optgroup label="Beds">
														<option value="beds">Beds (low - high)</option>
														<option value="beds|desc">Beds (high - low)</option>
													</optgroup>
													<optgroup label="Baths">
														<option value="baths">Baths (low - high)</option>
														<option value="baths|desc">Baths (high - low)</option>
													</optgroup>
													<optgroup label="Area (Sq.Ft.)">
														<option value="size">SqFt (low - high)</option>
														<option value="size|desc">SqFt (high - low)</option>
													</optgroup>
													<optgroup label="Availability Date">
														<option value="dateAvailable">Availability (sooner - later)</option>
														<option value="dateAvailable|desc">Availability (later - sooner)</option>
													</optgroup>
												</select>
											</div>
										</div>

	            			<div id="resetSearch" class="prop-search-options__item">
	            				<div class="prop-search-options__icon">
	            					<div class="icon"><i class="fa-regular fa-arrow-rotate-right"></i></div>
	            				</div>
	            				<div class="prop-search-options__label">
	            					Reset Search
	            				</div>
	            			</div>

	            			<div id="hideMap" class="prop-search-options__item">
	            				<div class="prop-search-options__icon">
	            					<div class="icon"><i class="fa-regular fa-circle-xmark"></i></div>
	            				</div>
	            				<div class="prop-search-options__label">
	            					Hide Map
	            				</div>
	            			</div>

	            			<div id="showMap" class="prop-search-options__item">
	            				<div class="prop-search-options__icon">
	            					<div class="icon"><i class="fa-regular fa-circle-plus"></i></div>
	            				</div>
	            				<div class="prop-search-options__label">
	            					Show Map
	            				</div>
	            			</div>

	            		</div>


	            	</form>

	            	<div id="nesthub-properties-list-view" class="nesthub-widget nesthub-property-locator">
	            		<div class="property-locator-content loading-spinner">
	            			<div class="loading-bar"></div>

	            			<!-- Mobile Map -->
	            			<div id="map-mobile" class="locator-map locator-map--mobile d-lg-none"></div>

	            			<!-- List -->
	            			<div id="nhwList" class="property-locator-list"></div>

	            		</div>

	            		<!-- Desktop Map -->
	            		<div id="map" class="locator-map locator-map--desktop d-none d-lg-block"></div>

	            	</div>

	            </div>




	            <script defer src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js" type="text/javascript"></script>
	            <script defer id="search-js" src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js" type="text/javascript"></script>
	            <script defer type="text/javascript" src="https://resources.nesthub.com/js/nhw.js?v1"></script>

View

						
							
							
							
	            <script type="application/ld+json">
	            	{
	            		"@context": "https://schema.org/",
	            		"@type": "RealEstateListing",
	            		"name": "{{ listing.headline }}",
	            		"image": {
	            			"@type": "ImageObject",
	            			"url": "{{ listing.url }}"
	            		}
	            	}
	            </script>
	            <script type="application/ld+json">
	            	{
	            		"@context": "https://schema.org/",
	            		"@type": "Place",
	            		"address": {
	            			"@type": "PostalAddress",
	            			"addressLocality": "{{ listing.city }}",
	            			"addressRegion": "{{ listing.stateID }}",
	            			"postalCode": "{{ listing.postalCode }}",
	            			"streetAddress": "{{ listing.address }} {{ listing.address2 }}"
	            		},
	            		"petsAllowed": "{{ listing.petDescription }}",
	            		"tourapplicationPage": "",
	            		"smokingAllowed": "{{ listing.acceptSmoking | boolean }}",
	            		"description": "{{ listing.description }}",
	            		"url": "{{ listing.url }}"
	            	}
	            </script>
	            <script type="application/ld+json">
	            	{
	            		"@context": "https://schema.org/",
	            		"@type": "Accommodation",
	            		"numberOfBedrooms": "{{ listing.beds }}",
	            		"numberOfBathroomsTotal": "{{ listing.baths }}",
	            		"leaseLength": "{{ listing.leaseDescription }}",
	            		"accommodationCategory": "{{ listing.propertyTypeName }}"
	            	}
	            </script>
	            <script type="application/ld+json">
	            	{
	            		"@context": "https://schema.org/",
	            		"@type": "RentAction",
	            		"priceSpecification": {
	            			"@type": "UnitPriceSpecification",
	            			"price": "{{ listing.rent | money }}",
	            			"priceCurrency": "USD",
	            			"name": "Monthly Rent",
	            			"referenceQuantity": {
	            				"@type": "QuantitativeValue",
	            				"value": "1",
	            				"unitCode": "MON"
	            			}
	            		}
	            	}
	            </script>

	            <div class="nesthub-widget">
	            	<div id="nesthub-property-detail-view" class="nhw-details">
	            		{% listing_plugin %}
	            		{% listing_page %}
	            		{% if leadSent %}
	            		<div class="nhw-alert nhw-alert-success" role="alert">
	            			Message has been sent!
	            		</div>
	            		{% endif %}


	            		<section class="nhw-details__header">
	            			<div class="nhw-back-btn">
	            				<a id="back-btn" href="#" data-market="{% snippet name='areas' market='1' toUrl='true' %}"><i class="fa-regular fa-circle-chevron-left"></i> Back to search</a>
	            			</div>
	            			<div class="nhw-details__property-contact">
	            				<header class="nhw-details__address" data-fancybox-trigger="map">
	            					<h1>{{ listing.address }}</h1>
	            					<h2>{{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}</h2>
	            				</header>
	            				<div class="nhw-details__links">
	            					<div class="btn-list">
	            						{% if listing.applicationUrl %}
	            						<a href="{{ listing.applicationUrl }}" target="_blank" class="nhw-btn">Apply<span> Online</span></a>
	            						{% endif %}
	            						{% if listing.scheduleViewingUrl %}
	            						<a href="{{ listing.scheduleViewingUrl }}" target="_blank" class="nhw-btn nhw-btn--dark">Schedule Viewing</a>
	            						{% endif %}
	            						<a href="#contact" class="nhw-btn nhw-btn--secondary smooth-scroll">Contact<span> Us</span></a>
	            					</div>
	            				</div>
	            			</div>
	            		</section>

	            		<section class="nhw-details__body">

	            		{% assign imageCount = images | size %}
	            		{% if imageCount > 0 %}
	            		<section class="nhw-details__gallery">

	            			<div class="image-container image-container--primary">
	            				{% for image in images limit: 1 %}
	            				<div class="image-preview">
	            					<a id="nhw-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ images[0].imageUrl }}?size=large" data-caption="{{ image.caption }}">
	            						<img class="lazyload" data-src="{{ images[0].imageUrl }}?size=large" alt="property image" />
	            					</a>
	            				</div>
	            				{% endfor %}
	            			</div>

	            			{% if images.size > 1 %}
	            			<div class="image-container image-container--secondary">
	            				{% for image in images offset: 1 limit: 4 %}
	            				<div class="image-preview">
	            					<a id="nhw-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ image.imageUrl }}?size=large" data-caption="{{ image.caption }}">
	            						<img class="lazyload" data-src="{{ image.imageUrl }}?size=large" alt="property image" />
	            					</a>
	            				</div>
	            				{% endfor %}
	            			</div>
	            			{% endif %}

	            			{% if images.size > 5 %}
	            			<div class="additional-images">
	            				{% assign imageCount = images.size | minus: 1 %}
	            				{% for i in (5..imageCount) %}
	            				<a data-fancybox="gallery" href="{{ images[i].imageUrl }}?size=large" data-caption="{{ images[i].caption }}">
	            					<img data-src="{{ images[i].imageUrl }}?size=large" alt="property image" class="lazyload" />
	            				</a>
	            				{% endfor %}
	            			</div>
	            			{% endif %}

	            			{% if images.size > 5 %}
	            			<div class="nhw-listing-detail-view-gallery">
	            				<i class="fa-regular fa-square-plus"></i> Full Gallery
	            			</div>
	            			{% endif %}

	            			{% if listing.virtualTour  %}
	            			<a class="nhw-listing-detail-view-video" data-fancybox="gallery" href="{% if listing.virtualTourType == 'youtube' %}https://www.youtube.com/embed/{{ listing.virtualTourVideoID }}{% elsif listing.virtualTourType == 'vimeo' %}https://vimeo.com/{{ listing.virtualTourVideoID }}?title=0&amp;byline=0&amp;portrait=0'{% else %}{{ listing.virtualTour }}{% endif %}" data-type="iframe" data-height="80vh">
	            				<i class="fa-sharp fa-regular fa-video-plus"></i> Video Tour
	            			</a>
	            			{% endif %}


	            		</section>
	            		{% endif %}

	            		<section class="nhw-details__share">
	            			<div class="social-icons">
	            				<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
	            					<a title="opens in new window" class="a2a_dd" href="https://www.addtoany.com/share"><i class="fa-regular fa-arrow-up-from-bracket"></i> Share</a>
	            				</div>
	            			</div>
	            		</section>


	            		<section class="nhw-details__content">

	            			<div class="nhw-details__property-info">

	            				<h3 class="nhw-details__heading mt-0">Property Details</h3>
	            				<div class="key-details">
	            					<div class="key-detail price">
	            						<span class="value">{{ listing.rent | money: 0 }}</span>
	            						<span class="label">Per Month</span>
	            					</div>
	            					<div class="key-detail bedrooms">
	            						<span class="value">
	            						{% if listing.beds == 0 %}
	            						Studio
	            						{% else %}
	            						{{ listing.beds }}
	            						{% endif %}
	            					</span>
	            						<span class="label">Beds</span>
	            					</div>
	            					<div class="key-detail bathrooms">
	            						<span class="value">{{ listing.baths | number: 1 }}</span>
	            						<span class="label">Baths</span>
	            					</div>
	            					{% if listing.size %}
	            					<div class="key-detail sqft">
	            						<span class="value">
	            							{{ listing.size }}
	            						</span>
	            						<span class="label">sqft</span>
	            					</div>
	            					{% endif %}
	            					<div class="key-detail rent">
	            						<span class="value">•</span>
	            						<span class="label">For Rent</span>
	            					</div>
	            				</div>

	            				<hr>

	            				<div class="sub-details">
	            					<div class="sub-detail">
	            						<span class="sub-detail__label">Building Type:</span>
	            						<span class="sub-detail__value">{{ listing.propertyTypeName | replace: ' Home', '' }}</span>
	            					</div>
	            					{% if listing.deposit != blank %}
	            					<div class="sub-detail">
	            						<span class="sub-detail__label">Deposit:</span>
	            						<span class="sub-detail__value">{{ listing.deposit | money: 0 }}</span>
	            					</div>
	            					{% endif %}
	            					{% if listing.petDescription != blank or listing.acceptDogs != blank or listing.acceptCats != blank %}
	            						<div class="sub-detail">
	            							<span class="sub-detail__label">Pets:</span>
	            							<span class="sub-detail__value">
	            							{% if listing.acceptDogs == 1 or listing.acceptCats == 1 %}
	            							Yes
	            							{% elsif listing.acceptDogs == 0 and listing.acceptCats == 0 %}
	            							No
	            							{% endif %}
	            							</span>
	            						</div>
	            					{% endif %}
	            					<div class="sub-detail">
	            						<span class="sub-detail__label">Date Available:</span>
	            						<span class="sub-detail__value">
	            							{{ listing.dateAvailable | listing_availabilityDate }}
	            						</span>
	            					</div>
	            					{% if listing.applicationFee != blank %}
	            					<div class="sub-detail">
	            						<span class="sub-detail__label">App Fee:</span>
	            						<span class="sub-detail__value">{{ listing.applicationFee | money: 0 }}</span>
	            					</div>
	            					{% endif %}
	            					{% if listing.acceptDogs == blank and listing.acceptCats == blank %}{% elsif listing.acceptDogs == 0 and listing.acceptCats == 0 %}
	            					{% else %}
	            						<div class="sub-detail">
	            							<span class="sub-detail__label">Pet Type:</span>
	            							<span class="sub-detail__value">
	            								{% capture petsAllowed %}
	            								{% if listing.acceptDogs == 1 %}
	            								Dogs
	            								{% endif %}
	            								{% if listing.acceptDogs == 1 and listing.acceptCats == 1 %},{% endif %}
	            								{% if listing.acceptCats == 1 %}
	            								Cats
	            								{% endif %}
	            								{% endcapture %}
	            								{{ petsAllowed | strip_newlines | replace: '	', '' | replace: ',', ', ' }}
	            							</span>
	            						</div>
	            					{% endif %}
	            				</div>


	            				<div class="headline">
	            					{{ listing.headline }}
	            				</div>
	            				<div class="description">
	            					{{ listing.description | newline_to_br | remove: ';amp;amp' }}
	            				</div>

	            				<div class="nhw-details__property-details mt-4">
	            					<dl>
	            						{% if listing.lotSize %}
	            							<dt>Lot Size</dt>
	            							<dd>{{ listing.lotSize }}</dd>
	            						{% endif %}

	            						{% if listing.includedUtilityDescription %}
	            							<dt>Included Utilities</dt>
	            							<dd>{{ listing.includedUtilityDescription.slice(0, -2) }}</dd>
	            						{% endif %}

	            						{% if listing.isGasIncluded == '1' or listing.isElectricIncluded == '1' or  listing.isWaterIncluded == '1' or listing.isSewageIncluded == '1' or listing.isGarbageIncluded == '1' or listing.isLandscapingIncluded == '1' or listing.isCableIncluded == '1' or listing.isInternetIncluded == '1' or listing.isSnowRemovalIncluded == '1' or listing.isPoolServiceIncluded == '1' %}
	            							<dt>Included Utilities</dt>
	            							<ul class="commas">
	            								{% if listing.isGasIncluded == '1' %}
	            									<li>Gas</li>
	            								{% endif %}
	            								{% if listing.isElectricIncluded == '1' %}
	            									<li>Electric</li>
	            								{% endif %}
	            								{% if listing.isWaterIncluded == '1' %}
	            									<li>Water</li>
	            								{% endif %}
	            								{% if listing.isSewageIncluded == '1' %}
	            									<li>Sewage</li>
	            								{% endif %}
	            								{% if listing.isGarbageIncluded == '1' %}
	            									<li>Garbage</li>
	            								{% endif %}
	            								{% if listing.isLandscapingIncluded == '1' %}
	            									<li>Landscaping</li>
	            								{% endif %}
	            								{% if listing.isCableIncluded == '1' %}
	            									<li>Cable</li>
	            								{% endif %}
	            								{% if listing.isInternetIncluded == '1' %}
	            									<li>Internet</li>
	            								{% endif %}
	            								{% if listing.isSnowRemovalIncluded == '1' %}
	            									<li>Snow Removal</li>
	            								{% endif %}
	            								{% if listing.isPoolServiceIncluded == '1' %}
	            									<li>Pool Service</li>
	            								{% endif %}
	            							</ul>
	            						{% endif %}

	            						{% if listing.heatType %}
	            							<dt>Heat Type</dt>
	            							<dd>{{ listing.heatType }}</dd>
	            						{% endif %}

	            						{% if listing.yearBuilt %}
	            							<dt>Year Built</dt>
	            							<dd>{{ listing.yearBuilt }}</dd>
	            						{% endif %}
	            					</dl>

	            					{% if listing.petDescription or listing.acceptSmoking %}
	            						<h3 class="nhw-details__sub-heading">Restrictions</h3>
	            						<dl>
	            							{% if listing.petDescription %}
	            								<dt>Pet Details</dt>
	            								<dd>{{ listing.petDescription }}</dd>
	            							{% endif %}
	            							{% if listing.acceptSmoking %}
	            								<dt>Smoking</dt>
	            								<dd>
	            									{% case listing.acceptSmoking %}
	            									{% when '0' %}
	            									Not Allowed
	            									{% when '1' %}
	            									Allowed
	            									{% endcase %}
	            								</dd>
	            							{% endif %}
	            						</dl>
	            					{% endif %}

	            					{% if listing.depositDescription or  listing.leaseDescription or listing.acceptAssistance %}
	            					<h3 class="nhw-details__sub-heading">Lease Details</h3>
	            					<dl>
	            						{% if listing.depositDescription %}
	            							<dt>Deposit Details</dt>
	            							<dd>{{ listing.depositDescription }}</dd>
	            						{% endif %}
	            						{% if listing.leaseDescription %}
	            							<dt>Lease Description</dt>
	            							<dd>{{ listing.leaseDescription }}</dd>
	            						{% endif %}
	            						{% if listing.acceptAssistance %}
	            							<dt>Housing Assistance</dt>
	            							<dd>
	            									{% if listing.acceptAssistance == '1' %}
	            									Available
	            									{% elsif listing.acceptAssistance == '0' %}
	            									Not available
	            									{% endif %}
	            							</dd>
	            						{% endif %}
	            					</dl>
	            					{% endif %}

	            					{% if listing.areaInformation or listing.schools %}
	            						<h3 class="nhw-details__sub-heading">Area Information</h3>
	            						<dl>
	            							{% if listing.areaInformation %}
	            								<dt>Area Information</dt>
	            								<dd>{{ listing.areaInformation }}</dd>
	            							{% endif %}
	            							{% if listing.schools %}
	            								<dt>Schools</dt>
	            								<dd>{{ listing.schools }}</dd>
	            							{% endif %}


	            						</dl>
	            					{% endif %}


	            					{% comment %}
	            					<dt>Schools</dt>
	            					<dd>
	            					{% capture schoolAddress %}{{ listing.address }}, {{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}{% endcapture %}
	            					<iframe className="greatschools" src="//www.greatschools.org/widget/map?textColor=0066B8&borderColor=CCCCC&lat={{ listing.latitude }}&lon={{ listing.longitude }}&cityName={{ listing.city }}&state={{ listing.stateID }}&normalizedAddress={{ schoolAddress | urlencode }}&width=640&height=500&zoom=13" width="640" height="500" marginHeight="0" marginWidth="0" frameBorder="0" scrolling="no"></iframe>
	            					<script type="text/javascript">
	            						var _gsreq = new XMLHttpRequest();
	            						payload = {
	            							event: "Widget loaded",
	            							properties: {
	            								distinct_id: window.location.href,
	            								token: '6d6fd523-5b70-406d-bfb9-4a78438ab98d',
	            								user_agent: navigator.userAgent,
	            								time: Date.now(),
	            								parent_location: window.location
	            							},
	            						};
	            						fetch("https://api.perfalytics.com/track", {
	            							method: "POST",
	            							headers: {
	            								"Content-Type": "application/json",
	            							},
	            							body: JSON.stringify(payload),
	            						});
	            					</script>
	            					</dd>
	            					{% endcomment %}



	            					{% if listing.parkingTypeID or listing.parkingSpaces %}
	            						<h3 class="nhw-details__sub-heading">Parking</h3>
	            						<dl>
	            							{% if listing.parkingTypeID > 0 %}
	            								<dt>Parking Type</dt>
	            								<dd>
	            									{% case listing.parkingTypeID %}
	            									{% when '1' %}
	            									Attached Garage
	            									{% when '2' %}
	            									Carport
	            									{% when '3' %}
	            									Street
	            									{% when '4' %}
	            									Offstreet
	            									{% when '5' %}
	            									Other
	            									{% when '6' %}
	            									Detatched Garage
	            									{% endcase %}
	            								</dd>
	            							{% endif %}
	            							{% if listing.parkingSpaces %}
	            								<dt>Spaces Available</dt>
	            								<dd>{{ listing.parkingSpaces }}</dd>
	            							{% endif %}
	            						</dl>
	            					{% endif %}

	            				</div>

	            				{% if listing.features.size > 0 %}
	            				<h3 class="nhw-details__heading">Features and Amenities</h3>
	            				<div class="features">
	            					<ul class="dots">

	            							{% for feature in listing.features %}
	            							<li>{{ feature }}</li>
	            							{% endfor %}
	            					</ul>
	            				</div>
	            				{% endif %}

	            			</div>

	            			<div class="nhw-details__contact-info">


	            					<div id="contact" class="nhw-details__form-container">
	            						<div class="nhw-details__links d-none">
	            							<div class="btn-list">
	            								{% if listing.applicationUrl %}
	            								<a href="{{ listing.applicationUrl }}" target="_blank" class="nhw-btn nhw-btn--secondary">Apply Online</a>
	            								{% endif %}
	            								<a href="/tenants" target="_blank" class="nhw-btn nhw-btn--primary">Rental Qualifications</a>
	            								{% if listing.scheduleViewingUrl %}
	            								<a href="{{ listing.scheduleViewingUrl }}" target="_blank" class="nhw-btn nhw-btn--accent">Schedule Viewing</a>
	            								{% endif %}
	            							</div>
	            						</div>
	            						<div class="nhw-form-header text-center">
	            							<h3>Questions? Contact Us!</h3>
	            							<ul class="list-unstyled">
	            								<li>phone: <a href="tel:{{ listing.phone }}">{{ listing.phone | listing_phone }}</a></li>
	            							</ul>
	            						</div>
	            						<div class="nhw-details__form">
	            						<form id="nesthub-property-lead-form" class="nhw-form" method="POST">
	            							<div class="nhw-form-group">
	            								{% listing_leadName %}
	            							</div>
	            							<div class="nhw-form-group">
	            								{% listing_leadEmail %}
	            							</div>
	            							<div class="nhw-form-group">
	            								{% listing_leadPhone %}
	            							</div>
	            							<div class="nhw-form-group nhw-form-group-textarea">
	            								{% listing_leadMessage %}
	            							</div>
	            							{% listing_nonce %}
	            							{% listing_honeypot %}
	            							<button type="submit" class="nhw-btn nhw-btn-primary nhw-btn-block">Submit</button>
	            						</form>
	            					</div>
	            				</div>

	            				<div class="nhw-details__location">
	            					<h3 class="nhw-details__heading">Location</h3>
	            					{% capture mapAddress %}{{ listing.address }},+{{ listing.city }},+{{ listing.stateID }}+{{ listing.postalCode | split: '-' | first }}{% endcapture %}
	            					<div class="nhw-details__map-container">
	            						<div data-fancybox="map" data-src="https://www.google.com/maps/search/{{ mapAddress | replace: ' ', '+' | replace: '#', '' | replace: '.', '' |  urlencode }}/@{{ listing.latitude }},{{ listing.longitude }},14z" id="nhw-listing-detail-map-container" data-latitude="{{ listing.latitude }}" data-longitude="{{ listing.longitude }}"></div>
	            					</div>
	            				</div>

	            			</div>

	            		</section>


	            		<section class="nhw-nearby-listings" data-current-prop="{{ listing.listingID }}" data-radius="3">
	            			<h3 class="nhw-details__heading">Nearby Homes</h3>
	            			<div class="nhw-nearby-listings__list">

	            			</div>
	            		</section>


	            	</div>


	            </div>



	            <script type="text/javascript">

	            	// Floating Form Labels
	            	$('.nhw-form-control').on('change keydown paste input', function(){
	            		if ($(this).val().length > 0) {
	            			$(this).parent('.nhw-form-group:not(.nhw-form-group-checkbox):not(.nhw-form-group-radio):not(.nhw-form-group-textarea)').children('label').addClass('float-label')
	            		} else (
	            			$(this).parent('.nhw-form-group:not(.nhw-form-group-checkbox):not(.nhw-form-group-radio):not(.nhw-form-group-textarea)').children('label').removeClass('float-label')
	            		)
	            	});

	            	// Leasing Specials
	            	function checkSpecials(propertyDescription) {
	            		let reEx = /([^<br>])*?LEASING SPECIAL[\s\S]*?(?=<br>)/i;
	            		let reExAlt = /([^<br>])*?SPECIAL:[\s\S]*?(?=<br>)/i;
	            		let specialText = propertyDescription.match(reEx) != null ? propertyDescription.match(reEx)[0].split('<br>')[0] : 'null';
	            		if (specialText == 'null') {
	            			specialText = propertyDescription.match(reExAlt) != null ? propertyDescription.match(reExAlt)[0].split('<br>')[0] : 'null';
	            		}
	            		if (specialText.length > 0 && specialText != 'null') {
	            			$('.nhw-details__property-info .headline').prepend(`<div class="special-offer">${specialText}</div>`);
	            			let newText = $('.nhw-details__property-info .description').html().replace(specialText, "").replace('<br><br>','');
	            			$('.nhw-details__property-info .description').html(newText);
	            		}
	            	}

	            	checkSpecials($('.nhw-details__property-info .description').html())

	            	// Back btn
	            	function goBack(){
	            		let prevLocation = localStorage.getItem("url");
	            		let rentalsMarket = $('#back-btn').data('market');
	            		if (prevLocation !== null ) {
	            			if (prevLocation.length > 0 ) {
	            				window.location = prevLocation;
	            			} else {
	            				window.location = `${window.location.origin}/${rentalsMarket}-homes-for-rent`;
	            			}
	            		} else {
	            			window.location = `${window.location.origin}/${rentalsMarket}-homes-for-rent`;
	            		}
	            	}

	            	$('#back-btn').click(function(e){
	            		e.preventDefault();
	            		goBack();
	            		return false;
	            	})


	            	$(document).ready(function () {

	            		// Contact Button Affix
	            		$('.nhw-details__property-contact').affix({
	            			offset: {
	            				top: ($('.nhw-details__property-contact').offset().top + $('.nhw-details__property-contact').outerHeight()) - 50
	            			}
	            		});

	            		// Listing Details Map
	            		mapboxgl.accessToken =
	            			"pk.eyJ1Ijoia29odmEiLCJhIjoiY2prbDlsNXhuMXl6YzNxbnhtY2w0NzB3bSJ9.jpQllFfzX4I6lT3VF6ZByQ";

	            		const container = $("#nhw-listing-detail-map-container");

	            		const lat = container.data("latitude") || 0.0;
	            		const lng = container.data("longitude") || 0.0;
	            		const zoom = container.data("zoom") || 8;

	            		const map = new mapboxgl.Map({
	            			container: "nhw-listing-detail-map-container",
	            			style: "mapbox://styles/mapbox/streets-v12", // style URL
	            			center: [lng, lat], // starting position [lng, lat]
	            			zoom: zoom, // starting zoom
	            		});

	            		const marker = new mapboxgl.Marker().setLngLat([lng, lat]).addTo(map);

	            		Fancybox.bind('[data-fancybox="gallery"]', {});

	            		Fancybox.bind('[data-fancybox="map"]', {});

	            		$(".nhw-listing-detail-view-gallery").on("click", function () {
	            			Fancybox.fromSelector('[data-fancybox="gallery"]');
	            		});

	            	});
	            </script>


	            <script src="https://resources.nesthub.com/js/nhw-nearby-homes.js?v1" type="text/javascript"></script>

The Map Last Updated 2/6/2024

View Example

Instructions

Remove any .container, .container-fluid, or .no-hero classes from the Rentals Template. Older sites may need root variables to be set for colors and header-height.

Files to add to Rentals Template

					
						
						
						<link rel="stylesheet" href="https://resources.nesthub.com/css/nhw-map-v2.css">
						<link rel="stylesheet" href="https://resources.nesthub.com/css/fancybox.css" />
						<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css">
						<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
						<script defer src="https://kit.fontawesome.com/9e4e3329f0.js" crossorigin="anonymous"></script>
						<script defer src="https://resources.nesthub.com/js/fancybox.umd.js"></script>
						<script defer src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
						<script defer id="search-js" src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js" type="text/javascript"></script>
						<script defer src="https://static.addtoany.com/menu/page.js"></script>
						<script defer src="https://resources.nesthub.com/js/nhw-map-v2.js"></script>

List

					
						
						
						
						<div id="nesthub-property-list-view" class="nesthub-widget property-list" data-ion="listing-list" data-lat="{{map.latitude}}" data-lng="{{map.longitude}}" data-zoom="10" data-location-zoom="11">
							{% listing_page %}
							<form id="nesthub-search-form" class="prop-search-form" _lpchecked="1">

								<div class="prop-search-bar">

									<div class="prop-search-form__container">
										<div class="prop-search-form__item prop-search-form__item--search">
											<div class="prop-search-form__field">
												<label for="search">Search by Location</label>
												<div id="geocoder" class="geocoder"></div>
											</div>
										</div>

										<div class="prop-search-form__item prop-search-form__item--prop-type">
											<div class="prop-search-form__field">
												{% capture propTypeInput %}{% listingSearchPropertyTypes %}{% endcapture %}
												{{ propTypeInput | replace: 'Property Type', 'Type of Place' | replace: 'nhw-form-control', 'nhw-form-control selectNative js-selectNative' }}
												<div class="selectCustom js-selectCustom" aria-hidden="true">
													<div class="selectCustom-trigger">Any</div>
														<div class="selectCustom-options">
															<div class="selectCustom-option" data-value="">Any</div>
															<div class="selectCustom-option" data-value="1">Single Family Home</div>
															<div class="selectCustom-option" data-value="2">Apartment</div>
															<div class="selectCustom-option" data-value="3">Condo</div>
															<div class="selectCustom-option" data-value="4">Townhouse</div>
															<div class="selectCustom-option" data-value="5">Duplex</div>
															<div class="selectCustom-option" data-value="6">Multiplex</div>
															<div class="selectCustom-option" data-value="7">Loft</div>
															<div class="selectCustom-option" data-value="8">Mobile Home</div>
															<div class="selectCustom-option" data-value="9">Commercial</div>
															<div class="selectCustom-option" data-value="10">Garage</div>
															<div class="selectCustom-option" data-value="11">Other</div>
											     </div>
												</div>
											</div>
										</div>

										<div class="prop-search-form__item prop-search-form__item--beds">
											<div class="prop-search-form__field" data-target="dropdown">
												<div class="prop-search-form__label">Beds & Baths</div>
												<div class="prop-search-form__value">Choose amounts</div>
											</div>
											<div class="prop-search__dropdown">
												{% listingSearchBeds %}
												{% listingSearchBaths %}
											</div>
										</div>

										<div class="prop-search-form__item prop-search-form__item--price">
											<div class="prop-search-form__field" data-target="dropdown">
												<div class="prop-search-form__label">Price Range</div>
												<div class="prop-search-form__value">Choose amounts</div>
											</div>
											<div class="prop-search__dropdown">
												{% capture searchMinRent %}{% listingSearchMinRent  %}{% endcapture %}
												{{ searchMinRent | replace: 'Minimum Rent', 'Min Rent' }}

												{% capture searchMaxRent %}{% listingSearchMaxRent  %}{% endcapture %}
												{{ searchMaxRent | replace: 'Maximum Rent', 'Max Rent' }}
											</div>
										</div>

										<div class="prop-search-form__btn">
											<label for="nesthub-search-btn"><span class="sr-only">Submit</span></label>
											<button id="nesthub-search-btn">
												<div class="icon"><span class="sr-only">Submit</span><i aria-hidden="true" class="fa-kit fa-nhvl-search"></i></div>
											</button>
										</div>
									</div>
								</div>

								<div class="prop-search-options">

									<div class="prop-search-options__item">
										<div class="prop-search-options__icon">
											<div class="icon"><i class="fa-light fa-sliders"></i></div>
										</div>
										<div class="prop-search-options__label" data-target="dropdown">
											Optional Filters
										</div>
										<div class="prop-search__dropdown">
											{% capture pet_dropdown %}{% listingSearchPets %}{% endcapture %}
											{{ pet_dropdown | replace: 'DogsAllowed', 'Dogs Allowed' | replace: 'CatsAllowed', 'Cats Allowed' | replace: 'DogsAndCats', 'Dogs and Cats' | replace: 'NoPetsAllowed', 'No Pets Allowed' }}
											<label id="keywordSearch" for="search">Keyword Search</label>
											<input type="text" name="search" value="" class="nhw-form-control">
										</div>
									</div>

									<div class="prop-search-options__item">
										<div class="prop-search-options__icon">
											<div class="icon"><i class="fa-regular fa-arrow-up-arrow-down"></i></div>
										</div>
										<div class="prop-search-options__label" data-target="dropdown">
											Sort
										</div>
										<div class="prop-search__dropdown">
											<select id="nesthub-listing-prop-search-sort" name="sort" class="nhw-form-control">
												<option value="distance">Distance from Map Center</option>
												<optgroup label="Date Posted">
													<option value="advertisedDate|desc">Date Posted (new -old)</option>
													<option value="advertisedDate">Date Posted (old - new)</option>
												</optgroup>
												<optgroup label="Price">
													<option value="rent">Price (low - high)</option>
													<option value="rent|desc">Price (high - low)</option>
												</optgroup>
												<optgroup label="Beds">
													<option value="beds">Beds (low - high)</option>
													<option value="beds|desc">Beds (high - low)</option>
												</optgroup>
												<optgroup label="Baths">
													<option value="baths">Baths (low - high)</option>
													<option value="baths|desc">Baths (high - low)</option>
												</optgroup>
												<optgroup label="Area (Sq.Ft.)">
													<option value="size">SqFt (low - high)</option>
													<option value="size|desc">SqFt (high - low)</option>
												</optgroup>
												<optgroup label="Availability Date">
													<option value="dateAvailable">Availability (sooner - later)</option>
													<option value="dateAvailable|desc">Availability (later - sooner)</option>
												</optgroup>
											</select>
										</div>
									</div>

									<div id="resetSearch" class="prop-search-options__item">
										<div class="prop-search-options__icon">
											<div class="icon"><i class="fa-regular fa-arrow-rotate-right"></i></div>
										</div>
										<div class="prop-search-options__label">
											Reset Search
										</div>
									</div>

									<div id="hideMap" class="prop-search-options__item">
										<div class="prop-search-options__icon">
											<div class="icon"><i class="fa-regular fa-circle-xmark"></i></div>
										</div>
										<div class="prop-search-options__label">
											Hide Map
										</div>
									</div>

									<div id="showMap" class="prop-search-options__item">
										<div class="prop-search-options__icon">
											<div class="icon"><i class="fa-regular fa-circle-plus"></i></div>
										</div>
										<div class="prop-search-options__label">
											Show Map
										</div>
									</div>

								</div>


							</form>

							<div id="nesthub-properties-list-view" class="nesthub-widget nesthub-property-locator">
								<div class="property-locator-content loading-spinner">
									<div class="loading-bar"></div>

									<!-- Mobile Map -->
									<div id="map-mobile" class="locator-map locator-map--mobile d-lg-none"></div>

									<!-- List -->
									<div id="nhwList" class="property-locator-list"></div>

								</div>

								<!-- Desktop Map -->
								<div id="map" class="locator-map locator-map--desktop d-none d-lg-block"></div>

							</div>

						</div>




						<script defer src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js" type="text/javascript"></script>
						<script defer id="search-js" src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js" type="text/javascript"></script>
						<script defer type="text/javascript" src="https://resources.nesthub.com/js/nhw.js?v2"></script>

View

					
						
						
						
						<script type="application/ld+json">
							{
								"@context": "https://schema.org/",
								"@type": "RealEstateListing",
								"name": "{{ listing.headline }}",
								"image": {
									"@type": "ImageObject",
									"url": "{{ listing.url }}"
								}
							}
						</script>
						<script type="application/ld+json">
							{
								"@context": "https://schema.org/",
								"@type": "Place",
								"address": {
									"@type": "PostalAddress",
									"addressLocality": "{{ listing.city }}",
									"addressRegion": "{{ listing.stateID }}",
									"postalCode": "{{ listing.postalCode }}",
									"streetAddress": "{{ listing.address }} {{ listing.address2 }}"
								},
								"petsAllowed": "{{ listing.petDescription }}",
								"tourapplicationPage": "",
								"smokingAllowed": "{{ listing.acceptSmoking | boolean }}",
								"description": "{{ listing.description }}",
								"url": "{{ listing.url }}"
							}
						</script>
						<script type="application/ld+json">
							{
								"@context": "https://schema.org/",
								"@type": "Accommodation",
								"numberOfBedrooms": "{{ listing.beds }}",
								"numberOfBathroomsTotal": "{{ listing.baths }}",
								"leaseLength": "{{ listing.leaseDescription }}",
								"accommodationCategory": "{{ listing.propertyTypeName }}"
							}
						</script>
						<script type="application/ld+json">
							{
								"@context": "https://schema.org/",
								"@type": "RentAction",
								"priceSpecification": {
									"@type": "UnitPriceSpecification",
									"price": "{{ listing.rent | money }}",
									"priceCurrency": "USD",
									"name": "Monthly Rent",
									"referenceQuantity": {
										"@type": "QuantitativeValue",
										"value": "1",
										"unitCode": "MON"
									}
								}
							}
						</script>

						<div class="nesthub-widget">
							<div id="nesthub-property-detail-view" class="nhw-details">
								{% listing_plugin %}
								{% listing_page %}
								{% if leadSent %}
								<div class="nhw-alert nhw-alert-success" role="alert">
									Message has been sent!
								</div>
								{% endif %}


								<section class="nhw-details__header">
									<div class="nhw-back-btn">
										<a id="back-btn" href="#" data-market="{% snippet name='areas' market='1' toUrl='true' %}"><i class="fa-regular fa-circle-chevron-left"></i> Back to search</a>
									</div>
									<div class="nhw-details__property-contact">
										<header class="nhw-details__address" data-fancybox-trigger="map">
											<h1>{{ listing.address }}</h1>
											<h2>{{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}</h2>
										</header>
										<div class="nhw-details__links">
											<div class="btn-list">
												{% if listing.applicationUrl %}
												<a href="{{ listing.applicationUrl }}" target="_blank" class="nhw-btn">Apply<span> Online</span></a>
												{% endif %}
												{% if listing.scheduleViewingUrl %}
												<a href="{{ listing.scheduleViewingUrl }}" target="_blank" class="nhw-btn nhw-btn--dark">Schedule Viewing</a>
												{% endif %}
												<a href="#contact" class="nhw-btn nhw-btn--secondary smooth-scroll">Contact<span> Us</span></a>
											</div>
										</div>
									</div>
								</section>

								<section class="nhw-details__body">

								{% assign imageCount = images | size %}
								{% if imageCount > 0 %}
								<section class="nhw-details__gallery">

									<div class="image-container image-container--primary">
										{% for image in images limit: 1 %}
										<div class="image-preview">
											<a id="nhw-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ images[0].imageUrl }}?size=large" data-caption="{{ image.caption }}">
												<img class="lazyload" data-src="{{ images[0].imageUrl }}?size=large" alt="property image" />
											</a>
										</div>
										{% endfor %}
									</div>

									{% if images.size > 1 %}
									<div class="image-container image-container--secondary">
										{% for image in images offset: 1 limit: 4 %}
										<div class="image-preview">
											<a id="nhw-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ image.imageUrl }}?size=large" data-caption="{{ image.caption }}">
												<img class="lazyload" data-src="{{ image.imageUrl }}?size=large" alt="property image" />
											</a>
										</div>
										{% endfor %}
									</div>
									{% endif %}

									{% if images.size > 5 %}
									<div class="additional-images">
										{% assign imageCount = images.size | minus: 1 %}
										{% for i in (5..imageCount) %}
										<a data-fancybox="gallery" href="{{ images[i].imageUrl }}?size=large" data-caption="{{ images[i].caption }}">
											<img data-src="{{ images[i].imageUrl }}?size=large" alt="property image" class="lazyload" />
										</a>
										{% endfor %}
									</div>
									{% endif %}

									{% if images.size > 5 %}
									<div class="nhw-listing-detail-view-gallery">
										<i class="fa-regular fa-square-plus"></i> Full Gallery
									</div>
									{% endif %}

									{% if listing.virtualTour  %}
									<a class="nhw-listing-detail-view-video" data-fancybox="gallery" href="{% if listing.virtualTourType == 'youtube' %}https://www.youtube.com/embed/{{ listing.virtualTourVideoID }}{% elsif listing.virtualTourType == 'vimeo' %}https://vimeo.com/{{ listing.virtualTourVideoID }}?title=0&amp;byline=0&amp;portrait=0'{% else %}{{ listing.virtualTour }}{% endif %}" data-type="iframe" data-height="80vh">
										<i class="fa-sharp fa-regular fa-video-plus"></i> Video Tour
									</a>
									{% endif %}


								</section>
								{% endif %}

								<section class="nhw-details__share">
									<div class="social-icons">
										<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
											<a title="opens in new window" class="a2a_dd" href="https://www.addtoany.com/share"><i class="fa-regular fa-arrow-up-from-bracket"></i> Share</a>
										</div>
									</div>
								</section>


								<section class="nhw-details__content">

									<div class="nhw-details__property-info">

										<h3 class="nhw-details__heading mt-0">Property Details</h3>
										<div class="key-details">
											<div class="key-detail price">
												<span class="value">{{ listing.rent | money: 0 }}</span>
												<span class="label">Per Month</span>
											</div>
											<div class="key-detail bedrooms">
												<span class="value">
												{% if listing.beds == 0 %}
												Studio
												{% else %}
												{{ listing.beds }}
												{% endif %}
											</span>
												<span class="label">Beds</span>
											</div>
											<div class="key-detail bathrooms">
												<span class="value">{{ listing.baths | number: 1 }}</span>
												<span class="label">Baths</span>
											</div>
											{% if listing.size %}
											<div class="key-detail sqft">
												<span class="value">
													{{ listing.size }}
												</span>
												<span class="label">sqft</span>
											</div>
											{% endif %}
											<div class="key-detail rent">
												<span class="value">•</span>
												<span class="label">For Rent</span>
											</div>
										</div>

										<hr>

										<div class="sub-details">
											<div class="sub-detail">
												<span class="sub-detail__label">Building Type:</span>
												<span class="sub-detail__value">{{ listing.propertyTypeName | replace: ' Home', '' }}</span>
											</div>
											{% if listing.deposit != blank %}
											<div class="sub-detail">
												<span class="sub-detail__label">Deposit:</span>
												<span class="sub-detail__value">{{ listing.deposit | money: 0 }}</span>
											</div>
											{% endif %}
											{% if listing.petDescription != blank or listing.acceptDogs != blank or listing.acceptCats != blank %}
												<div class="sub-detail">
													<span class="sub-detail__label">Pets:</span>
													<span class="sub-detail__value">
													{% if listing.acceptDogs == 1 or listing.acceptCats == 1 %}
													Yes
													{% elsif listing.acceptDogs == 0 and listing.acceptCats == 0 %}
													No
													{% endif %}
													</span>
												</div>
											{% endif %}
											<div class="sub-detail">
												<span class="sub-detail__label">Date Available:</span>
												<span class="sub-detail__value">
													{{ listing.dateAvailable | listing_availabilityDate }}
												</span>
											</div>
											{% if listing.applicationFee != blank %}
											<div class="sub-detail">
												<span class="sub-detail__label">App Fee:</span>
												<span class="sub-detail__value">{{ listing.applicationFee | money: 0 }}</span>
											</div>
											{% endif %}
											{% if listing.acceptDogs == blank and listing.acceptCats == blank %}{% elsif listing.acceptDogs == 0 and listing.acceptCats == 0 %}
											{% else %}
												<div class="sub-detail">
													<span class="sub-detail__label">Pet Type:</span>
													<span class="sub-detail__value">
														{% capture petsAllowed %}
														{% if listing.acceptDogs == 1 %}
														Dogs
														{% endif %}
														{% if listing.acceptDogs == 1 and listing.acceptCats == 1 %},{% endif %}
														{% if listing.acceptCats == 1 %}
														Cats
														{% endif %}
														{% endcapture %}
														{{ petsAllowed | strip_newlines | replace: '	', '' | replace: ',', ', ' }}
													</span>
												</div>
											{% endif %}
										</div>


										<div class="headline">
											{{ listing.headline }}
										</div>
										<div class="description">
											{{ listing.description | newline_to_br | remove: ';amp;amp' }}
										</div>

										<div class="nhw-details__property-details mt-4">
											<dl>
												{% if listing.lotSize %}
													<dt>Lot Size</dt>
													<dd>{{ listing.lotSize }}</dd>
												{% endif %}

												{% if listing.includedUtilityDescription %}
													<dt>Included Utilities</dt>
													<dd>{{ listing.includedUtilityDescription.slice(0, -2) }}</dd>
												{% endif %}

												{% if listing.isGasIncluded == '1' or listing.isElectricIncluded == '1' or  listing.isWaterIncluded == '1' or listing.isSewageIncluded == '1' or listing.isGarbageIncluded == '1' or listing.isLandscapingIncluded == '1' or listing.isCableIncluded == '1' or listing.isInternetIncluded == '1' or listing.isSnowRemovalIncluded == '1' or listing.isPoolServiceIncluded == '1' %}
													<dt>Included Utilities</dt>
													<ul class="commas">
														{% if listing.isGasIncluded == '1' %}
															<li>Gas</li>
														{% endif %}
														{% if listing.isElectricIncluded == '1' %}
															<li>Electric</li>
														{% endif %}
														{% if listing.isWaterIncluded == '1' %}
															<li>Water</li>
														{% endif %}
														{% if listing.isSewageIncluded == '1' %}
															<li>Sewage</li>
														{% endif %}
														{% if listing.isGarbageIncluded == '1' %}
															<li>Garbage</li>
														{% endif %}
														{% if listing.isLandscapingIncluded == '1' %}
															<li>Landscaping</li>
														{% endif %}
														{% if listing.isCableIncluded == '1' %}
															<li>Cable</li>
														{% endif %}
														{% if listing.isInternetIncluded == '1' %}
															<li>Internet</li>
														{% endif %}
														{% if listing.isSnowRemovalIncluded == '1' %}
															<li>Snow Removal</li>
														{% endif %}
														{% if listing.isPoolServiceIncluded == '1' %}
															<li>Pool Service</li>
														{% endif %}
													</ul>
												{% endif %}

												{% if listing.heatType %}
													<dt>Heat Type</dt>
													<dd>{{ listing.heatType }}</dd>
												{% endif %}

												{% if listing.yearBuilt %}
													<dt>Year Built</dt>
													<dd>{{ listing.yearBuilt }}</dd>
												{% endif %}
											</dl>

											{% if listing.petDescription or listing.acceptSmoking %}
												<h3 class="nhw-details__sub-heading">Restrictions</h3>
												<dl>
													{% if listing.petDescription %}
														<dt>Pet Details</dt>
														<dd>{{ listing.petDescription }}</dd>
													{% endif %}
													{% if listing.acceptSmoking %}
														<dt>Smoking</dt>
														<dd>
															{% case listing.acceptSmoking %}
															{% when '0' %}
															Not Allowed
															{% when '1' %}
															Allowed
															{% endcase %}
														</dd>
													{% endif %}
												</dl>
											{% endif %}

											{% if listing.depositDescription or  listing.leaseDescription or listing.acceptAssistance %}
											<h3 class="nhw-details__sub-heading">Lease Details</h3>
											<dl>
												{% if listing.depositDescription %}
													<dt>Deposit Details</dt>
													<dd>{{ listing.depositDescription }}</dd>
												{% endif %}
												{% if listing.leaseDescription %}
													<dt>Lease Description</dt>
													<dd>{{ listing.leaseDescription }}</dd>
												{% endif %}
												{% if listing.acceptAssistance %}
													<dt>Housing Assistance</dt>
													<dd>
															{% if listing.acceptAssistance == '1' %}
															Available
															{% elsif listing.acceptAssistance == '0' %}
															Not available
															{% endif %}
													</dd>
												{% endif %}
											</dl>
											{% endif %}

											{% if listing.areaInformation or listing.schools %}
												<h3 class="nhw-details__sub-heading">Area Information</h3>
												<dl>
													{% if listing.areaInformation %}
														<dt>Area Information</dt>
														<dd>{{ listing.areaInformation }}</dd>
													{% endif %}
													{% if listing.schools %}
														<dt>Schools</dt>
														<dd>{{ listing.schools }}</dd>
													{% endif %}


												</dl>
											{% endif %}


											{% comment %}
											<dt>Schools</dt>
											<dd>
											{% capture schoolAddress %}{{ listing.address }}, {{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}{% endcapture %}
											<iframe className="greatschools" src="//www.greatschools.org/widget/map?textColor=0066B8&borderColor=CCCCC&lat={{ listing.latitude }}&lon={{ listing.longitude }}&cityName={{ listing.city }}&state={{ listing.stateID }}&normalizedAddress={{ schoolAddress | urlencode }}&width=640&height=500&zoom=13" width="640" height="500" marginHeight="0" marginWidth="0" frameBorder="0" scrolling="no"></iframe>
											<script type="text/javascript">
												var _gsreq = new XMLHttpRequest();
												payload = {
													event: "Widget loaded",
													properties: {
														distinct_id: window.location.href,
														token: '6d6fd523-5b70-406d-bfb9-4a78438ab98d',
														user_agent: navigator.userAgent,
														time: Date.now(),
														parent_location: window.location
													},
												};
												fetch("https://api.perfalytics.com/track", {
													method: "POST",
													headers: {
														"Content-Type": "application/json",
													},
													body: JSON.stringify(payload),
												});
											</script>
											</dd>
											{% endcomment %}



											{% if listing.parkingTypeID or listing.parkingSpaces %}
												<h3 class="nhw-details__sub-heading">Parking</h3>
												<dl>
													{% if listing.parkingTypeID > 0 %}
														<dt>Parking Type</dt>
														<dd>
															{% case listing.parkingTypeID %}
															{% when '1' %}
															Attached Garage
															{% when '2' %}
															Carport
															{% when '3' %}
															Street
															{% when '4' %}
															Offstreet
															{% when '5' %}
															Other
															{% when '6' %}
															Detatched Garage
															{% endcase %}
														</dd>
													{% endif %}
													{% if listing.parkingSpaces %}
														<dt>Spaces Available</dt>
														<dd>{{ listing.parkingSpaces }}</dd>
													{% endif %}
												</dl>
											{% endif %}

										</div>

										{% if listing.features.size > 0 %}
										<h3 class="nhw-details__heading">Features and Amenities</h3>
										<div class="features">
											<ul class="dots">

													{% for feature in listing.features %}
													<li>{{ feature }}</li>
													{% endfor %}
											</ul>
										</div>
										{% endif %}

									</div>

									<div class="nhw-details__contact-info">


											<div id="contact" class="nhw-details__form-container">
												<div class="nhw-details__links d-none">
													<div class="btn-list">
														{% if listing.applicationUrl %}
														<a href="{{ listing.applicationUrl }}" target="_blank" class="nhw-btn nhw-btn--secondary">Apply Online</a>
														{% endif %}
														<a href="/tenants" target="_blank" class="nhw-btn nhw-btn--primary">Rental Qualifications</a>
														{% if listing.scheduleViewingUrl %}
														<a href="{{ listing.scheduleViewingUrl }}" target="_blank" class="nhw-btn nhw-btn--accent">Schedule Viewing</a>
														{% endif %}
													</div>
												</div>
												<div class="nhw-form-header text-center">
													<h3>Questions? Contact Us!</h3>
													<ul class="list-unstyled">
														<li>phone: <a href="tel:{{ listing.phone }}">{{ listing.phone | listing_phone }}</a></li>
													</ul>
												</div>
												<div class="nhw-details__form">
												<form id="nesthub-property-lead-form" class="nhw-form" method="POST">
													<div class="nhw-form-group">
														{% listing_leadName %}
													</div>
													<div class="nhw-form-group">
														{% listing_leadEmail %}
													</div>
													<div class="nhw-form-group">
														{% listing_leadPhone %}
													</div>
													<div class="nhw-form-group nhw-form-group-textarea">
														{% listing_leadMessage %}
													</div>
													{% listing_nonce %}
													{% listing_honeypot %}
													<button type="submit" class="nhw-btn nhw-btn-primary nhw-btn-block">Submit</button>
												</form>
											</div>
										</div>

										<div class="nhw-details__location">
											<h3 class="nhw-details__heading">Location</h3>
											{% capture mapAddress %}{{ listing.address }},+{{ listing.city }},+{{ listing.stateID }}+{{ listing.postalCode | split: '-' | first }}{% endcapture %}
											<div class="nhw-details__map-container">
												<div data-fancybox="map" data-src="https://www.google.com/maps/search/{{ mapAddress | replace: ' ', '+' | replace: '#', '' | replace: '.', '' |  urlencode }}/@{{ listing.latitude }},{{ listing.longitude }},14z" id="nhw-listing-detail-map-container" data-latitude="{{ listing.latitude }}" data-longitude="{{ listing.longitude }}"></div>
											</div>
										</div>

									</div>

								</section>


								<section class="nhw-nearby-listings" data-current-prop="{{ listing.listingID }}" data-lat="{{ listing.latitude }}" data-lng="{{ listing.longitude }}">
									<h3 class="nhw-details__heading">Nearby Homes</h3>
									<div class="nhw-nearby-listings__list">

									</div>
								</section>


							</div>


						</div>



						<script type="text/javascript">

							// Floating Form Labels
							$('.nhw-form-control').on('change keydown paste input', function(){
								if ($(this).val().length > 0) {
									$(this).parent('.nhw-form-group:not(.nhw-form-group-checkbox):not(.nhw-form-group-radio):not(.nhw-form-group-textarea)').children('label').addClass('float-label')
								} else (
									$(this).parent('.nhw-form-group:not(.nhw-form-group-checkbox):not(.nhw-form-group-radio):not(.nhw-form-group-textarea)').children('label').removeClass('float-label')
								)
							});

							// Leasing Specials
							function checkSpecials(propertyDescription) {
								let reEx = /([^<br>])*?LEASING SPECIAL[\s\S]*?(?=<br>)/i;
								let reExAlt = /([^<br>])*?SPECIAL:[\s\S]*?(?=<br>)/i;
								let specialText = propertyDescription.match(reEx) != null ? propertyDescription.match(reEx)[0].split('<br>')[0] : 'null';
								if (specialText == 'null') {
									specialText = propertyDescription.match(reExAlt) != null ? propertyDescription.match(reExAlt)[0].split('<br>')[0] : 'null';
								}
								if (specialText.length > 0 && specialText != 'null') {
									$('.nhw-details__property-info .headline').prepend(`<div class="special-offer">${specialText}</div>`);
									let newText = $('.nhw-details__property-info .description').html().replace(specialText, "").replace('<br><br>','');
									$('.nhw-details__property-info .description').html(newText);
								}
							}

							checkSpecials($('.nhw-details__property-info .description').html())

							// Back btn
							function goBack(){
								let prevLocation = localStorage.getItem("url");
								let rentalsMarket = $('#back-btn').data('market');
								if (prevLocation !== null ) {
									if (prevLocation.length > 0 ) {
										window.location = prevLocation;
									} else {
										window.location = `${window.location.origin}/${rentalsMarket}-homes-for-rent`;
									}
								} else {
									window.location = `${window.location.origin}/${rentalsMarket}-homes-for-rent`;
								}
							}

							$('#back-btn').click(function(e){
								e.preventDefault();
								goBack();
								return false;
							})


							$(document).ready(function () {

								// Contact Button Affix
								$('.nhw-details__property-contact').affix({
									offset: {
										top: ($('.nhw-details__property-contact').offset().top + $('.nhw-details__property-contact').outerHeight()) - 50
									}
								});

								// Listing Details Map
								mapboxgl.accessToken =
									"pk.eyJ1Ijoia29odmEiLCJhIjoiY2prbDlsNXhuMXl6YzNxbnhtY2w0NzB3bSJ9.jpQllFfzX4I6lT3VF6ZByQ";

								const container = $("#nhw-listing-detail-map-container");

								const lat = container.data("latitude") || 0.0;
								const lng = container.data("longitude") || 0.0;
								const zoom = container.data("zoom") || 8;

								const map = new mapboxgl.Map({
									container: "nhw-listing-detail-map-container",
									style: "mapbox://styles/mapbox/streets-v12", // style URL
									center: [lng, lat], // starting position [lng, lat]
									zoom: zoom, // starting zoom
								});

								const marker = new mapboxgl.Marker().setLngLat([lng, lat]).addTo(map);

								Fancybox.bind('[data-fancybox="gallery"]', {});

								Fancybox.bind('[data-fancybox="map"]', {});

								$(".nhw-listing-detail-view-gallery").on("click", function () {
									Fancybox.fromSelector('[data-fancybox="gallery"]');
								});

							});
						</script>


						<script src="https://resources.nesthub.com/js/nhw-nearby-homes.js?v1" type="text/javascript"></script>

Nearby Homes Widget Last Updated 2/6/2024

HTML

Add the following code to the bottom of the Nesthub Listing Widget View Template

					
						
						
						
						<section class="nhw-nearby-listings lazyload" data-current-prop="{{ listing.listingID }}" data-lat="{{ listing.latitude }}" data-lng="{{ listing.longitude }}" data-script="https://resources.nesthub.com/js/nhw-nearby-homes.js?v1" data-style="https://resources.nesthub.com/css/nhw-nearby-homes.css?v1">
							<h3 class="nhw-details__heading">Nearby Homes</h3>
							<div class="nhw-nearby-listings__list"></div>
						</section>

Nesthub Widget Styles & Setup

Add a Feed Last Updated 9/3/2024

SEO Property Widget (Customers Paying for SPP) Last Updated 9/3/2024

NESTHUB PROPERTY SETUP ON BACKEND (different if they have Rentvine)

Instructions

Files to add to Rentals Template

List

View

Settings

Tags

Filters

Property Type Filters

Exclusion Filters

If needing to use multiple filters, use the following

If hiding ShowMojo Link in Nesthub Listings Widget

Standard Nesthub Widget (non-APP)

Files to add to Homes for Rent Page (or update Rentals Template if it's a newer site)

Code to Add to Homes for Rent Page -- Replace old FRS code

Code to Add to styles.css file for older sites

Adding generic URL to all properties

Filters

Property Type Filters

Exclusion Filters

If needing to use multiple filters, use the following

The Map Last Updated 1/10/2024

Instructions

Files to add to Rentals Template

List

View

The Map Last Updated 2/6/2024

Instructions

Files to add to Rentals Template

List

View

Nearby Homes Widget Last Updated 2/6/2024

HTML