How to Embed Gaussian Splats in Websites

Updated February 2026 · 4 min read

Want to add interactive 3D viewers to your website, portfolio, or Notion page? SplatHost makes it as easy as copy-pasting an iframe. This guide covers all major platforms.

Getting Your Embed Code

Upload your PLY or SPLAT file to SplatHost
Click the Share button on your splat
Copy the Embed Code (it looks like this):

<iframe src="https://splat.host/embed/abc123" width="800" height="600" frameborder="0"></iframe>
        

Platform-Specific Guides

📝 Notion

Method 1: Embed Block (Recommended)

Type /embed in Notion
Paste your SplatHost link (e.g., https://splat.host/embed/abc123)
Press Enter — the 3D viewer will load automatically

Method 2: Iframe Block

Type /html to create an HTML block
Paste the full iframe code
Adjust width/height as needed

Note: Free Notion accounts may limit iframe embeds. Use Method 1 (Embed Block) for best results.

📰 WordPress

Block Editor (Gutenberg)

Add a Custom HTML block
Paste your iframe code
Preview to confirm it works

Classic Editor

Switch to the Text tab (not Visual)
Paste your iframe code where you want it
Switch back to Visual to see the preview

<!-- WordPress-specific sizing -->
<iframe src="https://splat.host/embed/abc123" 
        width="100%" 
        height="600" 
        style="max-width: 800px;"
        frameborder="0">
</iframe>
            

🌊 Webflow

Add an Embed element to your page
Paste your iframe code
Set the embed height (e.g., 600px)
Publish to see it live

Pro Tip: Use Webflow's position: relative wrapper to make the iframe responsive:

<div style="position: relative; padding-bottom: 75%; height: 0;">
    <iframe src="https://splat.host/embed/abc123" 
            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
            frameborder="0">
    </iframe>
</div>
            

🎨 Squarespace

Add a Code Block to your page
Paste your iframe code
Adjust height in the block settings
Save and publish

💻 HTML Website

Just paste the iframe code directly into your HTML:

<div class="splat-viewer">
    <iframe src="https://splat.host/embed/abc123" 
            width="100%" 
            height="600" 
            frameborder="0" 
            allowfullscreen>
    </iframe>
</div>
            

Add CSS for responsive sizing:

.splat-viewer {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.splat-viewer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
            

Customization Options

Aspect Ratios

16:9 (Standard): padding-bottom: 56.25%;
4:3 (Classic): padding-bottom: 75%;
1:1 (Square): padding-bottom: 100%;

Embed URL Parameters

Add these to your embed URL for custom behavior:

?autorotate=true — Auto-rotate the splat
?controls=false — Hide orbit controls
?watermark=false — Hide watermark (Pro plan only)

<iframe src="https://splat.host/embed/abc123?autorotate=true" ...>

Troubleshooting

Iframe Not Showing

Check if your platform allows iframes (some free tiers don't)
Make sure the splat is set to "Public" or "Unlisted" (not Private)
Verify the embed URL starts with https://splat.host/embed/

Iframe Too Small/Large

Use the responsive wrapper code above, or set a fixed height like height="800" in the iframe tag.

Notion Won't Load Embed

Use the direct link method (/embed block) instead of HTML. Notion prefers simple URLs over iframe code.

Ready to Host Your 3D Splats?

We're currently in private beta. Join the waitlist to get early access when we launch.

Join Waitlist →