Resizing the Iframes
Resize Script
In testing your integration, you may notice that the Iframe's fixed size is sometimes too large for some content, leaving vertical white space. To handle this, we've developed a piece of JavaScript that automatically resizes the height of the Iframe down based on its content. Setting this up takes four simple steps:
Step 1: Add integrate.js script
In the <head> of each page containing a Spektrix Iframe that needs resizing enabled, include the following script tag. You will need to replace customdomain with your custom domain, and replace clientname with the Spektrix client name you are integrating with:
<script
type="text/javascript"
src="https://customdomain/clientname/website/scripts/integrate.js"
></script>
Step 2: Add parameter resize=true
Add the query string parameter ‘resize=true’ to the Iframe source url embedded into the page. Additionally add a name and id attribute to the Iframe with value SpektrixIFrame and inline styling with a width and height as below;
<iframe
name="SpektrixIFrame"
id="SpektrixIFrame"
frameborder="0"
src="https://customdomain/clientname/website/Iframe.aspx?resize=true"
style="width: 100%; height: 1000px;"
>
</iframe>
If the IFrame you are using requires additional parameters to operate, such as chooseseats needing an EventInstanceId value, you need to ensure the resize=true parameter is the final parameter on the URL. For example, ChooseSeats.aspx?EventInstanceId=61602&resize=true
Step 3: Check the height is in px
It is important that the height is set in pixels. It should not be set in relative units, such as vh or em, or in %. If it is not set in pixels, the resize won’t work.
If the iframe sits within another element, for example within a <div>, that element also needs a height set in pixels, or no height set at all.
Step 4: Blank Page
In the Website Admin interface, set ‘Website Javascript Options’ to point to a fully blank html file on your domain. Ideally this page should set cache headers to tell the client to cache the page forever. The file needs to be completely blank - this means the page cannot include headers, footers or any content.
The resize script handles the height of the Iframe. If you are having issues with the width of the Iframe, this is likely to be caused by the styling of the Iframe element in the parent site.
Minimum Height
There is also an option to set a minimum Iframe size. To do this, include a javascript block in the web page as follows:
<script language="javascript">
var spektrixMinHeight = 300;
</script>
replacing ‘300’ with the minimum height of the Iframe that you would like (in pixels).
Payment Iframe
The height of the payment Iframe is static once it has been styled. If the scroll bar is persisting on the Payment iframe, you can put a min-height onto that iframe reflecting the height it is once the styling is applied.
Scroll
When navigating through the Iframes, you may find that pages do not scroll to the top when changing from one page to another. This behaviour can be forced by adding an additional attribute of onload as below to the Iframe tag (HTML5 support only):
<iframe
language="javascript"
src="..Iframe.aspx?resize=true;"
onload="setTimeout(function(){ window.scrollTo(0,0);}, 100)"
>
</iframe>
If using the Express Checkout Flow, we recommend that you remove the above from the Checkout Iframe due to how express checkout renders from one section to the next.