Integrating Customily into any website.

Last updated: April 28, 2026

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:

Generate a personalization URL in the Customily app.
Embed an iframe on your product page with that URL.
Capture the shopper’s personalization details.
Generate the print file.

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

To display Customily’s personalization module, embed the iframe where you want it to appear:


&lt;/html&gt;  &lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;div data-component-type="text"&gt;&lt;p data-start="1925" data-end="1998"&gt;Then replace the &lt;code data-start="1937" data-end="1942"&gt;src&lt;/code&gt; with the personalization URL you generated in Step 1.&lt;br&gt;&lt;br&gt;&nbsp;&lt;/p&gt;&lt;/div&gt;
&lt;div data-component-type="text"&gt;After embedding, shoppers will see the &lt;strong&gt;preview&lt;/strong&gt; and &lt;strong&gt;option set&lt;/strong&gt; on your product page and will be able to customize and add the product to their cart.&lt;br&gt;&lt;br&gt;&lt;img src="https://help.customily.com/hc/article_attachments/26755083159963"&gt;
&lt;/div&gt;
&lt;div data-component-type="text"&gt;
&lt;h4 id="h_01K6DSQMFQ5KEWC5BR7A95PQE2" data-start="2227" data-end="2288"&gt;2.a) &lt;strong&gt;Optional: Allow Non-Technical Team Members to Manage personalization URLs&lt;/strong&gt;
&lt;/h4&gt;
&lt;p data-start="2290" data-end="2458"&gt;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.&lt;/p&gt;
&lt;p data-start="2460" data-end="2474"&gt;For example:&lt;/p&gt;
&lt;ul class="list list--type-2"&gt;
&lt;li data-start="2477" data-end="2550" data-list-item-id="ef8df130d691c8051dfb90d41a5642ee1"&gt;Add a new field in your &lt;strong data-start="2501" data-end="2513"&gt;Products&lt;/strong&gt; table called &lt;code data-start="2527" data-end="2547"&gt;personalizationURL&lt;/code&gt;.&lt;/li&gt;
&lt;li data-start="2551" data-end="2640" data-list-item-id="e71dfab7b18336436c09c70ed384217aa"&gt;&lt;p data-start="2553" data-end="2640"&gt;Update your admin panel so team members can paste the generated URL for each product.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-start="2642" data-end="2707"&gt;On the product page, load that field dynamically into the iframe:&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div data-component-type="code"&gt;&lt;div class="code-snippet" data-language="html" data-line-numbers="true" data-line-wrapping="true"&gt;&lt;div&gt;&lt;pre class="wysiwyg-code-block"&gt;&lt;code class="language-auto"&gt;&lt;html&gt; &nbsp;  
  &nbsp; &lt;script&gt;
  &nbsp; &nbsp; &nbsp; window.onload = function(){
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const iframe = document.getElementById('iframeHTML');
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iframe.src = {{customilySrc}} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
  &nbsp; &nbsp; &nbsp; }
  &nbsp; &lt;/script&gt;
  &nbsp; &lt;iframe width="100%" height="100%" id="iframeHTML"&gt; &nbsp; &nbsp; &nbsp;  
