Simplio3D
HomeHelp Center
  • INTRODUCTION
  • GETTING STARTED
    • Create an account
    • Prepare 3D models
  • LEARNING THE APP
    • Dashboard
    • My Account
    • Products
      • New Product
      • Select Layout
      • Add 3D Models
        • 3D Model versions
      • Create Options
        • Default
        • Sections
        • Dropdown
        • Material
        • Checkbox
        • Toggle
        • Thumbnails
        • Arrows
        • Upload
        • Text
        • Numeral
          • Sizing: Keep the proportions
        • Restrictions
          • 'Has one or more variants selected from' type of restriction
          • 'The variant value is between min and max' type of restriction
      • Pricing
        • Pricing formula
        • Variables
        • Add price
      • Add form
        • Add Field
        • Email Settings
          • Gmail
          • Sendgrid
      • Share
      • Product Viewer
    • Materials
      • New Materials
      • Textures
      • SVG
      • Categories
    • 3D Assets
      • Edit 3D Assets
      • Categories
      • File too large
    • Orders
  • Integrations
    • WooCommerce
    • Shopify
    • API Documentation
  • API Reference
    • Partner API
      • Managing Orders
    • Open API
      • Getting Started
      • User Authentication
      • 3D Assets
      • Configurators
      • Contact Form
        • Form Fields
        • Forms
      • Options
        • Options
        • Option Variations
        • Option Restrictions
      • Price Groups
      • Share
      • Materials
        • Materials
        • Material Categories
      • Textures
        • Textures
        • Texture Categories
      • Orders
    • API SDK
  • Other
    • Change Log
Powered by GitBook
On this page

Was this helpful?

  1. LEARNING THE APP
  2. Products

Share

Embedding configurators

PreviousSendgridNextProduct Viewer

Last updated 2 days ago

Was this helpful?

Each configurator built into the platform generates a unique source link (src) from where anyone can access the configurator, in other words from the unique source link anyone can see what you see in the 'Preview' mode. The source link is a long, secure URL and can be used to embed the configurator into a website.

The easiest way to embed the configurator wherever you want is to use HTML code with the source link (src) in it:

<iframe src="[src link]" 
  style="border: none; margin: 0; width: 100%; height: 900px" 
  id="3d-configurator-iframe" 
  scrolling="no" 
  frameborder="1" 
  allowfullscreen > 
</iframe>

In addition to using the HTML iFrame code, you can also use JavaScript alongside it to better define your embedding with more settings.

Example:

<script>  
  const iframe = document.getElementById("3d-configurator-iframe"); 
  const widthIframe = 1200; 
  const heightIframe = 800; 
  const paddingWidth = 0;  
  const paddingHeight = 0; 
  let iframeOrigin = ""; 
  let mobileWidth = 0; 
  let full = false; 
  iframe.style.width = `${widthIframe}px`; 
  iframe.style.height = `${heightIframe}px`; 
  const handleResize = () => { 
   if (!full) { 
     if (iframe.parentNode.clientWidth - paddingWidth <= widthIframe) { 
       iframe.style.width = `${iframe.parentNode.clientWidth - paddingWidth}px`; 
     } else { 
       iframe.style.width = `${widthIframe}px`; 
     } 
   if (iframe.parentNode.clientHeight - paddingHeight <= heightIframe) { 
     iframe.style.height = `${iframe.parentNode.clientHeight - paddingHeight}px`; 
   } else { 
     if (iframe.parentNode.clientWidth - paddingWidth <= mobileWidth) iframe.style.height = `${heightIframe}px`; 
   } 
    } 
   if (iframeOrigin) { 
     iframe.contentWindow.postMessage( 
      { 
       type: "DIMENSIONS", 
       windowW: iframe.parentNode.clientWidth - paddingWidth, 
       windowH: iframe.parentNode.clientHeight - paddingHeight, 
       iframeW: iframe.clientWidth, 
       iframeH: iframe.clientHeight, 
      }, 
      iframeOrigin 
    ); 
   }; 
  }; 
  window.addEventListener("resize", handleResize); 
  handleResize(); 
  window.addEventListener("message", (event) => { 
   if (event.data?.type === "GET_DIMENSIONS") { 
    mobileWidth = event.data?.mobileWidth; 
    iframeOrigin = event.origin; 
    handleResize(); 
   } 
   if (event.data?.type === "FULLPAGE") { 
    if (event.data?.value === true) { 
     full = true; 
     iframe.style.width = "100%"; 
     iframe.style.height = "100%"; 
     iframe.style.position = "fixed"; 
     iframe.style.top = "0"; 
     iframe.style.left = "0"; 
    } else { 
     full = false; 
     iframe.style.width = `${widthIframe}px`; 
     iframe.style.height = `${heightIframe}px`; 
     iframe.style.position = ""; 
    } 
   } 
  }); 
</script>
Where we find the configurator's source link (src)