Embed on websites

Put your interactive 3D project inside any website that accepts iframes.

What is embedding?

Embedding places your i3Dify project inside another website. Visitors use your project without leaving the page.

Your project appears inside the page layout
Visitors can drag, zoom and click it, the same as on its own page
No new tab or popup
Works on any site that accepts iframes

Getting the embed code

Open your project in the editor
Go to the Share tab
Set visibility to Unlisted or Public, and save the project
Open the Embed Code section
Press Copy Embed Code
Paste the code into your website

Understanding the code

The code you copy looks like this:

<iframe src="https://i3dify.com/view/your-project-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe>

src: The address of your project

width: How wide the embed is, in pixels or as a percentage

height: How tall it is, in pixels

frameborder: Removes the default iframe border

allowfullscreen: Lets visitors open it full screen

Customizing the size

Change the size so it fits your website:

Full width

With width="100%" the embed fills its container:

<iframe src="..." width="100%" height="600" frameborder="0" allowfullscreen></iframe>

Fixed size

Use pixel values for an exact size:

<iframe src="..." width="800" height="600" frameborder="0" allowfullscreen></iframe>

Keep a shape

To keep a shape such as 16:9 at any width, wrap the iframe in a container:

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe
    src="..."
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
    allowfullscreen
  ></iframe>
</div>

Platform guides

WordPress

Edit your page or post
Add a Custom HTML block
Paste the embed code
Preview and publish

Wix

Open the editor
Click Add (+), then Embed, then Custom Embeds, then Embed a Widget
Paste the embed code
Resize it as needed

Squarespace

Edit your page
Add a Code block
Paste the embed code
Save and preview

Shopify

Go to Online Store, then Pages
Edit your page and switch to the HTML view
Paste the embed code
Save

Webflow

Add an Embed element
Paste the embed code
Adjust the size in the element settings
Publish

Notion

Type /embed in your page
Paste the project link, not the whole iframe code
Resize the embed block as needed

Embedding a Studio piece

A Studio piece shared as Unlisted or Public can be embedded the same way: copy its link, which starts with /studio/, and use it as the src of the iframe.

Troubleshooting

The embed doesn't load

Check that visibility is Unlisted or Public, and that you saved the project
Check that the project address is right
Make sure your site allows iframes from other sites

Wrong size

Change the width and height values in the code
Use CSS to size the container
Try the container that keeps a shape

The platform blocks iframes

Some platforms limit external embeds
Check your platform's documentation
Share the link instead of embedding

The i3Dify mark on the Free plan

On the Free plan, an embedded project shows the "Made with i3Dify" mark and a thin bar along the bottom. Pro and Business remove both.

On phones

An embed can look different on a small screen. Try yours at a few sizes before you publish.