Upfront Estimate

Overview

Upfront Estimate is meant to be rendered on your product page beside the price of the product. See an example UI on the demo site. Before you can use this element, follow the Upfront.js init steps outlined in the Upfront.js Docs.

Upfront Estimate (`<upfront-estimate-component>`)

<upfront-estimate-component productId="76" productPrice=69999 />

When the Upfront Estimate component is clicked, it will open a modal showing rebate information to the user.

It's recommended to simply render this component beside the price on every product page. It will automatically show or hide based on whether the given productID has rebates. If you wish to control rendering of Upfront Estimate yourself on the backend, you can call /should_show_estimate_for_product, but this is optional.

Attributes

The following attributes are available in the Upfront Estimate element:

Attribute name	Type	Required	Description
zipCode	string	No	The user zip code. This is optional, and if not provided we'll try to guess the user zip code based on their IP address.
productId	string	Yes	The product ID. Work with us to map your product IDs into our systems before go-live. If we determine this product is not eligible for rebates, we won't render the Upfront Estimate.
productPrice	number	Yes	The price of the product in cents.
installationPrice	number	No	The installation price of the product (if install is included) in cents.

Events

Upfront Estimate will send events that you can listen to in order if you want to customize UI based on user's actions within Upfront Estimate modal.

Event name	Type	Description
upfront-zip-change	{ zipCode: string, minRebateCents: number, maxRebateCents: number }	Dispatched whenever user searches another zip code. Based on the data in this event, you can update the zip code / rebates ranges on your end to ensure a seamless user experience.

window.addEventListener('upfront-zip-change', (event) => {
  let userZipCode = event.detail.zipCode; // the last zip code user entered in the modal
  let minRebateCents = event.detail.minRebateCents; // the minimum range of estimated rebates
  let maxRebateCents = event.detail.maxRebateCents; // the maximum range of estimated rebates
});

JS function openEstimate

Upfront.js provides a function openEstimate to open Upfront Estimate modal programmatically, without relying on <upfront-estimate-component>. It is useful for customizing UI in accordance with your own design.

The function accepts same attributes as the <upfront-estimate-component>

Attribute name	Type	Required	Description
zipCode	string	No	The user zip code. If passed Upfront Estimate will open directly on the search results for the given zip code, bypassing zip entry screen.
productId	string	Yes	The product ID. Note: work with us to map your product IDs into our systems before go-live. If we determine this product is not eligible for rebates, we won't render the Upfront Estimate.
productPrice	number	Yes	The price of the product in cents.
installationPrice	number	No	The installation price of the product (if install is included) in cents.

function handleSeeRebates() {
  upfrontHandler.openEstimate({
    productId: "8326355878202",
    productPrice: 69999,
    zipCode: "56208",
  })
}

Tracking

Optionally, if you want to listen for HTML events when this element is launched (for example, for tracking / experiment purposes), you can select it from the DOM and add event listeners like any HTML element:

<body>
    <upfront-estimate-component id="upfront-estimate-id" productId="76" productPrice=69999 />
</body>
<script>
  let el = document.getElementById('upfront-estimate-id')
  el.addEventListener('click', function (e) {
      console.log('clicked upfront estimate', e.detail)
  });
</script>

Overview