# Share

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.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FliDE1Eh3Z6lBvKmbUP1G%2FScreenshot%202025-10-03%20at%2017.15.07.png?alt=media&#x26;token=1dbb78f4-2db1-424f-9a9c-52738dc90854" alt=""><figcaption><p>Where we find the configurator's source link (src)</p></figcaption></figure>

**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>
```

**Sidebar Checkboxes**

Users can enable or disable sidebar buttons by selecting the available checkboxes:

* **Dark theme** - Users can switch the frontend UI into dark mode
* **Show dimensions** - Allow option to show dimensions when *Numeral* blocks are used. More information about how to properly set 'Show dimensions' here: [Numeral](https://docs.simplio3d.com/learning-the-app/products/create-options/numeral).
* **Enable sidebar** - Users can turn off/on the entire sidebar
* **Enable AR** - Allow configurator users to generate QR for Augmented Reality

### Video About Embedding Configurators

{% embed url="<https://youtu.be/qVJTpd4SENI?si=ARGxwkX1gaJYSH1n&t=729>" %}