Skip to content
WeGetFinancing WeGetFinancing WeGetFinancing Docs

PPE Widget

The PPE (Purchase Power Estimator) widget is a standalone JavaScript + CSS module. It reads price elements on the page and renders an estimated monthly financing payment underneath each one. Customers can see what they might pay per month before reaching checkout.

CDN assets:

  • CSS: https://ppe.wegetfinancing.com/index.css
  • JS: https://ppe.wegetfinancing.com/index.js

Plain HTML Integration

Section titled “Plain HTML Integration”

Three elements are required in your page.

1. CSS — in <head>

Section titled “1. CSS — in <head>”
<link href="https://ppe.wegetfinancing.com/index.css" rel="stylesheet" />

2. JavaScript — before </body>

Section titled “2. JavaScript — before </body>”
<script src="https://ppe.wegetfinancing.com/index.js"></script>

3. Configuration — in <head>

Section titled “3. Configuration — in <head>”

Option A — inline script:

<script>
window.ppeConfiguration = {
  priceSelector: ".price",      // CSS selector for price elements (required)
  token: "YOUR_ACCESS_TOKEN",   // Merchant access token (required)
  minAmount: 1000,              // Minimum price to display widget (required)
  debug: false,
  branded: true,
  customText: "or just",
  hover: true,
  fontSize: 90,
  position: "center"
};
</script>

Option B — external JSON file:

<link id="wgf-estimator-config" href="/config.json" />

The id must be exactly wgf-estimator-config. The JSON file contains the same fields as the inline config object.

Configuration Options

Section titled “Configuration Options”
OptionTypeRequiredDefaultDescription
priceSelectorstringYes—CSS selector targeting price elements on the page
tokenstringYes—Merchant access token (from backoffice: Integration → Conversion Boosters)
minAmountnumberYes—Widget is hidden when product price is below this value
debugbooleanNofalseLog debug messages to the browser console
brandedbooleanNotrueShow WeGetFinancing branding in the widget
customTextstringNo—Text shown before the monthly payment amount
hoverbooleanNofalseAlso open the widget popover on mouse hover (in addition to click)
fontSizenumberNo90Font size (in %) of the estimation message. Has no effect in collection pages.
positionstringNo"center"Alignment of the message block: "flex-start", "center", or "flex-end"

CSS Customization

Section titled “CSS Customization”

Override the widget’s default colours using these selectors:

/* Text above the FICO select input */
.wgf-ppe .ant-typography {
  color: #333;
}


/* Estimation message below the price and widget footer */
.wgf-ppe {
  color: #333;
}


/* Accent (blue) text */
.wgf-ppe .blue-text {
  color: #3973b9;
}

Platform-Specific Setup

Section titled “Platform-Specific Setup”

For platform-specific installation guides, see the Merchant Plugins section: