If you are subscribed to the Framer & Customers plan, you can optionally load your account in an iframe on any page of your website. To make this work, your SimulArt account must first be installed on a subdomain matching your website domain. 




Step 1. Contact us to initiate the custom subdomain installation procedure, there is no charge for the installation, maintenance, and SSL certificate required to secure the URLs.


Step 2. Add the following code inside the <head></head> tags of the page where you will be loading the iframe. This code will make the height of the iframe adapt to the content. Make sure to 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 3. Add this code where you want the design page to be loaded. 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/design?parentWidth=" + myWidth + "&parentHeight=" + myHeight;</script>

In the example above, the home page named design is loaded but you can also load the following pages:

connect_page -> Simplified customer interface without checkout option

connect -> Complex customer interface without checkout option

gallery -> Gallery of images if you offer them

podgallery -> POD Exchange gallery of images if you offer them



You can optionally customize the page appearance of customer pages by adding your own CSS under Menu -> Settings -> Customer Pages CSS Styling.


Prices are displayed by default but if you set "Do you want to display prices to guests?" to "No" under Menu -> Settings -> Customers, no prices will be displayed to customers that are not logged in.