Home Valuation Widget (Beta)

Help Your Users Estimate Their Home’s Worth
The Home Valuation Widget allows users to get an instant estimate of their home’s value, providing an engaging experience directly on your website.

Step-by-Step Guide: Home Valuaton 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 offers an easy way for your users to estimate their home value and get insights.

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

				
					<home-valuation-widget
  show-overlay="yes"
  overlay-background="#1D3146"
  primary-color="#35CCBA"
  secondary-color="#1D7066"
  overlay-heading="Want to know what your home is Worth?"
  overlay-sub-heading="Here is an estimate to get you started."
  text-placeholder="Enter your address..."
  primary-error-text="No automated valuation could be generated for:"
  secondary-error-text="Want a professional estimate from an agent in the area?"
  error-phone="5555555555"
  error-email="service@homeadvantage.com"
  font-family='"Poppins", sans-serif'
  font-url="https://fonts.googleapis.com/css?family=Poppins&display=swap">
</home-valuation-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.
  • Overlay Background (overlay-background): Change the overlay background color.
  • 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 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 - HomeValuation by Chris Hudson (@homeadvantage-ch) on CodePen.

 

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