This page demos pmdra-embed.js — the one script tag plus one
<div> per vehicle a non-PM (third-party) dealer site needs to embed the
PMDRS payment widget. Everything below is driven by the single script tag in this page’s
“Add JavaScript” section, which now sets data-dealer-code="45558" as the
page-wide default account — the preferred way to identify a dealer for new
integrations (their own OEM/franchise code, resolved into a real PM site token
server-side).
One script tag, bare data-vin divs. This group overrides the page’s
dealer-code default with its own data-site-token="starrmotorschryslerdodgejeep",
showing how a single page can mix more than one dealer account. Photo/title below are
dummy placeholders (not real listing data) — just to show how a real card would wrap
the widget.
Click this to simulate what a real listing page does on its own when a filter/sort/
pagination click rebuilds its DOM: it wipes the listing above and replaces it with a
different vehicle set — one VIN repeats (cache hit, no new payment fetch), one is
brand new (cache miss, fresh fetch), one from the original set is dropped.
Nothing on this page calls pmdra-embed.js to refresh anything —
the widget notices the DOM change and re-renders entirely on its own, via a
MutationObserver it registers internally. Watch the log below (or open DevTools
Console/Network to see it for real).
data-mode override — same vehicle, VDP vs. VLP
Both boxes below use the exact same VIN and the exact same dealer identifier — this
page’s script-tag default, data-dealer-code="45558" (payneriochryslerdodgejeepram)
— with zero identifier override. Note the first box still explicitly sets
data-mode="vdp": since both containers resolve to the same account, without
it they’d be grouped together as one 2-vehicle listing (mode is decided per resolved
account-id group, not per container) and BOTH would render as listing widgets instead of
showing a true VDP-vs-VLP contrast. This is exactly the nuance to know before mixing
modes for the same dealer on one page.
data-mode="vlp"
Known, accepted gap on this account: payneriochryslerdodgejeepram is still
onlyAdmins:true / placeholder-rate internally — it renders here only because of a
deliberate, temporary tradeoff (see the pmdra-embed.js header comment), not because it’s
ready for real customer traffic.
Add this once, anywhere on the page:
<script src="https://drs.dev.pixelmotiondemo.com/dist/js/pmdra-embed.js"
data-dealer-code="YOUR_DEALER_CODE"></script>Then, one div per vehicle — for a single-vehicle page (full deal page):
<div class="pixelmotiondra" data-vin="1FTFW1E5XNFA12345"></div>…or several divs for a listing page (this automatically becomes a listing widget, one bulk request for every vehicle, not one request per card):
<div class="pixelmotiondra" data-vin="1FTFW1E5XNFA12345"></div>
<div class="pixelmotiondra" data-vin="2C3CCARG3MH649453"></div>
<div class="pixelmotiondra" data-vin="3N1CN8BV8LL870448"></div>| Attribute | Where | Purpose |
|---|---|---|
class="pixelmotiondra" |
every container | Required marker. Without it the div is silently ignored — on purpose, so this script never touches an unrelated data-vin your own page might already use for something else. |
data-vin="..." |
every container | The only vehicle data you provide. Make/model/trim/price/condition/mileage/photo/label are all resolved server-side. |
data-dealer-code="..." |
the <script> tag (page default) or a container (override) | Preferred way to identify the dealer account — your own OEM/franchise dealer code. |
data-site-token="..." |
same as above | Already know the real PM site token? Use it directly — skips the dealer-code lookup entirely. |
data-mode="vdp" |
a container | Force this one vehicle into a standalone full deal page, even if it shares a dealer account with other listing-page containers on the same page. |
data-mode="vlp" |
a container | Force this one vehicle to render as a listing-style widget instead of the default full deal page (see the demo above). |
Full reference, known limitations (no auto re-render unless the host page’s own DOM
actually adds/removes a .pixelmotiondra[data-vin] node — see the
auto-refresh demo above for exactly what does and doesn’t trigger it), and reCAPTCHA
notes: see pmdra-embed-integration-guide.md in the pm-drs-offerlogix repo.
While great effort is made to ensure the accuracy of the information on this site, errors can occur. Please verify all pricing information with a customer service representative. This is easily done by calling us or visiting us at the dealership.
Customer may not qualify for ALL Rebates shown. Some rebates are stackable and others can and cannot be combined. See Dealer For Complete Details.
Save your favorite vehicles for later viewing on your desktop or mobile devices.
Keep track of all the vehicles you've viewed for a better car shopping experience.
Narrow your search by comparing your favorite vehicles.
