Home Search Widget

Bring Seamless Home Searches to Your Users
The Home Search Widget allows users to start a home search directly from your website

Step-by-Step Guide: Home Search Widget Setup

Use the codepen editors to see how the you can change variables to enhance the look and feel of the widgets to match your site.

Step 1: Header Code
IMPORTANT: Before adding any widget to your website, it’s essential to set up the header code. This code acts as the foundation, ensuring the widgets work correctly across all your web pages. For full instructions on setting up the head code visit the main widgets page here.

				
					<script src="https://assets.myhomeadvantage.com/wp/ha-widget.bundle.js" data-tenant="{YOUR_ID}" data-key="{YOUR_KEY}"></script>

Step 2: Understand the Widget
This widget makes searching for homes easy for your users, while offering a seamless experience by redirecting them to the co-branded HomeAdvantage search site when they search.

Step 3: Add the Home Search Widget Code
Copy and paste the following code changing the tenant to your tenant number:

				
					<home-search-widget 
  show-overlay="yes" 
  primary-color="#004261" 
  overlay-background="#048767"
  overlay-heading="YOUR DREAM HOME AWAITS" 
  overlay-sub-heading="And so do your Cash Rewards"
  text-placeholder="Search by City, Zip, Neighborhood..."
  font-family='"Roboto", serif'
  font-url="https://fonts.googleapis.com/css2?family=Itim&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playwrite+CU:wght@100&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap">
</home-search-widget>
Step 4: Customize the Widget Values
 
Use the codepen editors to see how the you can change variables to enhance the look and feel of the widgets to match your site.
  • Primary Color (primary-color): Set the main color of your widget.
  • Overlay Background (overlay-background): Change the overlay background color.
  • Overlay Heading: (overlay-heading) Customize the text to fit your branding.
  • Overlay Sub-Heading (overlay-sub-heading): Customize the text to fit your branding.
  • Text Placeholder (text-placeholder): Provide placeholder text for the search bar.
  • Font Family (font-family): Set a custom font to align with your website style.
  • Font  URL( font-url): Set a custom font to align with your website style.

See the Pen HA - HomeSearch by Chris Hudson (@homeadvantage-ch) on CodePen.

 

Step 5: Test the Widget
Ensure the widget is displaying correctly and that users are redirected appropriately to the Home Search Site when selecting properties.