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.

How to obtain the personalized data that your customers have entered

When customers submit the form (by clicking the Add to cart button), the iFrame will send a message through parent.postMessage to the parent website (your website) with data structured as follows:

{
    "action": "add-to-cart",
    "options": Personalized data,
    "customization_id": ID of the customization data,
    "data": Customization data,
    "design_url": Design file URL,
    "preview_url": Preview image URL
}

To capture this event, you can use the following code:

window.addEventListener("message", function (event) {
  if (event.data.action === 'add-to-cart') {
    // Do something
    // Example: Add to cart, preview the design file, ...
  }
}, false);

Manage the created customization data

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

Updated on: 11/09/2025