> ## 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 iframe SDK

This instruction explains how to integrate **Teeinblue** into any website using an iframe.

# Integrate Teeinblue on your site
To integrate **Teeinblue Product Personalizer** on your site, you just have to embed an iframe where you want the personalization module to appear. As an example, this is how the iframe code looks:

```
<html>  

   <iframe src="<https://embed.teeinblue.com/embed?id=988e3264-5e53-4e04-92f0-fd5911d66f00&shop=open-platform.teeinblue.com>" width="100%" height="100%" >  

</html>
```


*-&#32;**id (required)**: UUID of the product*
*-&#32;**shop (required)**: Domain of the store*

This will render the preview and the customization form:
![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/op-1_qvj338.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/op-2_nomb4r.png)