​
Overview

The Click Listing iFrame allows seamless embedding of offer listings on your webpage. It dynamically loads offers based on the transaction_id, which must be generated via Pingtree.

​
iFrame Code

Use the following iFrame code snippet to integrate the Click Listing: 
<iframe 
    src="http://localhost:3002/iframe/66b263223ebfc5d22f662814"
    width="100%" height="100%" frameborder="0" scrolling="yes"
    onload="(()=>{this.contentWindow.postMessage({s:window.location.search},'*');})()"
></iframe>

​
Requirements

  • The parent page URL must contain a valid transaction_id generated via Pingtree.
  • Ensure the iFrame source URL is accessible from your domain.
  • The iFrame dynamically sends URL parameters to load relevant offers.

​
Implementation Steps

  1. Generate transaction_id: Obtain a transaction_id through Pingtree.
  2. Embed the iFrame: Add the provided iFrame code snippet to your webpage.
  3. Ensure URL Parameters: Verify that the transaction_id is present in the page URL.
  4. Test the Integration: Load the page and confirm that offers display correctly.

​
Technical Information

  1. iFrame Communication: The iFrame uses postMessage to send the URL search parameters to the embedded content.
  2. Security Considerations: Ensure the iFrame is loaded from a trusted source to prevent security risks.
  3. Cross-Origin Policy: If the iFrame is hosted on a different domain, ensure that the server allows cross-origin resource sharing (CORS).
  4. Responsive Design: The iFrame is set to width=“100%” and height=“100%”, making it adaptable to different screen sizes.

​
Website Integration Guidelines

  • Page Structure: Embed the iFrame in a section with adequate space to display the offer listings.
  • SEO Considerations: Since content inside the iFrame is not indexed by search engines, ensure relevant metadata is present on the parent page.
  • Performance Optimization: Avoid unnecessary scripts that may slow down the iFrame loading.
  • User Experience: Ensure smooth scrolling is enabled (scrolling=“yes”) for better usability.

​
Troubleshooting

  • If offers are not loading, check if the transaction_id is present in the URL.
  • Ensure there are no restrictions blocking the iFrame content.
  • Verify that the Pingtree system is generating valid transaction IDs.
  • Check browser console for errors related to cross-origin policies or network failures.
For further assistance, contact your support team.