Embed 3D Models in Wix — HTML Widget Method

Wix and 3D: The Current State

Wix has come a long way as a website builder. It handles images, video, animations, and even some basic interactive elements out of the box. But when it comes to embedding interactive 3D models — the kind where visitors can rotate, zoom, and inspect an object from every angle — you're mostly on your own. Wix's app market has a handful of 3D-related apps, but they tend to be limited, expensive, or both.

The most reliable method for getting a 3D viewer onto a Wix page is the HTML iframe widget. This is a built-in Wix feature that lets you embed any external webpage inside your site. Since GeometryViewer provides a hosted viewer URL for every model you upload, you can point the widget at that URL and have a fully interactive 3D experience on your Wix site in minutes.

This approach works on every Wix plan, including the free tier. You don't need Velo (Wix's developer platform) or any coding knowledge beyond copy-pasting a few lines of HTML. It works in both the classic Wix Editor and Wix Studio (formerly Editor X).

Step-by-Step: Embedding with the HTML Widget

Step 1: Get Your Viewer URL

First, upload your 3D model to GeometryViewer. We accept GLB, GLTF, STL, OBJ, 3MF, and STEP files. Once the upload completes, you'll see your model in the viewer with a URL like https://geometryviewer.com/v/abc123. Copy this URL. If you already have a model uploaded, find it in your dashboard and copy its viewer link.

Step 2: Add the HTML Widget in Wix Editor

Open the Wix Editor for your site. Navigate to the page where you want the 3D model to appear. In the left sidebar, click the Add (+) button, then select Embed Code from the menu. Choose Embed HTML. This adds an HTML widget to your page — you'll see a grey box with a code icon.

If you're using Wix Studio, the path is slightly different: click Add Elements in the top toolbar, then Embed & Social, then Custom Embeds, and select Embed HTML.

Step 3: Enter the Embed Code

Click on the HTML widget you just added, then click Enter Code. Select the Code tab (not "Website Address"). Paste the following HTML:

<iframe
  src="https://geometryviewer.com/v/abc123"
  width="100%"
  height="100%"
  frameborder="0"
  allow="xr-spatial-tracking"
  style="border: none; border-radius: 8px;"
></iframe>

Replace abc123 with your actual model ID. Click Update. The 3D viewer should now appear inside the widget.

Step 4: Resize and Position

Drag the corners of the HTML widget to resize it. Unlike a regular Wix image element, the HTML widget doesn't snap to standard sizes, so you have full control. A good starting size is around 600px wide by 450px tall for a model viewer. For full-width layouts, stretch the widget to fill the column and set the height to around 500px.

You can also use the Wix Inspector panel (the small gear icon when the widget is selected) to set exact pixel dimensions. For a 16:9 ratio, try 800 x 450. For a square viewer, use 500 x 500.

Using Wix Velo for Dynamic Embeds

If you're comfortable with a bit of code and want to take things further, Wix's Velo developer platform lets you dynamically control the HTML widget. This is useful if you have a product catalog where each product has a different 3D model — you can set the iframe source dynamically based on a database field.

To do this, give your HTML widget an ID in the Properties panel (for example, #html1). Then open the Velo code editor and add:

$w.onReady(function () {
  const modelUrl = "https://geometryviewer.com/v/abc123";
  $w("#html1").src = modelUrl;
});

For database-driven pages, replace the hardcoded URL with a field from your Wix collection. This approach works well for product pages, portfolio galleries, or any situation where you're managing multiple models.

Alternative: The Website Address Method

If you don't want to write any HTML at all, you can use the HTML widget's "Website Address" tab instead of the "Code" tab. Simply paste the GeometryViewer URL directly into the URL field. Wix will load the page in an iframe automatically.

The downside of this approach is that you have less control over styling and attributes. You can't add allow="xr-spatial-tracking" for AR features, and you can't customize the iframe's border radius or other CSS properties. For basic viewing, though, it works perfectly.

Making It Responsive on Mobile

Wix has separate mobile and desktop editors, which is both a blessing and a curse. The blessing is that you can customize exactly how the 3D viewer looks on mobile. The curse is that you need to do it manually.

Switch to the Mobile Editor by clicking the phone icon in the top bar. You'll likely see that your HTML widget has either disappeared or is awkwardly positioned. Drag it into place and resize it for mobile screens. A good mobile size is full-width (stretching to both edges of the mobile canvas) with a height of about 300-350px.

If the 3D model feels too cramped at 300px height on mobile, consider using a taller aspect ratio. Remember that mobile users will interact with the viewer using touch gestures — one finger to rotate, two fingers to pan, pinch to zoom — so the viewer needs to be large enough that these gestures don't feel awkward.

Performance Considerations

Wix sites already load a significant amount of JavaScript for their own framework, editor features, and analytics. Adding a 3D viewer introduces additional resources — the WebGL context, textures, and geometry data. Here are some tips to keep things smooth:

• Use GLB format. GLB is a single binary file that's much faster to download than multi-file GLTF or OBJ. If your source is an STL, GeometryViewer converts it automatically, but uploading a GLB directly saves that conversion step.
• Keep models under 10 MB. Larger models work, but they'll test your visitors' patience. Compress textures and decimate meshes where possible.
• Limit to one viewer per page. Each 3D viewer creates its own WebGL context. Multiple viewers on a single page can strain older devices. If you need a gallery of models, consider linking to individual viewer pages instead.
• Lazy loading. The GeometryViewer iframe supports lazy loading. Add loading="lazy" to the iframe tag so the viewer only loads when the user scrolls near it.

Troubleshooting Common Issues

The widget shows "HTML component is not connected"

This message appears when the widget doesn't have any code entered. Click the widget, click "Enter Code," and make sure you've pasted the iframe HTML in the Code tab and clicked Update.

The viewer appears in the editor but not on the published site

Make sure you've published the latest version of your site. Wix doesn't auto-publish changes. Click "Publish" in the top-right corner and confirm. Also check that the GeometryViewer URL is correct — try opening it in a new browser tab to verify.

The viewer is very small or has unexpected borders

Check the widget's dimensions in the Inspector panel. Also make sure you're using width="100%" height="100%" in the iframe code, which tells the iframe to fill the widget's dimensions. If you use fixed pixel values in the iframe but different dimensions in the widget, you'll get mismatches.

Touch gestures don't work on mobile

This is usually caused by the widget being too small. Wix's mobile editor sometimes auto-shrinks elements. Go to the Mobile Editor and manually resize the widget to at least 300px in height. Also ensure no other Wix element is overlapping the widget and intercepting touch events.