> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pingtree.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Click Listing iFrame
> Embed this Click Listing iFrame to display offer listings dynamically. Ensure that the page URL contains a transaction_id generated via Pingtree for proper functionality. The iFrame will automatically communicate the URL parameters to display relevant offers.
## 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](/api-explore/offer-campaign/click-listing-api), you embed a single `
```
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
| Requirement | Details |
| ---------------------------- | -------------------------------------------------------------------------------- |
| `transaction_id` in page URL | Must be present as a query parameter on the parent page |
| iFrame source URL | Obtain from Pingtree dashboard — unique per click listing configuration |
| HTTPS | Both the parent page and iFrame source should be served over HTTPS |
| Browser JavaScript | `postMessage` 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=`. 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
```html theme={null}
Your Personalized Offers
Here are your matched offers
```
## Technical Details
| Detail | Value |
| -------------------- | ------------------------------------------------------------------------ |
| Communication method | `window.postMessage` — cross-origin safe |
| Data sent to iFrame | `{ s: window.location.search }` (full query string of parent page) |
| Supported parameters | `transaction_id`, `cid`, `pid`, and all standard tracking parameters |
| Responsive behaviour | Set `width="100%"` for full-width display; height must be set explicitly |
| Click tracking | Handled 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
| Issue | Resolution |
| ----------------------------- | -------------------------------------------------------------------------------- |
| Offers not loading | Confirm `transaction_id` is present in the parent page URL |
| Blank iFrame | Check browser console for CORS errors; verify the iFrame `src` URL is correct |
| `postMessage` not firing | Ensure JavaScript is enabled and the `onload` attribute is not stripped by a CMS |
| Mixed content warning | Serve both the parent page and iFrame over HTTPS |
| Offers appear but clicks fail | Do not modify the offer click URLs; they are managed by Pingtree |
For further assistance, contact your Pingtree support team or account manager.