Skip to main content

​
Overview

The Click Listing iFrame is the simplest way to display personalized offer listings on your thank-you or results page. Instead of building a custom offer wall using the Click Listing API, you embed a single <iframe> tag and Pingtree handles the display, click tracking, and redirect logic automatically. The iFrame reads the transaction_id from the parent page URL using postMessage, then dynamically loads the offers matched to that consumer’s lead.

​
iFrame Embed Code

Obtain the iFrame source URL from your campaign settings in the Pingtree dashboard (under Click Listing > Embed Code). Replace the src value below with your specific iFrame URL: 
<iframe 
    src="https://app.pingtree.com/iframe/YOUR_CLICK_LISTING_ID"
    width="100%"
    height="600px"
    frameborder="0"
    scrolling="yes"
    onload="(()=>{this.contentWindow.postMessage({s:window.location.search},'*');})()"
></iframe>
The onload attribute fires as soon as the iFrame loads and sends the current page’s query string (which contains the transaction_id) into the iFrame context via the postMessage API.

​
How It Works

  1. The consumer submits a lead form and is redirected to your results page.
  2. The results page URL contains ?transaction_id=txn_abc123... (and optionally cid, pid, and other parameters).
  3. The embedded iFrame loads from Pingtree’s servers.
  4. On load, postMessage sends the parent page query string into the iFrame.
  5. The iFrame reads transaction_id from the received parameters and fetches the matched offers.
  6. Offers are rendered inside the iFrame; clicks are tracked and redirect consumers to advertiser pages.

​
Requirements

RequirementDetails
transaction_id in page URLMust be present as a query parameter on the parent page
iFrame source URLObtain from Pingtree dashboard — unique per click listing configuration
HTTPSBoth the parent page and iFrame source should be served over HTTPS
Browser JavaScriptpostMessage is used for cross-origin communication; JavaScript must be enabled

​
Implementation Steps

  1. Get your iFrame URL. In the Pingtree dashboard, go to your campaign’s Click Listing section and copy the embed URL for the desired listing.
  2. Add the iFrame to your results page. Paste the embed code into the HTML where you want offers to appear.
  3. Confirm transaction_id is in the URL. After form submission, ensure your redirect URL includes ?transaction_id=<value>. Pingtree typically appends this automatically.
  4. Set dimensions. Adjust width and height to suit your page layout. A minimum height of 400px is recommended for comfortable offer display.
  5. Test end-to-end. Submit a test lead and confirm the results page loads with offers. Check the browser console for any postMessage or CORS errors.

​
Example Results Page URL

https://results.yourdomain.com/thank-you?transaction_id=txn_7f3a2b1c&cid=cmp_9z8y7x6w&pid=src_abc123
The iFrame automatically reads transaction_id from the query string above via window.location.search.

​
Full Integration Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Personalized Offers</title>
</head>
<body>
  <h1>Here are your matched offers</h1>

  <iframe 
    src="https://app.pingtree.com/iframe/66b263223ebfc5d22f662814"
    width="100%"
    height="600px"
    frameborder="0"
    scrolling="yes"
    onload="(()=>{this.contentWindow.postMessage({s:window.location.search},'*');})()"
  ></iframe>
</body>
</html>

​
Technical Details

DetailValue
Communication methodwindow.postMessage — cross-origin safe
Data sent to iFrame{ s: window.location.search } (full query string of parent page)
Supported parameterstransaction_id, cid, pid, and all standard tracking parameters
Responsive behaviourSet width="100%" for full-width display; height must be set explicitly
Click trackingHandled automatically inside the iFrame

​
Security Considerations

  • HTTPS only. Serving the parent page over HTTP while the iFrame is on HTTPS (or vice versa) may cause mixed-content browser warnings.
  • Trusted source. Only embed iFrame URLs generated by the Pingtree platform. Do not modify the src URL.
  • No token exposure. The iFrame does not expose API tokens. Consumer data is fetched securely server-side using the transaction_id.
  • Content Security Policy (CSP). If your site uses a CSP header, add the Pingtree iFrame domain to your frame-src directive.

​
Troubleshooting

IssueResolution
Offers not loadingConfirm transaction_id is present in the parent page URL
Blank iFrameCheck browser console for CORS errors; verify the iFrame src URL is correct
postMessage not firingEnsure JavaScript is enabled and the onload attribute is not stripped by a CMS
Mixed content warningServe both the parent page and iFrame over HTTPS
Offers appear but clicks failDo not modify the offer click URLs; they are managed by Pingtree
For further assistance, contact your Pingtree support team or account manager.