All Collections
Getting started: Partners
Customizing Perch's Embeddable Tools
Customizing Perch's Embeddable Tools

Perch's embeddable tools can be customized to pre-fill certain pieces of information that can further improve their usability.

Support avatar
Written by Support
Updated over a week ago

If you haven't already, be sure to speak with your point of contact at Perch to become a Perch Partner and get set up with our embeddable tool service.

Our embeddable tool service provides Perch Partners with an array of mortgage and finance tools and calculators (e.g. live rates, purchase price qualifier, mortgage payment, etc.) that can be embedded on any website to enhance your user experience. You can learn more about our embeddable tool service here.

Excitingly, our embeddable tools can also be customized to pre-fill certain pieces of information to further improve their usability. For example, variables like purchase price, down payment, property taxes, etc. can be pre-filed using injectable variables set by your CMS or templating language.

Why would I want to pre-fill values for an embedded tool?

If for example, you run a property listing website and want to embed our pre-qualification or mortgage payment calculator you might want to pre-fill the property price from a particular listing so that the tool output values are pre-calculated using that listing listing price and so that the user doesn't need to adjust any values.

How can I inject variables into a Perch embeddable tool?

The process is quite simple. All you need to do is use one of our predefined data properties and set the value in the embed code using your CMS or templating language.

<div class="perch-widget" widget-id="uMsnqDSA" widget-purchase-price="YOUR-VARIABLE" widget-down-payment="YOUR-VARIABLE">
<div class="perch-widget-loading-indicator">Loading...</div>
</div>

What if my embeds contain multiple widgets?

Perch supports single and multi-widget embeds. Our multi-widget embeds add a navigation bar to make it simple for users to navigate between widgets.


The great news is that the injectable variables are set globally which means that you simply set them on the embed code and all widgets contained in the embed will receive the provided variables. The other great news is that user-inputted values (e.g. income, down payment amount, etc.) will be cached so that if the user loads the same calculator again or on another page, the embed will remember the value so the user doesn't have to enter it again and again.

What variables can I inject into a widget?

Each widget has its own set of supported variables based on functionality. However, the current list of supported global variables are:

  • widget-property-value: Number

  • widget-annual-property-taxes: Number

  • widget-monthly-maintenance-fee: Number

  • widget-down-payment: Number

  • widget-down-payment-percent: Number

  • widget-referral-code: String

Modify the look of your widget with the following keys

  • widget-primary-color: String(hex)

  • widget-secondary-color: String(hex)

  • widget-hide-titles: boolean

Have any other questions about embeddable tools, be sure to speak with your Perch point of contact who will be able to help you out and answer any of your questions.

Did this answer your question?