> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.teeinblue.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Integrate Teeinblue Boundless - Injected Personalization Form Guide

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>
```

![Preview and the customization form](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/monosnap-staging-sdkteeinbluec_39zlvl.png)

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**.

![Teeinblue portal -> Customization](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/monosnap-teeinblue-portal-2024_yb0efc.png)