Not every new construction home shows up in a standard MLS feed — many never make it there at all.
The listing needs an actual MLS #, which is for spec homes and inventory homes only, to appear in a standard MLS/IDX feed. This means they won’t show up on Real Geeks, Sierra, or any other standard IDX-fed sites.
Use the Search New Construction Homes bar at the top of the page (you may need to scroll down slightly for it to appear), and you’ll be taken to the New Home Source Professional interface. There you’ll find not only spec homes and inventory homes ready to close, but also new models, model floor plans, and new developments that are coming soon — inventory that simply doesn’t exist anywhere in the standard MLS.
What this guide covers: You will paste one self-contained code block into your website and end up with a sticky search bar that lets visitors filter new construction homes by city, price, beds, baths, and square footage. Searches open on ShowingNew, credited to your account.
What you need before you start: A New Home Source Professional account (free to agents — details in Step 1), a confirmed list of cities active in your NHSP portal (Step 2), and your ShowingNew slug (the short string in your personal ShowingNew URL). Everything else you can edit right in the code block using find-and-replace.
Values you must swap out: Any value highlighted with a warning box in this guide belongs to the original author and will send your leads somewhere else if you leave it unchanged. Do not skip those steps.
Live Example
1 Sign up for New Home Source Professional
The search bar posts form data to ShowingNew, which is the buyer-facing search tool built on New Home Source Professional (NHSP) data. NHSP aggregates new construction inventory directly from builders — floor plans, spec homes, move-in-ready units — that often never make it into MLS feeds. That is the whole point of using this tool rather than a standard IDX search.
ShowingNew is the consumer interface for that database. When a visitor searches from your bar, they land on a results page that is associated with your NHSP account. You get the lead. But none of that routing works unless you have an account first.
Sign up at: newhomesourceprofessional.com
The signup is free for licensed agents. After you complete it, NHSP assigns you a personal ShowingNew URL. That URL contains the slug you will use in Step 3. Keep the email — you will need the slug.
Why this has to come first: The form action URL in the code is agent-specific. You cannot generate your slug yourself — NHSP creates it based on your account name. Until you have your slug, you have nothing to put in the form action field.
2 Verify your cities in the NHSP portal
Before you touch a single line of code, log into your New Home Source Professional portal and confirm which cities are listed as active in your account. This step is easy to skip — and it causes more confusion than almost anything else in this process.
The search bar's area dropdown can only surface cities that NHSP already has inventory for in your market and that are tied to your account's coverage area. If you add a city to the dropdown that NHSP does not have listed, the visitor submits the search, lands on your ShowingNew results page, and sees zero results — no listings, no message, just an empty page. That looks broken, even though the code is fine.
How to check which cities are available
- Log in at newhomesourceprofessional.com.
- Navigate to your account dashboard or the market/coverage settings area.
- Look for a list of markets or cities that are active under your subscription. The exact label varies by account tier, but it is typically in a section called Markets, Coverage Area, or Service Area.
- Write down every city that appears there. Those are the only cities you should add to the dropdown.
Only cities listed in your NHSP portal can be added to the search bar. Adding cities outside your coverage returns empty results on ShowingNew, which erodes visitor trust. When in doubt, test a city on your personal ShowingNew URL (showingnew.com/your-slug) before adding it to the dropdown — if results load there, it is safe to add.
What if a city I serve is not listed?
Contact NHSP support and ask them to add that market to your account. Coverage expansions are typically handled within one to two business days. Do not add the city to the dropdown until NHSP confirms it is active — a search that returns nothing is worse than a search that was never offered.
Pro tip: Do a quick live test first. Open your ShowingNew URL in a private browser window, type a city name into the search field, and see what comes back. If listings appear, that city is active and safe to add. This takes thirty seconds per city and eliminates guessing entirely.
3 Find your ShowingNew slug and update the form action
After NHSP assigns your account, you receive a personal ShowingNew URL that looks like this:
https://www.showingnew.com/your-name
The part after the last slash is your slug. In the working example in this guide, the slug is boisenewhomes. Yours will be different.
Where to make the change
In the code block, find this line:
action="https://www.showingnew.com/boisenewhomes/home/redirecttoresultspage"
Replace boisenewhomes with your own slug. The rest of the URL stays exactly the same. Example: if your ShowingNew URL is showingnew.com/jane-smith, the corrected line is:
action="https://www.showingnew.com/jane-smith/home/redirecttoresultspage"
If you skip this step, every search from your website will open results attributed to the original author's account. The visitor sees a different agent's name and contact info. Do not publish the bar until you have made this change.
How to find it quickly
Use your browser or text editor's find-and-replace function. Search for boisenewhomes. It appears once in the code block — in the form action URL. Replace it with your slug.
4 Rebrand the bar with your colors and font
The bar's colors are hardcoded directly in the #rg-topbar CSS block rather than using token variables. To rebrand, find and update these three hex values in the <style> block:
- Bar background:
background:#000000on#rg-topbar— change#000000to your brand background color. - Accent / gold:
#f0ce7a— this appears on the border-bottom, the label color, select borders, the submit button background, and the close button. Use your editor's find-and-replace to swap all occurrences of#f0ce7awith your accent color at once. - Button hover:
#C9973F— the darker shade used when the visitor hovers the Find Homes button. Replace with a darker version of your accent.
Label font
The "Search New Construction Homes" label uses Cormorant Garamond (a serif display font) with DM Sans as the fallback. This is loaded from your site's existing font stack — no extra <link> tag is needed as long as Cormorant Garamond is already available on the page. If it is not, add this above the <style> block:
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&display=swap" rel="stylesheet">
The dropdowns and button use DM Sans throughout. To switch to a different sans-serif, find-and-replace 'DM Sans' in the CSS.
Tip: If you do not know your brand hex codes, open your site in Chrome, right-click any element that uses your brand color, choose Inspect, and look at the computed color value in the Styles panel. Copy the six-character hex code.
5 Localize the area dropdown to your market
The area dropdown comes pre-loaded with the Boise, ID market — ten cities and twenty zip codes. You need to replace those with the cities and zip codes confirmed active in your NHSP portal (see Step 2).
How the dropdown works
Each <option> element has two parts: the value attribute (what gets submitted to ShowingNew) and the visible label between the tags (what the visitor reads). For city entries the value should be a city/state string ShowingNew recognizes, such as Meridian, ID. For zip code entries the value is simply the five-digit zip.
What to replace
- Default option: Change
value="Boise, ID Area"and the label text to your metro area name. - Cities optgroup: Replace the city
<option>entries with cities confirmed active in your NHSP portal. Only add cities that appear there — anything outside your coverage returns empty results. - Zip Codes optgroup: Replace or trim the zip code entries to match your market. You can remove the entire
<optgroup label="Zip Codes">block if you do not want zip-level filtering.
Adding communities or sub-markets
You can add additional <optgroup> sections for master-planned communities or sub-markets. The submitted value can be a community name string — for example, value="Daybreak" — as long as ShowingNew recognizes it as a valid search term in your market. Test each one after publishing to confirm results load.
Still reading? That’s 5 steps of technical setup, 3 more to go.
Most agents get stuck on the slug, the color tokens, or the CMS injection. Skip all of it — we’ll have it live on your site in 3 business days, fully branded and ready to capture leads.
Get It Installed — $1506 Understand responsive behavior
The bar hides lower-priority controls as the screen narrows so it stays usable on every device without you needing to build separate mobile layouts. Elements are hidden using the utility classes rgtb-hide-md and rgtb-hide-sm.
Below 1024px (tablets and smaller laptops)
Any element with class rgtb-hide-md is hidden — in the default code that is the Beds and Baths dropdowns. Price, Home Type, and the area dropdown stay visible.
Below 640px (phones)
Any element with class rgtb-hide-sm is also hidden — in the default code that is Home Type and both Price dropdowns. The "Search New Construction Homes" label also hides. Only the area dropdown and the Find Homes button remain, plus the close × button.
This is intentional. A six-control form on a 390px screen is unusable. The simplified phone bar lets the visitor pick a market and get to results in one tap; full filtering happens on the ShowingNew results page.
To change which controls hide at which breakpoint, add or remove the rgtb-hide-md and rgtb-hide-sm classes from the relevant <select> elements, or edit the pixel values in the two @media blocks inside the <style> tag.
7 Paste the code into your CMS
How to paste on any platform
The code block is fully self-contained: the <style> block is scoped to #rg-topbar, the script has an init guard (window.rgTopbarInit) that prevents it from running twice if the block appears more than once, and the z-index is set to 2147483000 — high enough to sit above virtually every platform navigation bar. Paste the whole block once, in one place, and it works.
Real Geeks
In your Real Geeks dashboard, go to Website Editor, then Footers. Select Default Footer — this applies the bar to every page that uses that footer, which is typically your entire site. Once inside the footer editor, click Source Code and paste the full code block there. Click Save when done. If you have multiple footers assigned to different page types and want the bar on all of them, you will need to paste the code into each footer's Source Code field individually.
GoHighLevel (GHL)
In GHL's funnel or site builder, add a new section and insert a Custom Code element. Paste the full block into that element. GHL preserves both <style> and <script> tags inside Custom Code elements. For site-wide placement — the recommended approach for this bar — use the site's Footer Code field under Site Settings.
WordPress
The cleanest method is a plugin like Insert Headers and Footers (WPCode) — paste the block in the body injection area so it fires on every page. If you only want the bar on specific pages, use a Custom HTML block in the Gutenberg editor. Avoid pasting into the WordPress Classic text editor's Visual mode — always use Text (HTML) mode, or the markup will be escaped.
Sierra Interactive and CINC
Both platforms have a Custom HTML or Code Injection section in site settings. Paste the block there. Sierra strips some JavaScript from page-level custom HTML fields on certain plan tiers — if the bar renders visually but does not respond to scroll, move the code to the site-wide injection setting instead.
Conflict with platform sticky headers
The bar uses position:fixed; top:0. If your platform renders its own sticky header (common on Real Geeks and Sierra), the search bar will sit on top of it. Fix this one of two ways:
- Find the
top:0line in#rg-topbarCSS and change it to match the height of your platform header. For example, if the platform header is 60px tall, change it totop:60px. - Add
padding-topto the page body equal to the combined height of both bars, so page content starts below both.
The init guard explained: The line if (window.rgTopbarInit) return; at the top of the script block means if a CMS injects the code twice (some platforms do this with header/footer injections on single-page transitions), the scroll listener only attaches once. You do not need to do anything with this line — it is there so you do not have to worry about it.
8 Test and troubleshoot
Testing checklist
- Scroll down at least 300px on the page — the bar should slide in from the top.
- Open the area dropdown — the list should show your market cities and zip codes, not Boise defaults.
- Select a city, set a price range, and click Find Homes. A new tab should open on ShowingNew showing results. Check the URL — it should contain your slug, not
boisenewhomes. - Click the
×close button — the bar should slide back up and stay hidden for the rest of that page view. - Resize the browser to a phone width (or open on a phone). The bar should simplify to the area dropdown and Find Homes button only.
- Confirm the bar does not cover your site navigation. If it does, see the fix in Step 7 (Paste the code into your CMS).
Troubleshooting
| Symptom | Likely cause | Fix |
|---|---|---|
| Results page shows a different agent's name | Form action URL still contains the example slug (boisenewhomes) |
Find-and-replace boisenewhomes with your ShowingNew slug in the code block. Republish. |
| Bar never appears at all | Code block not published, JavaScript stripped by the platform, or page is shorter than SCROLL_TRIGGER |
Confirm the page is published. Check whether your CMS allows <script> in that block type. Temporarily set SHOW_ALWAYS = true to isolate the scroll issue. |
| Bar covers the site menu | z-index or top:0 conflict with the platform's own sticky header |
Change top:0 in #rg-topbar to match the height of the platform header, or add body padding-top. See Step 7. |
| Font looks wrong or falls back to sans-serif | Cormorant Garamond or DM Sans not loading on the page | Add the Google Fonts <link> tags for Cormorant Garamond and DM Sans above the code block. See Step 4 for the exact tag to add. |
| Dropdown shows Boise cities instead of my market | Area dropdown was not updated | Follow Step 5 to replace the <option> values and labels in the <select name="SearchText"> element with cities confirmed active in your NHSP portal. |
| Bar appears but search returns no results | The city value does not match an active market in your NHSP portal | Test the city directly at showingnew.com/your-slug in the search interface. If no results come back, confirm the city is active in your NHSP portal (Step 2) before adding it to the dropdown. |
Full Code Block
Copy the entire block below and paste it once into your CMS, then make the changes described in Steps 3 through 5. Every value you must swap is flagged with a comment in the code itself.
Before you paste: Replace boisenewhomes with your ShowingNew slug in the form action URL, and replace the area dropdown options with your market cities and zip codes. Do not publish until those changes are made.
<!-- =========================================================
FLOATING TOP SEARCH BAR — New Home Source Professional / ShowingNew
Paste into GHL Footer Code (Site Settings) so it appears site-wide.
Slides in after the visitor scrolls; set SHOW_ALWAYS=true below to pin it permanently.
REQUIRED BEFORE PUBLISHING:
1. Replace "boisenewhomes" with your own ShowingNew slug in the form action URL.
2. Replace the area dropdown options with cities/zip codes active in your NHSP portal.
3. Optional: update bar/accent colors in the CSS to match your brand.
========================================================= -->
<style>
#rg-topbar{
position:fixed; top:0; left:0; right:0; z-index:2147483000;
background:#000000;
border-bottom:2px solid #f0ce7a;
box-shadow:0 6px 24px rgba(0,0,0,0.45);
font-family:'DM Sans',sans-serif;
transform:translateY(-110%);
transition:transform .35s ease;
}
#rg-topbar.rgtb-visible{ transform:translateY(0); }
#rg-topbar, #rg-topbar *{ box-sizing:border-box; }
#rg-topbar form{
display:flex; align-items:center; gap:8px;
max-width:1280px; margin:0 auto; padding:17px 16px;
}
#rg-topbar .rgtb-label{
color:#f0ce7a; font-size:22px; font-weight:500;
font-family:'Cormorant Garamond',Georgia,serif;
letter-spacing:.02em; line-height:1.15;
margin-right:10px;
}
#rg-topbar select.rgtb-area{
flex:1 1 220px; min-width:140px; height:64px;
padding:0 12px; font-size:16px; color:#1a1814;
background:#FFFFFF; border:1px solid #f0ce7a; border-radius:0;
font-family:'DM Sans',sans-serif; outline:none; cursor:pointer;
}
#rg-topbar select{
flex:0 1 auto; height:64px; padding:0 8px; font-size:14px;
color:#1a1814; background:#FFFFFF; border:1px solid #f0ce7a;
border-radius:0; font-family:'DM Sans',sans-serif; outline:none; cursor:pointer;
}
#rg-topbar input[type="submit"]{
height:64px; padding:0 22px; border:1px solid #f0ce7a; border-radius:0;
background:#f0ce7a; color:#000000; font-weight:700; font-size:12px;
letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
font-family:'DM Sans',sans-serif; transition:all .2s ease; white-space:nowrap;
}
#rg-topbar input[type="submit"]:hover{ background:#C9973F; border-color:#C9973F; }
#rg-topbar #rgtbClose{
flex:0 0 auto; width:42px; height:42px; margin-left:2px;
background:transparent; border:1px solid rgba(240,206,122,0.5); border-radius:0;
color:#f0ce7a; font-size:24px; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:all .2s ease;
}
#rg-topbar #rgtbClose:hover{ background:#f0ce7a; color:#000000; border-color:#f0ce7a; }
/* Tablet: drop baths, then beds */
@media (max-width:1024px){ #rg-topbar .rgtb-hide-md{ display:none; } }
/* Mobile: just label-less area dropdown + type + button */
@media (max-width:640px){
#rg-topbar .rgtb-label{ display:none; }
#rg-topbar .rgtb-hide-sm{ display:none; }
#rg-topbar form{ padding:13px 10px; gap:6px; }
#rg-topbar input[type="submit"]{ padding:0 14px; }
}
</style>
<div id="rg-topbar" aria-label="Search new construction homes">
<form action="https://www.showingnew.com/boisenewhomes/home/redirecttoresultspage"
enctype="multipart/form-data" method="post" target="_blank">
<span class="rgtb-label">Search New<br>Construction Homes</span>
<!-- =========================================================
AREA DROPDOWN
Replace options below with cities/zip codes active in your NHSP portal.
Only add entries confirmed there — unrecognized values return empty results.
value = city/state string or zip code ShowingNew recognizes
text = what visitors see in the dropdown
========================================================= -->
<select id="rgtbSearchText" class="rgtb-area" name="SearchText" aria-label="Search area">
<option selected value="Boise, ID Area">Boise, ID Area (All)</option>
<optgroup label="Cities">
<option value="Boise, ID">Boise, ID</option>
<option value="Meridian, ID">Meridian, ID</option>
<option value="Eagle, ID">Eagle, ID</option>
<option value="Star, ID">Star, ID</option>
<option value="Kuna, ID">Kuna, ID</option>
<option value="Nampa, ID">Nampa, ID</option>
<option value="Caldwell, ID">Caldwell, ID</option>
<option value="Middleton, ID">Middleton, ID</option>
<option value="Garden City, ID">Garden City, ID</option>
<option value="Emmett, ID">Emmett, ID</option>
</optgroup>
<optgroup label="Zip Codes">
<option value="83616">83616</option>
<option value="83642">83642</option>
<option value="83646">83646</option>
<option value="83634">83634</option>
<option value="83669">83669</option>
<option value="83686">83686</option>
<option value="83687">83687</option>
<option value="83605">83605</option>
<option value="83607">83607</option>
<option value="83644">83644</option>
<option value="83702">83702</option>
<option value="83703">83703</option>
<option value="83704">83704</option>
<option value="83705">83705</option>
<option value="83706">83706</option>
<option value="83709">83709</option>
<option value="83712">83712</option>
<option value="83713">83713</option>
<option value="83714">83714</option>
<option value="83716">83716</option>
</optgroup>
</select>
<select class="rgtb-hide-sm" name="QuickMoveIn" aria-label="Home type">
<option selected value="0">All New Homes</option>
<option value="1">Inventory Homes</option>
</select>
<select class="rgtb-hide-sm" name="PriceLow" aria-label="Minimum price">
<option value="">Min Price</option>
<option value="100000">$100,000</option>
<option value="125000">$125,000</option>
<option value="150000">$150,000</option>
<option value="175000">$175,000</option>
<option value="200000">$200,000</option>
<option value="225000">$225,000</option>
<option value="250000">$250,000</option>
<option value="275000">$275,000</option>
<option value="300000">$300,000</option>
<option value="325000">$325,000</option>
<option value="350000">$350,000</option>
<option value="375000">$375,000</option>
<option value="400000">$400,000</option>
<option value="425000">$425,000</option>
<option value="450000">$450,000</option>
<option value="475000">$475,000</option>
<option value="500000">$500,000</option>
<option value="550000">$550,000</option>
<option value="600000">$600,000</option>
<option value="700000">$700,000</option>
<option value="800000">$800,000</option>
<option value="900000">$900,000</option>
<option value="1000000">$1,000,000</option>
<option value="1250000">$1,250,000</option>
<option value="1500000">$1,500,000</option>
<option value="2000000">$2,000,000</option>
<option value="3000000">$3,000,000</option>
<option value="5000000">$5,000,000</option>
<option value="10000000">$10,000,000</option>
</select>
<select class="rgtb-hide-sm" name="PriceHigh" aria-label="Maximum price">
<option value="">Max Price</option>
<option value="100000">$100,000</option>
<option value="125000">$125,000</option>
<option value="150000">$150,000</option>
<option value="175000">$175,000</option>
<option value="200000">$200,000</option>
<option value="225000">$225,000</option>
<option value="250000">$250,000</option>
<option value="275000">$275,000</option>
<option value="300000">$300,000</option>
<option value="325000">$325,000</option>
<option value="350000">$350,000</option>
<option value="375000">$375,000</option>
<option value="400000">$400,000</option>
<option value="425000">$425,000</option>
<option value="450000">$450,000</option>
<option value="475000">$475,000</option>
<option value="500000">$500,000</option>
<option value="550000">$550,000</option>
<option value="600000">$600,000</option>
<option value="700000">$700,000</option>
<option value="800000">$800,000</option>
<option value="900000">$900,000</option>
<option value="1000000">$1,000,000</option>
<option value="1250000">$1,250,000</option>
<option value="1500000">$1,500,000</option>
<option value="2000000">$2,000,000</option>
<option value="3000000">$3,000,000</option>
<option value="5000000">$5,000,000</option>
<option value="10000000">$10,000,000</option>
</select>
<select class="rgtb-hide-md" name="BedRooms" aria-label="Bedrooms">
<option value="-1">Beds</option>
<option value="1">studio/1</option>
<option value="2">2+</option>
<option value="3">3+</option>
<option value="4">4+</option>
<option value="5">5+</option>
</select>
<select class="rgtb-hide-md" name="Bathrooms" aria-label="Bathrooms">
<option value="-1">Baths</option>
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
<option value="4">4+</option>
<option value="5">5+</option>
</select>
<input id="rgtbSubmit" type="submit" value="Find Homes">
<button id="rgtbClose" type="button" aria-label="Close search bar">×</button>
</form>
</div>
<script>
(function(){
// Duplicate-init guard: prevents double-binding if the block loads twice
if (window.rgTopbarInit) return;
window.rgTopbarInit = true;
var SHOW_ALWAYS = false; /* set true to keep bar pinned from page load */
var SCROLL_TRIGGER = 300; /* px scrolled before the bar slides in */
var bar = document.getElementById('rg-topbar');
var dismissed = false;
function update(){
if (dismissed) { bar.classList.remove('rgtb-visible'); return; }
if (SHOW_ALWAYS || window.scrollY > SCROLL_TRIGGER) bar.classList.add('rgtb-visible');
else bar.classList.remove('rgtb-visible');
}
window.addEventListener('scroll', update, { passive:true });
update();
/* Close button: slides bar back up and keeps it hidden for this page view */
document.getElementById('rgtbClose').addEventListener('click', function(){
dismissed = true;
bar.classList.remove('rgtb-visible');
});
}());
</script>
Get It Installed — $150
You handle the leads. We handle the code. Fill out the form and we’ll have your branded search bar live within 3 business days.
Limited installs per week. We keep our turnaround at 3 business days by capping how many installs we take on. If the form is open, we have capacity right now.
3-Business-Day Delivery Guarantee. If your bar is not live and working within 3 business days of receiving your account access, we refund 100% of your payment. No questions, no runaround.
Third-Party Service Disclaimer
This installation service configures a search widget that depends entirely on New Home Source Professional (NHSP) and ShowingNew — third-party platforms that we do not own, operate, or control. Our fee covers the one-time technical work of installing and configuring the widget on your website. It does not cover, and does not include any guarantee regarding, the continued availability or functionality of those third-party platforms.
If New Home Source Professional or ShowingNew ceases operations, discontinues the search widget, changes its API or embed functionality, modifies its pricing or access requirements, or otherwise becomes unavailable for any reason — whether temporarily or permanently — we are not responsible and no refund will be issued. The installation work will have been completed as agreed regardless of what happens to the underlying third-party service after that point.
We recommend maintaining an active NHSP account in good standing and staying informed of any communications from NHSP or ShowingNew regarding changes to their platform. If the widget stops working due to a third-party change and you would like us to investigate or update the integration, that work would be quoted separately.
