Framing Studio Iframe Integration

Modified on Mon, 5 Jun, 2023 at 9:08 AM

If you do not wish to send your customers directly to the URL we set up for your account but want to give them full access, it is possible to integrate your framing studio to any web page using an iframe, see this example:

Navigation is included so your customers will be able to go to your website, upload images, design custom items, create an account, login, and place orders for you to review.

Step 1. Include the following code inside the <head></head> tags of the page. This code will make the height of the iframe adapt to the content. Replace ACCOUNT_URL by your account URL.

<script src="https://ACCOUNT_URL/ext/iframeResizer/iframeResizer.min.js" type="text/javascript"></script>

<script language="javascript">
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
</script>

Step 2. Include the following code where you want to load your framing studio. Do not forget to replace ACCOUNT_URL here as well.

<style>iframe{width:100%}</style>
<iframe id="fstudio" scrolling="no" style="border: none; min-height: calc(100vh);" onload="iFrameResize({autoResize:true,checkOrigin:false})"></iframe>
<script>document.getElementById("fstudio").src = "https://ACCOUNT_URL/connect_page?parentWidth=" + myWidth + "&parentHeight=" + myHeight;</script>