Agent Search Widget
Coming SOON!

Connect Users with Local Real Estate Experts
The Find an Agent Widget helps your users connect with vetted, professional real estate agents in their area.

Step-by-Step Guide: Agent 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.

Step 2: Understand the Widget This widget enables users to search for and connect with real estate agents across the country.

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

				
					<agent-search-widget 
    show-overlay="yes"
    primary-color="#ff00ff"
    secondary-color="#00ffff"
    overlay-background="#013220"
    overlay-heading="Nationwide Coverage and Local Expertise"
    overlay-sub-heading="Over 1,300 agents across the nation, each with local expertise and experience to be your guide"
    text-placeholder="Search by City, Zip, Neighborhood..."
    font-family='"Itim", cursive'
    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=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">
</agent-search-widget>
Step 4: Customize the Widget Properties
 
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.
 
  • Show Overlay (show-overlay): turns overlay on with yes and off with no.
  • Primary Color (primary-color): Set the main color of your widget when it expands to show the whole valuation.
  • Secondary Color (secondary-color): Set the secondary color of your widget when it expands to show the whole valuation.
  • 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 - MarketTrend by Chris Hudson (@homeadvantage-ch) on CodePen.

 

Step 5: Test the Widget
Test the widget to ensure that the results display correctly and that error messages are functioning as expected.