Embed 3D interactive product models on your website

You can easily showcase your 3D interactive product models directly on your website using simple embed codes generated by Martech3D | Engine.


It’s fast, seamless, and works with all modern websites and CMS platforms.



The Native Embed Script is our recommended integration method.


Unlike iframes, the native embed loads the viewer directly into your page’s structure, providing:


  • Faster load performance
  • Better responsiveness and layout control
  • Improved SEO compatibility
  • Cleaner integration with your website styling
  • Greater flexibility for advanced implementations

This is the best option for production websites.


🧩 How It Works


Once you’ve uploaded and configured your 3D product model in Martech3D | Engine:


  1. Navigate to the Products tab
  2. Click the three-dot menu on your product
  3. Select Share
  4. Choose Copy Native Embed Code


From there, you’ll see configuration options including:

  • Auto-rotate
  • Show title
  • Show description
  • Show QR code
  • Show hotspots
  • Viewer dimensions (Full width, Large, Medium, Small, Custom)


After configuring your settings, click Next: Installation to access your embed code.


⚙️ Implementation Steps


The native embed requires two parts:


1️⃣ Add Script to Your Website <head>  

Add this script once to your global website header:

<script src="https://martech3d-customer-portal.s3.eu-west-2.amazonaws.com/cdn/embed/martech3d-embed-viewer-v1.js"></script>

This loads the Martech3D viewer library.


2️⃣ Add the Model Embed Code to Your Page <body>  


Paste the generated embed snippet where you want the 3D model to appear on your page.

Example:

<div class="martech3d-embed" data-model="your-model-id"></div>

(Your actual embed code will be generated automatically inside the Engine.)


Once added, your 3D model will load fully interactive and optimised.


Alternative Method: iframe Embed


If your platform does not allow script embeds, you can use the iframe method instead.


🧩 How It Works


  1. Navigate to the product
  2. Select Share
  3. Choose Copy iFrame Embed Code
  4. Paste the snippet into your website HTML



Example:


<iframe src="https://www.viewer.martech3d.com/robot?consent_banner=false&qr_code=false" width="800" height="600" frameborder="0" allowfullscreen></iframe>


The 3D model will appear fully interactive and web-optimised, hosted by our cloud platform.


⚙️ Key Features of Embedded Models


  • Full 360° spin, zoom, and interaction
  • Mobile- and desktop-compatible
  • Fully hosted and maintained by Martech3D
  • Always up to date — changes made in the Engine sync automatically
  • No installation or plug-ins required

💡 Tips for Best Results


  • Use the Native Embed method wherever possible for best performance
  • Avoid placing too many models on a single page to maintain fast load speeds
  • Add explanatory copy or a call-to-action near the viewer
  • Ideal for product pages, landing pages, portals, and training hubs

🌐 Supported Platforms


Both embed methods work with most modern CMSs and website platforms, including:


  • WordPress
  • Webflow
  • Shopify
  • HubSpot
  • Wix
  • Squarespace
  • Custom HTML websites

If your platform allows custom scripts, use the Native Embed.


If it only supports iframe blocks, use the iframe method.


Need help embedding your models or want advice on layout best practices?

Contact our support team - we’re happy to help.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.