This guide will show you how to embed Customily’s personalization tool into your product pages using an iframe. This method is ideal if you’re using a custom-built e-commerce platform or a platform without a native Customily integration.
If you are on a popular platform like Shopify, BigCommerce, Magento 2, WooCommerce, or Walmart, please check the platform-specific documentation instead.
There are 4 main steps to set up Customily via iframe:
1) Generate a Personalization URL
Personalization URLs are generated inside the Customily app:
-
Go to app.customily.com → Store → Link
-
Generate a URL for the product you want to personalize (as explained here).
A sample personalization URL looks like this:
https://preview-2.customily.com/productViewer?template=0313370a-e3d1-4b88-8640-f1027a78235d&set=53b7ddcc-880d-4303-a495-0338e1388ca2&shop=standalone.customily.com
2) Embed the iFrame on Your Product Page
<html>
<iframe src="https://preview-2.customily.com/productViewer?template=0313370a-e3d1-4b88-8640-f1027a78235d&set=53b7ddcc-880d-4303-a495-0338e1388ca2&shop=standalone.customily.com" width="100%" height="100%" >
</html>
Then replace the src with the personalization URL you generated in Step 1.
2.a) Optional: Allow Non-Technical Team Members to Manage personalization URLs
You can hardcode the personalization URLs into product pages, but we recommend adding functionality that allows your team to manage them directly in your admin panel.
For example:
- Add a new field in your Products table called
personalizationURL. -
Update your admin panel so team members can paste the generated URL for each product.
On the product page, load that field dynamically into the iframe:
<html>
<script>
window.onload = function(){
const iframe = document.getElementById('iframeHTML');
iframe.src = {{customilySrc}}
}
</script>
<iframe width="100%" height="100%" id="iframeHTML">
</html>
customilySrc is a variable containing the personalization URL stored in your database or injected on the product page.3) Capture the shopper's entered personalization details.
When shoppers click Add to Cart inside the iframe:
- Shoppers should be redirected to your checkout to complete payment and shipping.
-
Customily creates a record in your Order Dashboard.
You'll be able to obtain the personalization details by going to your Order Dashboard (Store->Orders):
You'll see a list of all the records that were created after the shopper clicked on "Add to Cart"
Clicking "Go to details" will show all the personalization details your customer entered
👉 Important:
As you start receiveing more and more orders, you'd want to have a way to connect each ecommerce order with it's personalization details. In order to do so you'd have to capture the personalization details from the iFrame and store that information in your database.
When the Add to Cart button is clicked, Customily sends the personalizationGUID using parent.postMessage. Add this code to your page to capture it:
window.addEventListener("message", function (event) {
if (event.data.action === 'add-to-cart') {
// Example: Save the personalization GUID along with your order number
// saveOrderData(yourOrderNumber, event.data.personalizationGUID);
}
}, false);
personalizationGUID as an attribute of your e-commerce order.Later, you can use it to retrieve the personalization details via the Customily API as shown here.
4) Generate the print file
Once your shopper completed their checkout process you'd want Customily to generate a print file for that order. In order to do so, you should call:
curl --location 'https://app.customily.com/api/standalone/item/generate'
--header 'Content-Type: application/json'
--header 'Authorization: ••••••' \
--data '{ "personalizationGUID": "3023CAAA-4AC7-42BA-98DB-25BE2CDF6ED1"}'
Once you call this endpoint you can navigate to the print file URL and download it.
In this video, you'll see a summary of the items covered above
What's next?
Once everything is up and running, you may want to separate the preview from the option set so you can position them independently within your product page. This guide walks you through that more advanced configuration.