PPE Widget

WeGetFinancing offers on-site tools to promote financing before checkout, all served from the PPE distribution and configured with your merchant access token — found in the partner backoffice under Integration → Conversion Boosters (distinct from the Merchant API HTTP Basic credentials).

• The widget — one script that shows shoppers their financing options. It can place an estimated monthly payment beside every price on the page, and it opens a financing lightbox from any link or button.
• The promotional banner — a banner that surfaces financing on the page types you choose and opens the widget.

Both are plain <script> tags from our own domain — no package to install. On Shopify you can instead add them through the WeGetFinancing app (see Platform-specific setup).

Build your snippet — no code

The quickest way to add the widget is the WeGetFinancing widget builder — no coding required:

1. Enter your merchant access token. The copied tag uses whatever is in the token field, so a tag without your own token will not work on your site. The builder’s Where do I find this? link points to your token in the partner backoffice.
2. Pick your options — layout, amount, destination, and so on. (The builder has separate generators for the promotional banner and a plain link, too.)
3. Watch the live preview update as you choose. It runs the real snippet, so what you see is exactly what your page gets.
4. Copy the finished <script> tag and paste it into your page.

This builder generates a production snippet. To build and test a sandbox snippet, use the sandbox builder instead. Prefer to write the tag by hand? The full data-wgf-* reference is in Widget options below.

Live demos

See the widgets running live (sandbox) — no setup required:

• Widget demos index
• Storefront demo — a mock product page with the widget and the promotional banner.

---

The widget

A single script tag — no separate stylesheet. The styles are inlined, so it works even on hosted platforms that allow only a bare script tag.

<script
  src="https://ppe.sandbox.wegetfinancing.com/widgets/wgfwidget.js"
  data-wgf-token="YOUR_ACCESS_TOKEN"
  data-wgf-price-selector=".price"
  data-wgf-min-amount="300"
></script>

That one tag places an estimated monthly payment beside every element matching data-wgf-price-selector. Each estimate quotes the price it sits beside, and clicking it opens a financing summary.

Open a lightbox from a link or button

Any element carrying data-wgf-estimator opens the estimator over the current page. Add data-wgf-amount to quote a specific value:

<a href="#" data-wgf-estimator data-wgf-amount="2400">See your financing options</a>

Clicks are delegated from the document, so triggers added later — by a theme, an app, or an infinite-scroll collection page — work with no extra wiring.

Open it from your own code:

window.WgfEstimator.open({ amount: 2400 });
window.WgfEstimator.close();

If you want the lightbox and no estimates beside your prices, add data-wgf-price-tags="false" to the script tag and leave out data-wgf-price-selector.

The tag is the configuration

Every option is a data-wgf-* attribute on the script tag, spelled in kebab-case: minAmount becomes data-wgf-min-amount. That is the one way to configure a new integration, and the only form that works on hosted platforms that permit a bare script tag and nothing else.

An integration that already sets window.ppeConfiguration keeps working unchanged. The tag reads that global only when it carries no data-wgf-* attributes — a tag with any attribute reads those alone, never a mix of the two. Put every setting on the tag, or leave them all in the global. With data-wgf-debug="true" the console reports when a global was set aside because the tag carried attributes.

Widget options

Option	Type	Default	Description
token	string	required	Merchant access token
priceSelector	string	—	CSS selector for the price elements. Required to show estimates beside prices; omit it for a lightbox-only integration
minAmount	number	—	Required when showing estimates beside prices — the price widget shows nothing without it. No estimate is shown below this amount
amount	number	2000	The value quoted where there is no price element — the lightbox opened from a link, and the destination page. Beside a price, the price itself is always used
merchantName	string	—	Woven into the lightbox copy
layout	string	classic	classic, compact or full (see below)
destination	string	modern	Where the “More details” link sends the shopper, or your own page’s URL (see below)
containerSelector	string	—	Put the estimate inside this element instead of at the price
placement	string	inside	inside the price element, or after it as a sibling
priceTags	boolean	true	false shows no estimate beside any price (lightbox only)
applyNow	boolean	false	Add a direct link to the pre-filled loan form. Requires productNameSelector
productNameSelector	string	—	CSS selector for the product-name element. Required when applyNow is set
heroVertical	string	—	Bundled hero image matched to your category; also sets the hero on the “More details” page (see below)
heroImageUrl	string	—	Absolute http/https URL of your own hero image for the full layout; overrides heroVertical (see below)
logoUrl	string	—	Your logo for the hero, as an absolute URL. Never read from the query string
branded	boolean	false	Show “WeGetFinancing” in the estimate
hover	boolean	false	Open the summary on hover as well as on click
discountedOnly	boolean	false	Show estimates only beside prices that carry a discount
customText	string	or as low as	Text shown before the monthly figure
fontSize	number	90	Estimate text size, as a percentage of the price’s own size
position	string	flex-start	Alignment of the estimate text: flex-start, center or flex-end
debug	boolean	false	Explain decisions in the console

