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

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?

0 out of 1 found this helpful
Have more questions? Submit a request