How to Embed the Zakeke 3D Viewer in Any Website or CMS

Help 3D DAM & AR Viewer

Updated March 04, 2025 09:03

Introduction

The Zakeke 3D Viewer allows you to display interactive 3D models on your website, providing an immersive experience for your users. This guide will show you how to embed the viewer in any web page or CMS using an iFrame.

1. Retrieve the iFrame Embed Code

To integrate the 3D Viewer, follow these steps:

1. Log in to your Zakeke DAM (Digital Asset Manager) account.

2. Navigate to the Asset Library and click on the asset you want to embed.

3. Go to the Share and Embed 3D tab.

4. Copy the iFrame script available in the iFrame accordion.

2. Embed the iFrame in Your Website or CMS

For a Standard HTML Website

If you have direct access to your website’s HTML, insert the copied iFrame script into your webpage where you want the 3D Viewer to appear:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Viewer</title>
</head>
<body>

    <!-- Paste the Zakeke 3D Viewer iFrame below -->
    <iframe src="YOUR_IFRAME_URL_HERE" frameborder="0" width="100%" height="600px" allow="fullscreen; accelerometer; magnetometer; autoplay; encrypted-media; gyroscope; picture-in-picture; camera *; xr-spatial-tracking;"></iframe>

</body>
</html>

Replace YOUR_IFRAME_URL_HERE with the iFrame URL copied from the DAM.

For Popular CMS Platforms

Most content management systems (CMS) allow you to insert custom HTML. Here’s how to do it for some of the most used platforms:

WordPress

1. Open the page or post where you want to add the viewer.

2. Switch to the Custom HTML block (in the Gutenberg editor).

3. Paste the iFrame code and save the changes.

Shopify

1. Navigate to the Products section in the Shopify admin panel.

2. Select the product where you want to embed the 3D Viewer.

3. In the Description field (or a custom HTML section of your theme), switch to the HTML editor (<>).

4. Paste the iFrame code and save the changes.

Wix

1. Go to your Wix site editor.

2. Click Add (+) > Embed > Embed a Widget.

3. Paste the iFrame code and adjust the size as needed.

3. Customize the Viewer Display

You can adjust the appearance and behavior of the viewer by modifying the iFrame attributes:

• Width & Height – Adjust the size to fit your layout (width="100%" height="600px").

• Allow Fullscreen – Enable a fullscreen option by adding allowfullscreen to the iFrame.

• Borderless View – Use frameborder="0" for a seamless integration.

4. Test and Optimize

After embedding the iFrame:

Check Responsiveness – Ensure it scales correctly on mobile and desktop.
Load Speed – Test page performance to ensure it loads smoothly.
Positioning – Adjust placement for the best user experience.

Conclusion

Embedding the Zakeke 3D Viewer is quick and straightforward with an iFrame. Whether you’re using a custom website or a CMS like WordPress, Shopify, or Wix, the process is similar—simply insert the iFrame code in a suitable HTML section.

Need help? Contact Zakeke support for further assistance!