This tutorial explains how to integrate Customily into any website using an iframe.
For popular e-commerce platforms such as Shopify, BigCommerce, Magento 2, WooCommerce, or Walmart there are more check the platform-specific documentation
For popular e-commerce platforms such as Shopify, BigCommerce, Magento 2, WooCommerce, or Walmart there are more check the platform-specific documentation
Integrate Customily on your site
To integrate Customily product personalization 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://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>
This will render the preview and the option set:
The preview URL that you should enter as the iframe src can be generated in app.customily.com (Store->Link) as explained here
Each product on your store will have it's own preview URL since each product will have its own preview. The connection between the preview URL and the product should be stored as a product attribute on your e-commerce site, as explained below.
Connect Customily preview URLs with your store's products.
Since each product in your store will have its own preview URL, you will need to create a structure in your system to store the preview URL for each product.
Important: It's the integrator's responsibility to create the structure to save the preview URL in their eCommerce. This usually means creating a field in the database (most probably on the products Table) and displaying it on the eCommerce Admin Panel's product settings so an administrator can populate that field.
You'll have to load this preview URL and set it as the iframe src:
<html>
<script>
window.onload = function(){
const iframe = document.getElementById('iframeHTML');
iframe.src = {{customilySrc}}
}
</script>
<iframe width="100%" height="100%" id="iframeHTML">
</html>
Where customilySrc is a variable that represents the preview URL that you are now storing as a product attribute within your eCommerce Admin or as a javascript variable on each product page.
Now, the preview linked with your product (and its option set) will be visible on your product page. Here, your customers can customize and add the product to the cart.
How to obtain the personalization your shopper entered.
Once your customers click "Add to Cart" on the iframe, Customily will create a record on the Order dashboard with the information the user submitted. On the other hand, once this button is clicked you should make sure to redirect them to your checkout so they can complete the purchase of their product (entering credit card and shipping details, etc)
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 + a link to the ready-to-print file
How to grab the personalization information from the iframe (optional)
If you want to use your own order dashboard, you may want to grab the personalization details from the iframe.
When the user clicks on the “Add to Cart” button the iFrame will send a message through parent.postMessage to the parent (your site page) with a personalization GUID. To capture this event and add the product to your store’s cart you can use the following code:
window.addEventListener(“message”, function (event) {
if (event.data.action === ‘add-to-cart’) {
// Add the product to the cart, all the product information is
// on the ‘event.data’ object
}
}, false);The data.action object contains the personalization GUID:
|
Object Key
|
Description
|
|---|---|
|
personalizationGUID
|
Unique ID for this personalization
|
With this GUID you can then retrieve the personalization data. Learn how to retrieve the personalization data here.
The process of adding the product to the store’s cart is not handled by the iFrame and it’s the integrator’s responsibility to make this happen.
Share
Was this article helpful?
Have more questions? Submit a request