How to embed a 3D model on your website (WordPress, Shopify, Wix and more)
Open the model, click Embed beside Share, copy one line of code and paste it into an HTML or Embed block. Works on WordPress, Shopify, Wix, Squarespace, Webflow and Framer.
To embed a 3D model on your website, open the model in MeshMarkup, click Embed (beside Share, top right of the stage) and copy the code. Paste it into an HTML, Embed or Custom code block on your page. Your visitors turn the model, zoom in and look underneath, on a phone or a computer, and the embed always shows the newest version.
Embed a model
Open the model
From Models. If you're in the free viewer without an account, Embed there asks you to create a free one, brings the model with you, and opens it with the Embed panel showing.
Click Embed
The panel has two tabs: Embed code and Public page. On Embed code, click Get the embed code.
Choose how it looks
Size: Fit the width (it fills the space on your page, at the height you set) or Fixed. Background: Scene, White or Transparent (your page shows behind the model). Turn slowly until touched makes it rotate gently until a visitor takes hold of it. Show the controls is off at first, so your visitors see just the model: they can still drag to turn it and pinch or scroll to zoom, and an animated model plays by itself. Switch it on to add the toolbar, the zoom buttons and, for animations, the play bar.
Copy the code
Click Copy code. It's one line of standard HTML, an iframe.
Paste it into your site
See where to paste it on each platform below.
Where to paste it
| Platform | Where |
|---|---|
| WordPress, WooCommerce | A Custom HTML block |
| Shopify | In the product description, switch to HTML with the <> button and paste it, or add a Custom Liquid block to the template |
| Wix | |
| Squarespace | A Code block |
| Webflow | An Embed element |
| Framer | An Embed component |
| Anything else | Wherever the editor accepts HTML |
The embed loads when it scrolls into view, so the rest of your page loads first.
What each plan includes
| Free | Solo | Studio and Pipeline | |
|---|---|---|---|
| Embeds and public pages | Yes | Yes | Yes |
| Views a month | 200, across all your embeds and pages | Fair use | Fair use |
| “Powered by MeshMarkup” | Always shown | Can remove | Can remove |
| Viewers can download the file | No | If you switch it on | If you switch it on |
| 3D configurator in the embed | No | No (links and pages only) | Yes |
| Only on your own websites | No | No | Yes |
When a Free studio has used its 200 views, its embeds and pages show a short "taking a break" message until the 1st of the next month. The panel shows how many views you've used.
Only on your own websites
On Studio and Pipeline, switch on Only on my websites and list the addresses, one per line (for example shop.example.com). Browsers then refuse to show the embed on any other site.
Stop an embed
Click Switch the embed off at the bottom of the panel. It stops showing everywhere the code was pasted, straight away. Switch it on again and the same code works again.
Common problems
- The box is empty on my site. Check you pasted into a block that accepts HTML, not a text block. Some editors only show embeds when the page is published or previewed.
- It says the model is taking a break. Your Free plan has used this month's 200 views. They come back on the 1st, or upgrade for fair use.
- It doesn't show on my other site. If you switched on Only on my websites, add that site's address to the list.
Was this guide helpful?
Related guides
Get feedback on the model, not on a screenshot
Upload a model, send one link, and your client clicks the exact spot. Free to start — no card.