Publishing interactive 3D models on a Webflow site is a great way to make your work stand out. Whether you're presenting a museum artifact, an engineering prototype, or an artwork, embedding a Sketchfab viewer lets visitors explore your model directly in the browser—no extra software required.
This guide walks through the entire process for beginners, from uploading your file to Sketchfab to embedding it in Webflow's designer.
Why use Sketchfab with Webflow?
Sketchfab is a powerful online 3D viewer that handles all the heavy lifting—rendering, lighting, and interaction—while Webflow gives you flexible control over page layout and design. Combined, they make it simple to:
- Present 3D models interactively on your portfolio, gallery, or project site.
- Keep files hosted securely and optimized for web delivery.
- Add annotations or rotations to explain key features.
- Avoid coding while still producing professional, responsive results.
If your 3D model came from Museum Scan, use one of the .glb files included with your delivery. The .glb format packages both the mesh and textures in a single, web-ready file. For best performance and clarity, we recommend uploading the 2K resolution version.
Step 1. Create a Sketchfab account
- Go to Sketchfab.
- Click Sign Up in the top-right corner.
- Choose Google, Apple, or email registration.
- The free plan supports most personal and portfolio uses.
The Sketchfab sign-up page with multiple registration options
Step 2. Upload your 3D model
- Once logged in, click your profile icon → Upload.
- Drag and drop your .glb file, or browse to select it.
- Add a title, description, and optional tags.
- Choose whether to make the model public or private.
- Click Continue—processing can take a few minutes depending on size.
- When processing finishes, Sketchfab will generate an interactive preview of your model.
The upload dialog showing file selection and metadata options
Additional object properties and metadata settings
Step 3. Adjust the 3D viewer settings
- Click Edit 3D Settings on your model page.
- Experiment with:
- Lighting & environment: Pick a neutral or museum-style HDRI.
- Background color: Match your Webflow theme.
- Annotations: Label specific details or features.
- Save your changes.
The 3D settings panel where you can adjust lighting, background, and other display options
Your model appears in the Sketchfab viewer after successful upload
Step 4. Copy the embed code
- From the model page, click Share → Embed.
The embed code dialog showing the iframe code ready to copy
- Copy the
<iframe>code. It looks similar to:
Sketchfab Embed Code
<div class="sketchfab-embed-wrapper">
<iframe
title="Potted Cactus"
frameborder="0"
allowfullscreen
mozallowfullscreen="true"
webkitallowfullscreen="true"
allow="autoplay; fullscreen; xr-spatial-tracking"
xr-spatial-tracking
execution-while-out-of-viewport
execution-while-not-rendered
web-share
src="https://sketchfab.com/models/3f89b0c4108f46738dee5915a72224d4/embed">
</iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
<a href="https://sketchfab.com/3d-models/potted-cactus-3f89b0c4108f46738dee5915a72224d4?utm_medium=embed&utm_campaign=share-popup&utm_content=3f89b0c4108f46738dee5915a72224d4"
target="_blank"
rel="nofollow"
style="font-weight: bold; color: #1CAAD9;">
Potted Cactus
</a>
by
<a href="https://sketchfab.com/museumscan?utm_medium=embed&utm_campaign=share-popup&utm_content=3f89b0c4108f46738dee5915a72224d4"
target="_blank"
rel="nofollow"
style="font-weight: bold; color: #1CAAD9;">
museumscan
</a>
on
<a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=3f89b0c4108f46738dee5915a72224d4"
target="_blank"
rel="nofollow"
style="font-weight: bold; color: #1CAAD9;">
Sketchfab
</a>
</p>
</div>You can later adjust many of the cosmetic parameters by manually editting this code.
Step 5. Embed the model in Webflow
Using the Embed element
- In Webflow Designer, open the page or section where you want to display the model.
- From the Add Elements panel, drag an Embed component into the layout.
- In the code window that appears, paste the Sketchfab
<iframe>code. - Click Save & Close.
- You'll see a gray placeholder in the designer; the interactive viewer will appear in preview and when published.
Adding the Embed element in Webflow Designer and pasting the Sketchfab code
Adjusting size and layout
- Resize the embed block by changing its width or using a div block wrapper with responsive settings.
- For full-width layouts, set the iframe to
width="100%"and a fixed height (e.g.,height="600"). - Preview the page on different devices to ensure good scaling and touch interaction.
Step 6. Publish and verify
- Click Publish in Webflow to push your changes live.
- Visit the live URL and confirm the Sketchfab viewer loads correctly.
- Rotate, zoom, and inspect the model—performance and lighting should match your Sketchfab preview.
- If the viewer doesn't appear, check that the iframe embed code wasn't stripped or modified, and that your browser allows third-party iframes.
Optional: Fine-tuning appearance
- Use Webflow interactions (scroll or hover effects) to fade in the model or reveal it as users scroll.
- Combine your 3D embed with captions, photos, or a short description.
- Link out to the full Sketchfab page for metadata or download options.
Summary checklist
- ✅ Upload your .glb file (2K recommended) to Sketchfab.
- ✅ Configure lighting and annotations.
- ✅ Copy the embed iframe.
- ✅ Paste it into a Webflow Embed element.
- ✅ Publish and test responsiveness.
At Museum Scan, every deliverable includes optimized .glb files ready for immediate upload to Sketchfab or custom web platforms. For organizations seeking deeper control, we also offer professionally hosted interactive experiences—complete with full design customization, security features, and advanced interactivity suitable for museum-grade exhibits and educational deployments.
Bring Your 3D Content to Life
Explore our 3D Scanning solutions to see what's possible beyond standard embeds.
Get Started Today
