Sharing & Embedding
Share your 3D project with clients, embed it on your website, or distribute it via a direct link. This section covers all sharing options.
Enabling the Share Link
- 1Open your project in the editor.
- 2Go to Project Settings (or click the Share icon in the top toolbar).
- 3Find the "Share" section and toggle "Enable Share Link" to on.
- 4A unique share URL will be generated (e.g., https://app.simplio3d.ai/share/[projectId]/[token]).
- 5Copy the link and send it to anyone. They can view and interact with the configurator without needing an account.
Embedding with iframe
To embed the configurator on your website, use the provided iframe code.
- 1After enabling the share link, click the "Embed" tab in the sharing panel.
- 2Copy the iframe embed code provided.
- 3Paste the code into your website's HTML where you want the configurator to appear.
- 4Adjust the width and height attributes to fit your page layout.
- 5Optionally configure "Allowed Embed Domains" in settings to restrict which websites can host the iframe.
<!-- Example embed code -->
<iframe
src="https://app.simplio3d.ai/share/YOUR_PROJECT_ID/YOUR_TOKEN"
width="100%"
height="600"
frameborder="0"
allow="autoplay; fullscreen; xr-spatial-tracking"
allowfullscreen
></iframe>
Other Sharing Options
| Option | Description |
|---|---|
| Direct Link | A standalone URL that opens the configurator in a full page. Best for sharing via email, chat, or social media. |
| QR Code | Generate a QR code that links to the share URL. Useful for print materials, trade shows, or product packaging. |
| Embed Code | Copy-paste iframe HTML for embedding on any website. |
| Responsive Embed | The embed automatically adapts to the container size. Use percentage-based width for responsive layouts. |
| Password Protection | Optionally require a password to access the shared project and its public share actions. |
Sharing Settings
The sharing dialog has three tabs:
| Tab | What It Contains |
|---|---|
| Link | The direct share URL and QR code. Copy or regenerate the share token. |
| Embed | The iframe embed code with width/height options. Copy-paste into any website. |
| Settings | Allowed Embed Domains for iframe hosts, password protection, and token regeneration for revoking old links. |
position: relative; padding-bottom: 56.25%; and set the iframe to position: absolute; width: 100%; height: 100%; for a perfectly responsive 16:9 aspect ratio.Listening to the Configurator from Your Page
An embedded configurator can tell your page what the shopper is doing — which option they picked, and when they submitted an enquiry. This is a supported pattern built from two features you already have, and it needs no plugin and no code change on our side.
The viewer broadcasts events
The share view fires three browser CustomEvents on its own window as the shopper configures and submits.
Custom Scripts run in the same document
Project Settings → Advanced → Custom Scripts injects your JavaScript into the share-view page itself, so it can hear those events and relay them out to the parent page.
The three events
| Event | Fires when | detail payload |
|---|---|---|
| simplio3d:option.changed | The shopper changes a selectable option. | blockId, blockName, value, label, type |
| simplio3d:form.submitted | An enquiry / quote form is submitted successfully. | requestId, formData |
| simplio3d:quote.submitted | The same moment — a semantic alias of form.submitted. | requestId, formData |
A small helper is already available to your Custom Script: window.__simplio3d.on(name, callback) subscribes to one of these events and hands you its detail object, and window.__simplio3d.projectId tells you which project is running. Pass the name without the simplio3d: prefix — the helper adds it.
Step 1 — Forward the events (Custom Script)
Paste this into Project Settings → Advanced → Custom Scripts, replacing the origin with the site that hosts your iframe.
// Runs inside the share-view document.
// Send only to YOUR page's exact origin — never '*'.
var PARENT_ORIGIN = 'https://shop.example.com';
var EVENTS = ['option.changed', 'form.submitted', 'quote.submitted'];
EVENTS.forEach(function (name) {
window.__simplio3d.on(name, function (detail) {
window.parent.postMessage({
source: 'simplio3d',
type: 'simplio3d:' + name,
projectId: window.__simplio3d.projectId,
detail: detail
}, PARENT_ORIGIN);
});
});
Step 2 — Receive them (your page)
On the page that hosts the iframe, check the sender before you trust the message.
// Where the configurator is served from.
var CONFIGURATOR_ORIGIN = 'https://app.simplio3d.ai';
window.addEventListener('message', function (event) {
// 1. Reject messages from any other frame or tab.
if (event.origin !== CONFIGURATOR_ORIGIN) return;
// 2. Reject anything that is not ours.
var msg = event.data;
if (!msg || msg.source !== 'simplio3d') return;
if (msg.type === 'simplio3d:option.changed') {
console.log('Option', msg.detail.blockName, '=', msg.detail.label);
}
if (msg.type === 'simplio3d:form.submitted') {
console.log('Enquiry', msg.detail.requestId);
}
});
'*' hands your shopper's configuration and form data to whatever page happens to frame the configurator, including one that framed it without your knowledge — so name your origin explicitly. On the receiving side, any page on the internet can postMessage your window, so a listener that skips the event.origin check will happily process forged option and submission events. Keep both checks even while testing.- Outbound only. The configurator reports what happened; there is no inbound channel. You cannot set a selection, move the camera, or reset the configuration from your page. To open on a particular configuration, use a saved-configuration permalink
?c=instead. - There is no price event. Price is calculated and displayed inside the viewer and is never broadcast, so you cannot mirror the running total on your page from these events.
- Not every block reports.
option.changedis fired by seven of the roughly fourteen consumer-facing block types — dropdown, checkbox, toggle switch, carousel, thumbnail selector, select material and number input. Modular module placement, text input, file upload, pattern designer and design canvas fire nothing. Treat this as a stream of notable moments, not as a complete mirror of configuration state.
Save Configuration (Enterprise)
Let visitors save their in-progress configuration via email. A Save (bookmark) icon appears in the Floating Tools of the share view and the embedded iframe. Clicking it opens a modal asking for an email address; the visitor then receives a permalink that restores their exact selections — materials, dimensions, modular placements, the lot.
- 1Open the project in the editor and switch to Project Settings → Advanced tab.
- 2Find the "Save Configuration" card (visible on the Enterprise plan, for Configurator and Modular project types). If it isn't there right after logging in, give the page a moment or reload — the card appears as soon as your plan finishes loading.
- 3Toggle "Enable Save Configuration" on. Disabled by default.
- 4Make sure the project's Email settings are configured (SMTP / SendGrid / Gmail / SES / Mailgun) — the permalink email goes through the same delivery pipeline as form submissions.
- 5Publish or re-share the project. The Save icon now appears in the Floating Tools toolbar in the Share view (and inside iframe embeds).
| Property | Value |
|---|---|
| Plan required | Enterprise only |
| Project types supported | Configurator, Modular (not Viewer) |
| Retention | 90 days. After that the permalink returns "this saved configuration has expired". Expired rows are auto-purged when you open Dashboard → Saved Configurations. |
| Email driver | Project Email settings (SMTP / SendGrid / Gmail / SES / Mailgun) or the platform-level SendGrid override. |
| Captured | Email (required), name (optional), GDPR consent (required). An invisible honeypot deters bots. |
| Rate limit | 5 saves per 10 minutes per IP and per email. |
| Storage cap | 5,000 live saves per Enterprise account. Server auto-purges expired rows first; if no slot frees, the oldest live record is evicted (LRU). |
| Owner view | Dashboard → Saved Configurations (Enterprise-only sidebar entry). Shows email, project, date, days remaining, resend count; you can resend the email, copy/open the permalink, or delete. |
| Resend | Each saved configuration can be re-emailed up to 3 times from the dashboard. |
| Webhook event | configuration.saved fires after the email attempt. Subscribe in Project Settings → Advanced → Webhooks. Payload includes emailDelivered so CRMs can react to bounces. |
| Inline button | Add a "Save Configuration" form-field type to put the Save button inline with your form (Submit / Add to Cart row) instead of (or in addition to) the Floating Tools icon. Useful when Floating Tools is hidden. |
/share/PROJECT_ID/TOKEN?c=SAVED_ID. When the share viewer loads with the ?c= query, it fetches the saved snapshot and applies it on top of the project defaults.configuration.saved webhook to pipe leads into your CRM the moment a visitor saves. The payload includes the visitor's email, name, the permalink, a thumbnail URL, and the configuration summary. emailDelivered: false lets you re-send via your own infrastructure if the project SMTP bounces.