[Teeinblue Boundless] Documentation to 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>

- id (required): UUID of the product
- shop (required): Domain of the store

This will render the preview and the customization form:

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: 03/07/2025

Was this article helpful?

Thank you!