Embed on websites

Add your interactive 3D projects directly to any website. The embed loads within an iframe and works on all major platforms.

What is embedding?

Embedding means placing your i3Dify project directly inside another website. Visitors can interact with your flipbook or lanyard without leaving the page.

Your project appears within the website layout
Full interactivity is preserved
No separate tab or popup needed
Works on any site that supports iframes

Getting the embed code

Open your project in the editor
Go to the Share tab
Make sure visibility is set to Unlisted or Public
Find the Embed Code section
Click Copy to copy the code
Paste the code into your website

Understanding the code

The embed code looks like this:

<iframe
  src="https://i3dify.com/view/your-project-id"
  width="100%"
  height="600"
  style="border: none;"
  allowfullscreen
></iframe>

src: The URL of your project

width: How wide the embed appears (can be pixels or percentage)

height: How tall the embed appears (in pixels)

style: Removes the default iframe border

allowfullscreen: Enables fullscreen mode if supported

Customizing the size

You can adjust the embed dimensions to fit your website:

Responsive width

Use width="100%" to make the embed fill its container:

Fixed dimensions

Use pixel values for exact sizing:

Aspect ratio container

For a responsive aspect ratio, wrap 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: none;"
  ></iframe>
</div>

Platform-specific 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 (+) > Embed > Custom Embeds > Embed a Widget
Paste the embed code
Resize as needed

Squarespace

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

Shopify

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

Webflow

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

Notion

Type /embed in your page
Paste the project URL (not the full iframe code)
Resize the embed block as needed

Troubleshooting

Embed not loading

Check that visibility is set to Unlisted or Public
Verify the project URL is correct
Make sure your site allows iframes from external sources

Wrong size

Adjust width and height values in the code
Use CSS to control the container size
Try a responsive aspect ratio container

Platform blocks iframe

Some platforms restrict external embeds
Check your platform's documentation
Consider linking instead of embedding

Mobile considerations

Embedded content may display differently on mobile devices. Test your embed on various screen sizes to ensure a good experience.