Market Trends Widget (Beta)

Provide Market Insights in One Click
This widget displays up-to-date market trends based on user searches, making it an informative tool for your website visitors.

Step-by-Step Guide: Market Trends 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 The Market Trends Widget helps users stay informed about trends in their local market.

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

				
					<market-trend-widget 
    show-overlay="yes"
    primary-color="#ff00ff"
    secondary-color="#00ffff"
    overlay-background="#013220"
    overlay-heading="What is happening in your neighborhood"
    overlay-sub-heading="Get a free market report by entering your info below"
    text-placeholder="Search by City, Zip, Neighborhood..."
    font-family='"Montserrat", sans-serif'
    font-url="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playwrite+CU:wght@100&display=swap">
</market-trend-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.