As data- attributes these become data-wgf-token, data-wgf-min-amount, data-wgf-price-selector and so on. Booleans may be supplied as strings — templating engines stringify everything. The environment is inferred from the script’s host, so you do not normally set it.

Layout

One script draws every experience, and layout picks which:

layout	What the shopper sees
classic	The panel the PPE has always shown, anchored under the price — the default
compact	A small financing summary modal
full	The full multi-step financing calculator

classic is the default, so a page that names no layout keeps the presentation the PPE has always shown. Switching is a configuration change, not a different script:

<script
  src="https://ppe.sandbox.wegetfinancing.com/widgets/wgfwidget.js"
  data-wgf-token="YOUR_ACCESS_TOKEN"
  data-wgf-price-selector=".price"
  data-wgf-min-amount="300"
  data-wgf-layout="compact"
></script>

Where the estimate goes

By default the estimate is placed inside the price element. Two options change that, and they do not combine — containerSelector names where the estimate goes, so placement is ignored when both are set.

You want	Set
The estimate inside your price element	nothing; this is the default
The estimate immediately after the price	placement: after
The estimate in an element of your own	containerSelector: .estimator

placement says which element the estimate belongs to; position aligns the text within the estimate itself.

Where “More details” sends the shopper

Every layout has a “More details” link. destination sets where it goes:

Value	Where the shopper lands
modern	The financing page — the estimate, the hero and the FAQ (default)
legacy	The previous financing page
your own URL	An absolute http/https URL of a page on your site

For your shopper’s safety, destination, heroImageUrl and logoUrl are never read from the page’s query string — a URL anyone can write must not be able to point your “More details” link or place an image on your page.

Hero image

The full layout shows a hero image; the classic and compact layouts do not (their header is a white strip with the WeGetFinancing logo).

• heroVertical — a bundled image matched to your category. It also travels with the “More details” link, so it sets the hero on the financing page the shopper lands on. Industry presets include automotive-services-accessories, baby-equipment, computer-high-tech, dental-health-services, diy-home-improvement-01, fashion, fitness-equipment, furniture, home-appliance, jewelry, musical-instruments, outdoor-living-and-garden, outdoor-sports-equipment, photography-video-equipment and vet-and-pet-services, alongside generic choices such as generic-bnpl, shopping-bags, shopping-cart and couple-unboxing.
• heroImageUrl — an absolute http/https URL of your own image for the full layout. It is not carried to the “More details” page — image URLs are never passed through the link — so use heroVertical to set that page’s hero.

heroImageUrl overrides heroVertical where the widget draws its own hero. Set neither and the shopper sees a generic image.

The destination page

Link to a hosted financing page from a banner, an email, or a text link:

https://ppe.sandbox.wegetfinancing.com/widgets/?token=YOUR_ACCESS_TOKEN&amount=2400&merchantName=Northfield%20Home

It accepts the lightbox options — token, amount, minAmount, merchantName, heroVertical and the like — as query parameters. destination, heroImageUrl and logoUrl are never read from the URL, for the safety reason above.

---

The promotional banner

A banner that surfaces financing on the page types you choose and opens the widget:

