You can embed interactive 3D Scene Viewer models directly into your own website, dashboard, or intranet page using an IFRAME. The example embedded model below demonstrates the interactive experience your users will have.
Configure your domain to host scene files for the embedded viewer.
Combining with Custom Branding
Embedded viewers work well alongside Custom Branding. You can embed a branded viewer page in your own domain using an IFRAME, giving your users a seamless experience under your own URL. See the Custom Branding page for details on branded landing pages and client-specific customization.
Subsections of Embedding & Hosting
Embed Code Generator
C Tech provides an Embed Code Generator that builds the HTML snippet for you — fill in your hosting details and copy the result into your page.
How It Works
The embedded viewer loads a lightweight, read-only version of the Scene Viewer inside an IFRAME on your page. Users can rotate, zoom, pan, and interact with the model just like the full viewer, but cannot upload or modify files.
The generated embed code points to viewer.ctech.com/inline_viewer.html with query parameters that identify your scene file and authenticate the request.
Required Information
Before generating an embed code, you need the following:
Field
Description
Scene Filename
The name of your scene file (e.g., myScene.ctws or myBundle.ctmws). Case-sensitive.
Domain Hosting Scene File
The full URL of the server hosting your scene files (e.g., https://viewerdemo.ctech.com).
Folder Containing Scene File
The subdirectory path on the hosting domain where your files are stored (e.g., clients/myclient). Leave empty if the file is at the domain root. Case-sensitive.
API Key
A 16-character hexadecimal key that authenticates requests to your hosting domain. This is provided by C Tech when your hosting domain is configured.
Viewer Options
The embed generator also lets you configure how the embedded viewer appears:
Option
Default
Description
Width
80%
Width of the embedded viewer. Accepts pixels (e.g., 640) or a percentage (e.g., 80%).
Height
400px
Height of the embedded viewer. Accepts pixels (e.g., 600) or a percentage.
Allow Full Screen
On
When enabled, users can expand the viewer to fill their screen.
Allow Scene Information
On
When enabled, the information panel is available for users to inspect model details.
Generated Embed Code
After filling in the required fields, the generator produces an HTML snippet you can copy and paste into your website. A typical embed code looks like this:
The model parameter is a URL-encoded path built from your domain, folder, and filename. The generator handles the encoding automatically.
Tip
The Embed Code Generator remembers your settings between visits, so you only need to enter your domain and API key once.
Tip
To embed multiple scenes side by side, use a .ctmws bundle file. See Multi-Scene Embedding for details.
URL Parameters Reference
If you prefer to construct embed URLs manually, the inline viewer accepts these query parameters:
Parameter
Required
Description
apikey
Yes
Your 16-character API key
model
Yes
URL-encoded path to the scene file (domain + folder + filename). Supports both .ctws and .ctmws files.
include_info
No
Show or hide the information panel (true or false, defaults to true)
Multi-Scene Embedding
You can embed multiple scenes in a single viewer by using a .ctmws (multi-workspace) bundle file instead of a single .ctws file. The .ctmws format packages multiple scenes together with their layout, titles, and linking settings into one file.
The example below shows three TCE contamination plume models from different time periods displayed in a single embedded viewer:
To embed a multi-scene layout, use the .ctmws file in the Embed Code Generator the same way you would a single .ctws file.
Creating a .ctmws Bundle
Open the Scene Viewer and load your scenes using the Scene Management menu
Arrange the layout, set titles, and configure linking options
Click Export as .ctmws in the Scene Management menu
Host the exported .ctmws file on your domain alongside your other scene files
The exported bundle preserves the complete workspace state — layout arrangement, split ratios, viewport titles, and linking settings. See Saving and Sharing Multi-Viewport Scenes for details.
Hosting Requirements
To host scene files on your own domain, C Tech must configure your domain in the viewer’s hosting system. Each domain is registered with a unique API key. Contact C Tech to set up hosting for your domain.
Your hosting server must meet these requirements:
HTTPS — Scene files must be served over HTTPS.
CORS policy — The server must include a Access-Control-Allow-Origin header that permits GET requests from viewer.ctech.com. Without the correct CORS configuration, the browser will block the viewer from loading your scene files. Most cloud storage providers (e.g., Azure Blob Storage, AWS S3) have CORS settings in their configuration panels.
Case-sensitive paths — Folder paths and filenames are case-sensitive on most hosting servers.