Embedded Voyager

Showcase product quality and engineering excellence by embedding your scans into your webpage.

Overview

Last updated: January 23, 2025

It’s possible to place an HTML embed of a Voyager project on a webpage. This is a great way to showcase your scan, product quality, and engineering excellence.

An embedded Voyager window shows a single Bookmark on a single project. It can switch between 3D, X, Y, and Z views and scrub through the 2-dimensional axes. You can control who can view the embedded project just as you normally would within Voyager today.

Lumafield’s Marketing team uses this primarily on the Lumafield site (as in this blog post), but in case you want to showcase a scan, here’s how to do it.

Set up your project

Every embedded Voyager window downloads the full data of the project to the user’s browser, as when accessing a project in the Voyager app itself. To cut down on loading time, you will want to make your project as lean as possible. To do this, create a copy of the project you want to embed by finding it in your Workspace, right-clicking, and selecting “Duplicate…”

In the duplicated project, you need to delete all of the data objects (Reconstructions and ROIs) except for those on which your featured Bookmark depends. To verify which data object a Bookmark relies on, check the dropdown box in the upper right corner of the viewer window.

On the Voyager toolbar, click SHARE, and switch on the “Anyone with link can view” under “Project sharing.”

Set up your embed

You’ll embed the Voyager window in an inline frame (IFrame). Paste the project URL inside the quotation marks. Add the ?embed=true parameter after the URL. 

If you want the embed window to redirect to a different project via the Explore the Scan modal, which shows up in the bottom right of the viewer, then add the &project-redirect-id= parameter here, followed by the project ID (last part of URL). Usually, clicking Explore the Scan > Launch Voyager would redirect to the full project on which the stripped down version with minimal data objects was based. However, if you don't want to hyperlink visitors to your Voyager project, do not include this part of the parameters.

After the close quotation marks, you can adjust height and width to pixels or percentages, as well as other iframe parameters. A good place to start for a web embed is height=100% and width=100%. To identify the embed, type the title of the scan within the quotes after title=.

See below for an example:

Embed

Drop your HTML embed into the right place on your webpage*, and now you can view your scan on any computer or mobile device, without needing to open Voyager!