<script
  src="https://ppe.sandbox.wegetfinancing.com/widgets/banner.js"
  data-wgf-token="YOUR_ACCESS_TOKEN"
  data-wgf-pages="product,collection"
  data-wgf-action="estimator"
  data-wgf-title="Flexible financing available"
  data-wgf-subtitle="Check your options in under a minute. No impact on your credit score."
></script>

Every option is a data-wgf-* attribute on the tag, spelled in kebab-case — delayMs is data-wgf-delay-ms. There is no configuration global for the banner.

Banner options

Option	Type	Default	Description
token	string	required for action: estimator or page	Merchant access token
pages	string[]	product,collection	Where the banner shows: home, product, collection, cart, checkout, other (comma-separated)
page	string	detected	Declare the page kind when detection can’t read your storefront
action	string	none	What the banner does: estimator, page, url or none (see below)
url	string	required for action: url	A page on your own site — a path like /financing, or a full URL on the page’s exact origin (see below)
title	string	”Flexible financing available”	Headline
subtitle	string	see default	Supporting line
campaigns	JSON	[]	Per-product messages (see below)
delayMs	number	3000	Wait before appearing
durationMs	number	0	Auto-hide after this long; 0 means until dismissed
oncePerSession	boolean	true	Show at most once per browsing session
position	string	bottom	bottom or top
logoUrl	string	—	Logo in the closing line
debug	boolean	false	Explain decisions in the console

Booleans may be supplied as strings. pages is a comma-separated list. Shopify, WooCommerce and BigCommerce pages are detected automatically; otherwise set page explicitly.

Banner actions

action chooses what the banner does:

• estimator — opens the financing widget (lightbox). The usual choice when you set a token.
• page — opens our financing page in a new tab, for the purchase the page is about. Needs a token.
• url — links to a page on your own site: a path like /financing, or a full URL whose origin exactly matches the page’s — the same scheme, host (www. counts) and port. It opens in a new tab (rel="noopener noreferrer"). A URL on any other origin is ignored, and the banner does not show — the reason is logged under debug.
• none — a reminder only, with no action.

Campaigns

Per-product messages, written as JSON in single quotes so the JSON’s own double quotes need no escaping:

data-wgf-campaigns='[{
  "productIds": ["7928008015914", "7928008933418"],
  "title": "Special financing available on this laptop",
  "subtitle": "Get it now. Pay later."
}]'

Write product ids as quoted strings — Shopify’s ids are larger than JavaScript can hold exactly, and an unquoted number is rounded before the banner sees it. A campaign message shows wherever its product appears, regardless of the pages list.

---

Already using the classic PPE (index.js)?

Nothing changes. The classic PPE loader — index.js with your window.ppeConfiguration — keeps working exactly as it always has.

To move to the new widget and keep the same look, point the script at wgfwidget.js and set layout: classic. Keep the tag free of data-wgf-* attributes so your existing window.ppeConfiguration is still read:

<script>
  window.ppeConfiguration = {
    token: 'YOUR_ACCESS_TOKEN',
    priceSelector: '.price',
    minAmount: 300,
    layout: 'classic',
  };
</script>
<script src="https://ppe.sandbox.wegetfinancing.com/widgets/wgfwidget.js"></script>

---

Styling

Theme the full estimator and the banner with CSS custom properties — set these rather than targeting the estimator’s internal class names, which are not a public API and will change:

.wgf-est {
  --wgf-blue: #3973b9;
  --wgf-navy: #12261a;
  --wgf-radius: 8px;
  --wgf-font: 'Your Brand Font', system-ui, sans-serif;
}

.wgf-promo {
  --wgf-promo-from: #0a7d3c;
  --wgf-promo-to: #14b356;
}

The classic layout (the default) exposes stable CSS hooks you can override to match your theme — the panel root .wgf-ppe and, within it, .blue-text, .big-text and .small-text:

.wgf-ppe { color: #12261a; }
.wgf-ppe .blue-text { color: #3973b9; }

---

Platform-specific setup

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

• Shopify — App Block / App Embed via the WeGetFinancing Messaging app
• Manual / Custom HTML
• BigCommerce, WooCommerce, Adobe Commerce (Magento) — legacy, no longer supported