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.

How to set up Embedded Voyager

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 (usually this would be the full project on which the stripped down version with minimal data objects was based), then add the &project-redirect-id= parameter here, followed by the project ID (last part of URL). However, you don't want to hyperlink people 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. A good place to start for a web embed is height=400 and width=100%. You can then adjust the alignment; center is a reliable default. To identify the embed, Type the title of the scan within the quotes after title=.

See below for 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!