> ## 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).

# How to use Teeinblue with PageFly

# Getting started

This article will provide an introduction on how to integrate **Teeinblue Product Personalizer** with **PageFly** apps to create an ideal shopping experience for your customers. With other page builder like Gempages, EComposer, etc., you can perform similar operations.

# Instruction

###### Step 1: Open the PageFly app then open your product page 

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/step1_ufpw89.png)

###### Step 2: Add the id `teeinblue-gallery` to the column containing the product media

This allows Teeinblue to display a preview in place of the product media.

|| The TIB preview is not displayed in the PageFly app.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/step2_1iph3xd.png)

###### Step 3: Add HTML/Liquid element

Add an HTML/Liquid element to the product details section where you want the customization form to be displayed.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/step3_1l026n.png)

Click Open code editor then add the code below then click Done

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

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/step4_94vldw.png)

###### Step 4: Add the id `teeinblue-atc-button` to the Add to cart button.

This allows Teeinblue to add the necessary attributes to the product when adding it to the cart.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/step4_c68syl.png)

###### Step 5: Save changes and check it on your store front.

| That's it. Hopefully this article can help you use **Teeinblue** with **PageFly** and other page builders. Things change all the time, so if you run into any issues or need our help, please don't hesitate to share them with us at the in-app live chat. We're happy to lend a hand 🤩