Embed TisFile Studio

How it works

1. 1

   Photo to 3D

   In your dashboard, create a Studio item from one product photo. AI rebuilds it as an interactive 3D model with editable logo and text zones. No modelling, no photoshoot.

2. 2

   One line of code

   Publish a Viewer and paste its iframe onto your store. It runs on your own domain with no build step and no SDK to maintain.

3. 3

   Customers design it, you get the order

   Shoppers drop in their own logo, text, and artwork right in the viewer. Their personalised design lands in your inbox as a priced quote.

Quick start

The simplest way to embed Studio is with an iframe. Copy this snippet and replace YOUR-VIEWER-SLUG with the slug of a Viewer you published.

<iframe
  src="https://tisfile.com/embed/studio/YOUR-VIEWER-SLUG"
  width="100%"
  height="700"
  frameborder="0"
  allow="fullscreen"
></iframe>

You get the slug from the Studio Viewers page in your dashboard, where the ready-to-paste embed code is shown for each Viewer.

A Viewer can hold several saved Looks (colourways, design presets). To open one directly, append its look slug to the URL: /embed/studio/YOUR-VIEWER-SLUG/LOOK-SLUG. Handy for linking each product variant on your site to its matching Look.

On Shopify? Skip the code

TisFile Studio is launching on the Shopify App Store. With the app installed, there is no snippet to paste at all:

• ·Import a product straight from your catalogue; its existing photos become the 3D model.
• ·Add the TisFile 3D Customizer block to your product template once, in the theme editor. Every product you publish after that just works.
• ·Published products also get an interactive 3D view with AR in their own photo gallery.
• ·Prefer a button? The TisFile Customize Button block opens the hosted portal instead of embedding.

Merchants who install from Shopify buy credits through Shopify billing; everything else on this page works the same.

Responsive embedding

To keep the viewer responsive, wrap the iframe in a container with a fixed aspect ratio.

<style>
  .tisfile-studio {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 aspect ratio */
  }
  .tisfile-studio iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
</style>

<div class="tisfile-studio">
  <iframe
    src="https://tisfile.com/embed/studio/YOUR-VIEWER-SLUG"
    allow="fullscreen"
  ></iframe>
</div>

Hosted portal (no iframe)

If you would rather not embed an iframe, link shoppers to a full-screen customizer that TisFile hosts. They personalise the product on our page and are returned to your store with their quote reference after submitting. You configure the portal, including which domains may open it, from the same Viewer settings in your dashboard.

What shoppers can change

You decide, per zone, which tools each shopper gets. The options are:

• Spin and inspect

  Rotate the product freely to view it from any angle.

• Pick their colours

  Colour their own logo, text, or artwork, from a palette you allow.

• Upload a logo

  Drop in their own logo, with background removed automatically.

• Edit text

  Change the product's text while keeping its original style and finish.

• Whiteboard

  Draw or place their own artwork directly on a zone.

• Request a quote

  Send their personalised design to you as a priced quote.

Shoppers never need an account and never pay to use the viewer.

How billing works

Studio runs on credits, with no subscription. One credit costs EUR 0.01, and every new account starts with 1,000 free credits. You buy credit packs (EUR 10, 25, 50, or 100, with bonus credits on larger packs) and spend them on AI actions.

The merchant holds the credits. When a shopper triggers an AI action in your embedded viewer (for example, composing an uploaded logo onto the product), that cost is billed to your account, never to the shopper. Simple actions such as spinning, plain text changes, and submitting a quote are free. See pricing for the full breakdown.

Domain allowlist

For security, each Viewer has an allowed-domains list. Add the domains that are allowed to embed or open your Viewer (for example https://yourshop.com). If the list is left empty, the Viewer is not embeddable anywhere except your own TisFile dashboard, which is the safe default. You can update the list any time from the Viewer settings.