Showcases & Embedding

What this covers

This page describes how showcases work in Edro 3D: what a showcase contains, how the public URL and slug system works, how embed code behaves on third-party pages, and how live editing lets viewers see real-time changes.

What is a showcase

A showcase is a static, self-contained snapshot of a project. When you deploy a project, Edro 3D packages the current 3D scene file, all referenced assets, and a public web page. That page includes the metadata you have set in the editor — the project name, description, and the screenshot image you have captured — which are used for link previews and search engine indexing. This package is served publicly from then on, independently of any future edits you make in the editor.

Note

Deploying always overwrites the previous deployment. There is no versioning — the showcase reflects only the most recent deploy.

Pending changes

Whenever you save changes in the editor after the last deployment, the showcase dialog shows a “There are changes waiting to be deployed” notice and presents a Deploy changes button. When the showcase is already up to date, no action is required.

Showcase URL

Every deployed project is accessible at a public URL. By default the URL uses the project’s alphanumeric ID:

https://cloud.edro3d.com/play/<project-id>

Slugs (Pro)

On a Pro organization, you can assign a slug — a human-readable name that replaces the ID in the URL:

https://cloud.edro3d.com/play/<slug>

Using a meaningful name instead of a random ID makes your link easier to share and remember, improves how it looks when posted on social media or in emails, and can positively affect how search engines index your showcase page.

Slug rules:

• Minimum 6 characters.
• Lowercase letters, numbers, and hyphens only.
• Must be globally unique across all projects.
• Cannot be changed once assigned.

Old alphanumeric URLs will automatically redirect to the newly assigned slug URL.

Caution

Because a slug cannot be reassigned, choose it carefully

Deploying

Deployment is triggered from the Set up showcase dialog in the editor. Once triggered, the showcase link becomes live within a few seconds.

Deployment requires the owner or editor role on the project.

Note

Take into account that cache systems may cause a delay in seeing the latest changes.

Autorun

The Autorun checkbox (enabled by default) controls whether the 3D scene starts loading as soon as a visitor opens the showcase. When unchecked, visitors see a loading prompt and must tap or click to start the experience.

Watermark

When an organization is on the free plan, the deployed showcase displays the Edro 3D watermark. Upgrading to Pro enables the user to remove it from all future deployments of that organization’s projects.

Embed code

The embed code lets you place a showcase inside any web page using an <iframe>.

Structure

<iframe
  src="https://cloud.edro3d.com/play/PROJECT_ID_HERE"
  style="width: 100%; height: 600px;"
  frameborder="0"
  allow="fullscreen, web-share">
</iframe>
<script src="https://cloud.edro3d.com/player/embed-helper.js"></script>

The <iframe> renders the showcase. The <script> tag loads the embed helper, which is a lightweight companion script that enables advanced features such as scroll-driven animations. The <script> tag must immediately follow the <iframe> tag in the HTML.

Note

The <iframe> alone is sufficient if you do not use scroll-driven animations. Some CMS and website builders may block external scripts; features that depend on the embed helper will not work in those environments.

Size and position

You can configure the size and CSS position of the iframe from the embed options panel in the showcase dialog:

Option	CSS property	Default
Width size	width	100%
Height size	height	600px
Position	position	static

When Position is set to absolute or fixed, four additional offset fields become available:

Option	CSS property
Distance from top	top
Distance from right	right
Distance from bottom	bottom
Distance from left	left

All size and offset values are plain CSS strings (e.g. 300px, 50%, 20vh). Leaving an offset field blank omits the corresponding CSS property.

Note

Scrolling animation and position — when a project uses a Sync with scroll animation, the showcase dialog will warn you if the iframe position is not set to fixed. Depending on the host website, fixed positioning may be required for the scroll animation to behave correctly.

Public access requirement

Embed code only works when the project has public access enabled. Without it, the iframe will show an authentication error to anonymous visitors. Set public access to at least Player from the Users & sharing dialog before embedding.

Public access

Live editing

Live editing lets you see your scene update in real time as you work in the editor, without deploying. It is useful in two main scenarios:

• Collaboration — share the showcase URL with a collaborator or client so they can watch your changes live, before the scene is ready to deploy.
• Embedding adjustments — open your showcase on one browser tab while the editor is open on another. As you tweak the scene’s appearance or behavior, you see how it looks in the actual embedded context instantly, without having to redeploy after each change.

How to use it

Open the showcase URL in a browser while logged in to Edro 3D, then enable live editing from the showcase page. Any changes made in the editor will appear immediately in the showcase view. When you are done, disable live editing to return to the last deployed version.

Access requirements

Live editing is only available to logged-in users with at least the viewer role on the project. Anonymous visitors cannot use it, even if the project has public access enabled.

Caution

Setting public access to Viewer exposes your live editor activity to anyone with the showcase link, not just invited members. Use Player for public access unless real-time visibility is intentional.