Nesthub Widget Styles

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=""

																	
																	
																
															

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>

							
							
						
					

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>


						
						
					
				

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>