Embed TisFile Viewer

Quick Start

The simplest way to embed TisFile on your website is using an iframe. Just copy this code and add your viewer ID:

<iframe
  src="https://tisfile.com/embed/v/YOUR_VIEWER_ID"
  width="100%"
  height="700"
  frameborder="0"
  allow="fullscreen"
></iframe>

Replace YOUR_VIEWER_ID with your viewer ID from the TisFile Dashboard.

Getting Your Viewer ID

1. Log in to your TisFile Dashboard
2. Go to Viewers and select or create a viewer
3. Find the viewer ID in the embed code snippet at the bottom of the page
4. Copy the entire iframe code or just the viewer ID

URL Parameters

Customize the viewer appearance using URL parameters:

Example with custom colors:

<iframe
  src="https://tisfile.com/embed/v/YOUR_VIEWER_ID?bg=1a1a1a&color=ff6600"
  width="100%"
  height="700"
  frameborder="0"
></iframe>

Domain Allowlist (Security)

For security, you can restrict which domains are allowed to embed your viewer:

1. Go to your viewer in the TisFile Dashboard
2. In the Settings section, find Allowed Domains
3. Add your website domain(s), e.g., https://yourshop.com
4. Save changes

Wildcard subdomains are supported:

• https://*.yourshop.com - matches any subdomain
• http://localhost:3000 - for local development

JavaScript Events (postMessage)

The embedded viewer communicates with your page using the postMessage API. Listen for events to react to user actions:

window.addEventListener('message', (event) => {
  // Verify the origin for security
  if (event.origin !== 'https://tisfile.com') return;

  const { type, viewerId, ...data } = event.data;

  switch (type) {
    case 'tisfile:ready':
      console.log('Viewer is ready', data.products);
      break;
    case 'tisfile:render-complete':
      console.log('STL render completed');
      break;
    case 'tisfile:error':
      console.error('Viewer error:', data.error);
      break;
  }
});

Available Events

Responsive Embedding

To make the viewer responsive, wrap the iframe in a container with aspect ratio:

<style>
.tisfile-container {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* 4:3 aspect ratio */
}
.tisfile-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
</style>

<div class="tisfile-container">
  <iframe
    src="https://tisfile.com/embed/v/YOUR_VIEWER_ID"
    allow="fullscreen"
  ></iframe>
</div>

Troubleshooting