&lt;/html&gt;  &lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div data-component-type="text"&gt;
&lt;div data-component-type="text"&gt;&lt;div&gt;Here &lt;code data-start="2966" data-end="2980"&gt;customilySrc&lt;/code&gt; is a variable containing the personalization URL stored in your database or injected on the product page.&lt;/div&gt;&lt;/div&gt;
&lt;div data-component-type="informative"&gt;&lt;div class="info-container"&gt;&lt;div class="info-content"&gt;
&lt;div&gt;&nbsp;&lt;/div&gt;
&lt;h3 id="h_01K6DTRMPWTPJ4F74CPDZMZ31W"&gt;3) Capture the shopper's entered personalization details.&lt;/h3&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;&lt;p data-start="3236" data-end="3292"&gt;When shoppers click &lt;strong data-start="3256" data-end="3271"&gt;Add to Cart&lt;/strong&gt; inside the iframe:&lt;/p&gt;&lt;ol class="list list--type-2"&gt;
&lt;li data-list-item-id="e302bc27d6184419d878c0047f47100ae"&gt;Shoppers should be redirected to your checkout to complete payment and shipping.&lt;/li&gt;
&lt;li data-list-item-id="e83ab90701fdcaa9f7acbf4ed4a078ce8"&gt;&lt;p data-start="3297" data-end="3371"&gt;Customily creates a record in your &lt;strong data-start="3332" data-end="3351"&gt;Order Dashboard.&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;&lt;p&gt;&nbsp;&lt;/p&gt;&lt;p&gt;&lt;img src="https://help.customily.com/hc/article_attachments/26754323988123"&gt;&lt;/p&gt;&lt;p id="01J0V7S9KV44RS9CSF5DYEW3A4"&gt;You'll be able to obtain the personalization details by going to your Order Dashboard (Store-&gt;Orders):&lt;br&gt;&lt;br&gt;&lt;img src="https://help.customily.com/hc/article_attachments/26754354229019"&gt;&lt;br&gt;&lt;br&gt;You'll see a list of all the records that were created after the shopper clicked on "Add to Cart"&lt;br&gt;&lt;img src="https://help.customily.com/hc/article_attachments/26754324010011"&gt;&lt;/p&gt;&lt;p&gt;Clicking "Go to details" will show all the personalization details your customer entered&nbsp;&lt;br&gt;&lt;img src="https://help.customily.com/hc/article_attachments/26754354252955"&gt;&lt;br&gt;&lt;br&gt;&#128073; &lt;strong data-start="1906" data-end="1920"&gt;Take into account:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;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.&lt;br&gt;&lt;br&gt;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.&lt;/p&gt;&lt;div data-component-type="text"&gt;&lt;p&gt;When the Add to Cart button is clicked, Customily sends the &lt;code data-start="4142" data-end="4163"&gt;print file url&lt;/code&gt; using &lt;code data-start="3785" data-end="3805"&gt;parent.postMessage&lt;/code&gt;. Add this code to your page to capture it:&lt;br&gt;&nbsp;&lt;/p&gt;&lt;/div&gt;&lt;div data-component-type="code"&gt;&lt;div class="code-snippet" data-language="javascript" data-line-numbers="true" data-line-wrapping="true"&gt;
&lt;pre class="wysiwyg-code-block"&gt;&lt;code class="language-auto"&gt;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);&lt;/code&gt;&lt;/pre&gt;
&lt;figure class="wysiwyg-image"&gt;&lt;img style="aspect-ratio: 1596/956;" src="https://help.customily.com/hc/article_attachments/46473197585051" width="1596" height="956"&gt;&lt;/figure&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div data-component-type="table"&gt;Store this &lt;code data-start="4142" data-end="4163"&gt;print file url&lt;/code&gt; as an attribute of your e-commerce order.&lt;br&gt;&nbsp;&lt;br&gt;&#128073; &lt;strong data-start="1906" data-end="1920"&gt;Take into account:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;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&lt;br&gt;&nbsp;&lt;/div&gt;&lt;h3 id="h_01K6DTYH5WNGFA6MCKQBPRZ7Q6" data-component-type="text"&gt;&lt;strong&gt;4) Generate the print file&lt;/strong&gt;&lt;/h3&gt;&lt;p&gt;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:&lt;/p&gt;&lt;div data-component-type="text"&gt;
&lt;pre class="wysiwyg-code-block"&gt;&lt;code class="language-auto"&gt;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"
}'&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;br&gt;Replace &lt;code&gt;url&lt;/code&gt; with the &lt;code data-start="4142" data-end="4163"&gt;print file url&lt;/code&gt; obtained in the last step and use &lt;code&gt;yourAuthToken&lt;/code&gt;.&lt;br&gt;You can get &lt;code&gt;yourAuthToken&lt;/code&gt; as shown &lt;a href="https://app.customily.com/swagger/index.html?url=/swagger/v1/swagger.json#/Authentication"&gt;here&lt;/a&gt;&lt;br&gt;&lt;br&gt;Once you call this endpoint you can navigate to the print file URL and download it.&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;br&gt;&lt;strong&gt;What's next?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;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.&nbsp;&lt;/p&gt;
&lt;/div&gt;