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
👉 Take into account:
As you may know, on top of storing the personalization details your shopper entered. Customily can also generate a ready to print file (also known as production file) so you can automate your production process.
As you start receiving more and more orders, you'd want to have a way to connect each ecommerce order with it's production file. In order to do so you'd have to capture the production file URLs from the iFrame and store that information in your database.
When the Add to Cart button is clicked, Customily sends the print file url 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 print file file URL along with your order number
// saveOrderData(yourOrderNumber, event.data.exportedFiles[0].url);
}
}, false);print file url as an attribute of your e-commerce order.👉 Take into account:
If you try to open this print file url, you'll get a 404. This is because Customily creates an empty url where it will store the print file after you generate it. In order to generate the print file from that url, follow the next step
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://sh.customily.com/api/standalone/item/generate' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer yourAuthToken' \
--data '{
"url": "https://cdn.customily.com/ExportFile/yourCustomilyUserName/fileName.png",
"shop": "yourStoreName.com"
}'
Replace url with the print file url obtained in the last step and use yourAuthToken.
You can get yourAuthToken as shown here
Once you call this endpoint you can navigate to the print file URL and download it.
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.