This tutorial explains how to integrate Teeinblue injected into any website.

Integrate Teeinblue on your site

The following steps will guide you through injecting the personalized form directly onto your product page — no iframe needed.

**Step 1: **Insert the following HTML code where you want the mockup to appear:

<div id="teeinblue-mockup"></div>

Step 2: Insert the following HTML code where you want the personalized form to appear:

<div id="teeinblue-form"></div>

Step 3: Add the following JavaScript code to your product page:

<script>
  (function () {
    window.teeinblue = {
      id: 'UUID of the product',
      shop: 'Domain of the store',
      variant: { // variant is required; if you don't have it, use this default
        id: "variant_id",
        color_hex: "#ffffff",
      },
      onCustomizationCreated: function (personalizedData, lineItemProps) {
        // Do something
        // Example: Add to cart, preview the design file, ...
      }
    };

    document.addEventListener("DOMContentLoaded", function () {
      const script = document.createElement("script");
      script.src = "https://sdk.teeinblue.com/open/index.js";
      script.id = "teeinblue-app-script";
      script.type = "text/javascript";
      document.body.appendChild(script);
    });
  })();
</script>

Here, your customers can choose customization options and submit the form.

Manage the created customization data

You can manage the customization data created by customers in the Customizations section in the Teeinblue portal.

Updated on: 04/03/2026