Click Listing iFrame

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#

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#

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#

For further assistance, contact your Pingtree support team or account manager.