This tutorial explains how to integrate Customily into any website using an iframe.
For popular eCommerce platforms such as Shopify, BigCommerce, Magento 2, WooCommerce, or Walmart there are more specific integration documents that you can find here
For popular eCommerce platforms such as Shopify, BigCommerce, Magento 2, WooCommerce, or Walmart there are more specific integration documents that you can find here
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.customily.com/productViewer?product=f9e7abfe-e4c3-4541-9b3f-563289994ba2&set=460A594A-8FDC-4066-B96D-A88EAFB94027" width="100%" height="100%" >
</html>
The preview URL that you should enter as the iframe src can be generated in app.customily.com on the Options Manager 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, your template and associated option set will be visible on your product page. Here, your customers can customize the product and add it to the cart.
How to grab the personalization information and send it to the cart
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