Embedding adds a 3DtoMe project to your website, blog, online store or third-party platform with an iframe. Visitors orbit, zoom and open it in AR without leaving your page.

How can I embed my 3DtoMe model?

In the 3DtoMe web viewer, open a project you own, click Share, choose Embed and click Copy embed code. Paste the code into your website's HTML. The 3DtoMe apps also give you the embed code. Embedding needs the Pro plan, and Anyone with the link can view must be on.

Can I customize what the embedded model shows?

Yes. The Options in the Share window are Show Comments, Play Animation, Show Annotation, Show background and Show dimension. Set them before you copy the code. Each option is a parameter in the embed code, so you can also edit the code by hand.

Embedding 3DtoMe models

Learn how to embed your 3DtoMe models in your website, blog, online store or third-party platform.

Introduction

You can show your 3DtoMe projects inside your website, blog, online store or third-party platform. The embed is an iframe that loads the project from embed.3dto.me. You choose what it shows, such as annotations, dimensions or the background.

Here's an example of an embedded 3DtoMe model.

How to embed

In the web viewer

Sign in at viewer.3dto.me and open a project you own.
Click Share in the top right corner.
Choose Embed.
Set the Options and, if you want, the Allowed domains in the Security box.
Click Copy embed code.
Paste the code into your website's HTML.

Share window Embed step with the iframe code, the Copy embed code button, Options and Security with Allowed domains

Model: MaterialsVariantsShoe by Shopify, CC BY 4.0

The code looks like this:

<iframe src="https://embed.3dto.me/A1B2C3D4?a=1&b=1&s=1" style="border: 0;width:100%;height:600px;"></iframe>

The embed fills the width of its container and is 600 pixels high. Change the width and height in the style attribute to fit your page.

In the 3DtoMe apps

Open the 3DtoMe app, on the device you want, and select the model you want to share.
Click the Share icon. On iOS, tap options and then Embed model.
Copy the embed code and paste it into your website's HTML code.

Requirements

Embedding needs the Pro plan. If your plan ends or drops below Pro, the embed shows a "not found" page. See Whose plan counts.
Turn on Anyone with the link can view in the Share window. When it is off, the embed shows a "not found" page.
A password-protected project asks visitors for the password inside the embed. Password protection needs the Corporate plan.
Gaussian splat projects don't display in an embed. Share them with the direct link to the web viewer instead. See Gaussian splats.
To stop the embed from loading on other websites, fill in Allowed domains.

Customize the viewer

The Options in the web viewer's Share window set what the embedded viewer shows. Each option you turn on adds a parameter to the address in the embed code:

Option	Added to the link	On by default	What visitors see
Show Comments	`c=1`	No	Every comment marker is visible when the project opens. It applies only when the project has comments.
Play Animation	`p=1`	No	Model animations start playing when the project opens.
Show Annotation	`a=1`	Yes	Every annotation label is open when the project opens.
Show background	`b=1`	Yes	The project's background is visible. It applies only when the project has a background.
Show dimension	`s=1`	Yes	The model's dimensions are visible.

The options are part of the embed code. To change them on a page that is already live, copy a new embed code or edit the parameters in your website's HTML.

A 3D sneaker embedded in a store's product page, with annotations, dimensions, and the View in AR and fullscreen buttons

Model: MaterialsVariantsShoe by Shopify, CC BY 4.0

In the 3DtoMe apps, you customize the embedded viewer in 3DtoMe for macOS. The app adds every option you set there to the embed code in the same way.

Next Steps

Learn how to embed your model on your websites.
Limit which sites can embed your model with Allowed domains.
Discover how to share your model with a link.

Still have questions?

If you still have questions, please reach out to our support team for assistance.

Contact Support