[FINANCIAL INSTITUTIONS] Embed an Acquisition Page via iframe

An iframe is an HTML element used to embed another HTML document within the current page. Embedding an acquisition page on your website using an iframe enables you to maintain a seamless brand experience while leveraging the capabilities of an acquisition page. This guide walks you through the steps required to implement and optimize the iframe setup.

Prerequisites

• Implementation requires edit access to your website's HTML code.
• Because the acquisition page is hosted on the Dynamic Yield global.serving domain, certain restrictions apply due to browser security policies. Make sure that the iframe is allowed by your content security policy (CSP) settings.

Implement the iframe

Before you start: At this point, you've already discussed the page content requirements with your Dynamic Yield team, who will create your iframe code snippet. Optionally, before you get the code, you can test an iframe on your site before you get . See the Demo section for details.

1. Get the iframe code snippet from Dynamic Yield.
   The code follows this format:
   
2. Customize the iframe code.
   The code you receive is set to use 100% of the page. You can adjust the following properties to customize the iframe to your page: 
   • Size: Set the width and height properties to fit your layout and avoid scrollbars.
   • Border: Set border:none to eliminate the iframe border.
   • Title: Ensure a meaningful title attribute, for accessibility.
3. Add the snippet to the desired location on your website.
   In your website editor or HTML page, locate the spot you want the iframe to be, and paste your code.
4. Test and deploy.
   To ensure the iframe is set up correctly and appears as expected, check the following:
   1. Preview the page on different devices and screen sizes. 
   2. Check that the iframe loads properly and doesn't break the layout. 
   3. If necessary, readjust the height to eliminate scroll bars.
   4. Make sure that all clickable objects open in a separate tab (and not within the iframe).

   When everything is working as you want it to, save and exit.

Demo

If you want to test an iframe implementation on your website, use this demo code:

<iframe 
  src="https://serving.global/ap/M4XgHA7AnAjDAMBmA3AYxHAbFCAmTyALhjNngKxA/lpodemoiframe" 
  width="100%" height="250" frameborder="0" allowfullscreen></iframe>

The following campaign will appear on your site, and the call to action (Apply Now) will lead to the Dynamic Yield website:

Troubleshooting

Issue: iframe content doesn't load

• Ensure the URL is correct and publicly accessible.
• Check if your website's CSP settings allow embedding from our domain.

Issue: iframe height is too short or cut off

Manually adjust the height in the iframe tag

Issue: UTM parameters are not captured

• Confirm that the URL structure includes the correct tracking parameters.
• Check your analytics tool to ensure it recognizes the query string.